ckeditor 上传文件

参考:
http://docs.ckeditor.com/#!/guide/dev_file_browser_api
http://docs.ckeditor.com/#!/guide/dev_file_browse_upload


环境:
ckeditor_4.5.10_full


在生成 ckeditor 的时候,像下面那样写:

        CKEDITOR.replace('editor1', {
            filebrowserBrowseUrl: '/Home/SelectImg',
            filebrowserUploadUrl: '/Home/SetImg'
        });

那么,当点击这个按钮的时候
这里写图片描述

会多了两个选项卡
上传选项卡:
这里写图片描述

以及链接选项卡:
这里写图片描述


其中 filebrowserBrowseUrl 的值代表图片要上传的地址,
当在上传选项卡上传图片的时候,CKEditor的访问地址会带一些参数,形如:
其中:
CKEditor=editor1 表示 CKEditor 的 id
CKEditorFuncNum=1 表示此次上传事件的唯一标识码,一般是1

http://localhost:53927/Home/SetImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn

上传图片的时候:
图片的 name 值是 upload
这里写图片描述


当在链接选项卡 点击 浏览服务器 按钮的时候, CKEditor 访问服务器的地址形如:

http://localhost:53927/Home/SelectImg?CKEditor=editor1&CKEditorFuncNum=1&langCode=zh-cn

同样是带 CKEditorFuncNum 的,通过这个 CKEditorFuncNum 可以方便服务器找出刚刚在上传选项卡上传的图片

点击 浏览服务器 按钮的时候,CKEditor 会以弹窗的形式弹出服务器返回的页面,服务器返回的页面可以参考下面的代码:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>选择文件</title>
</head>
<body>
    <div>
        <button onclick="returnFileUrl()">Select File</button>
    </div>
    <script>
        // Helper function to get parameters from the query string.
        function getUrlParam(paramName) {
            var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i');
            var match = window.location.search.match(reParam);

            return (match && match.length > 1) ? match[1] : null;
        }
        // Simulate user action of selecting a file to be returned to CKEditor.
        function returnFileUrl() {

            var funcNum = getUrlParam('CKEditorFuncNum');
            var fileUrl = '/path/to/img.jpg';
            window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);
            window.close();
        }
    </script>
</body>
</html>

其中 callFunction方法 可以把从服务器获取的图片 url 回填到 链接选项卡
这里写图片描述

### 回答1: CKEditor 4 是一个非常流行的富文本编辑器,它允许用户在网页上进行文本编辑,并支持上传文件。 要在 CKEditor 4 中实现文件上传功能,需要通过相关的插件来实现。以下是一个基本的步骤指南: 1. 首先,确保你正确地将 CKEditor 4 集成到你的网页中,详细的集成方法可以在官方文档中找到。 2. 为了实现文件上传功能,你需要一个文件上传插件。常用的插件有 "Upload Image" 和 "Upload File"。你可以在 CKEditor 官方网站的插件页面上找到这些插件,并按照指南进行下载和安装。 3. 安装完成后,需要在 CKEditor 的配置中启用相应的插件。可以通过配置文件或者 JavaScript 代码来进行配置。具体的配置方法可以在插件的文档中找到。 4. 配置插件后,你需要配置文件上传的目标路径。通常,服务器端会有一个接口来接收上传的文件并保存它们。在插件的配置中,你可以指定接口的 URL,并设置其他相关的配置参数,如文件类型限制、最大文件大小等。 5. 最后,通过设置 CKEditor 的 toolbar,将文件上传按钮添加到编辑器的工具栏中,以便用户能够使用该功能。 总结一下,要在 CKEditor 4 中实现文件上传功能,首先需要安装相应的文件上传插件,然后配置插件和服务器接口,并将上传按钮添加到编辑器的工具栏中。这样,用户就可以通过点击上传按钮,选择并上传文件到指定的服务器路径上了。 ### 回答2: CKEditor 4 是一种常用的富文本编辑器,用于在网页中编辑和排版文本。要实现在 CKEditor 4 中上传文件,可按照以下步骤进行操作: 1. 配置服务器端的文件上传功能:首先,需要在服务器上设置一个用于接收和处理文件上传的脚本。该脚本必须具备处理文件上传的功能,并将文件保存到服务器指定的目录中。 2. 配置前端页面中的上传按钮:在 CKEditor 4 的工具栏中,可以添加一个自定义的按钮,作为文件上传的入口。可以使用 CKEditor 提供的工具栏配置选项,选择合适的图标和按钮样式。 3. 编写 JavaScript 代码:在页面加载 CKEditor 4 时,需要编写一些 JavaScript 代码来处理上传按钮的点击事件。可以使用 CKEditor 提供的 API 方法来调用文件上传脚本,并指定文件上传后的回调函数。 4. 文件上传:当用户点击上传按钮时,会触发 JavaScript 代码中的上传事件。该事件会将用户选择的文件发送到服务器端的上传脚本进行处理。上传脚本会将文件保存到指定的目录,并返回一个文件的存储路径或唯一的文件标识符。 5. 在编辑器中插入文件链接:当上传脚本处理完文件上传后,可以通过 JavaScript 将文件的链接插入到 CKEditor 4 的编辑区域。可以使用 CKEditor 提供的 API 方法来实现这一功能。 需要注意的是,文件上传涉及到服务器端和客户端的交互,故需要一定的后端开发经验和前端技术知识。同时,还需要对文件的上传与安全性有一定的了解,以确保上传操作的安全和有效性。 ### 回答3: CKEditor是一个流行的富文本编辑器,可以用来方便地上传和编辑文本内容。要在CKEditor中实现文件上传功能,我们可以按照以下步骤进行操作。 首先,我们需要在HTML页面中引入CKEditor的相关文件,包括主要的编辑器代码、上传插件和相应的样式表。 其次,我们需要在页面中定义一个用于展示CKEditor的textarea元素,并为其指定一个id,以便之后的操作。 接下来,我们可以通过JavaScript代码来初始化CKEditor编辑器。通过CKEDITOR.replace()方法,我们可以将之前定义的textarea元素与CKEditor绑定起来,并指定一些编辑器的配置选项。 当CKEditor初始化完成后,我们可以在代码中添加一个上传文件的按钮,通过JavaScript代码为其添加点击事件处理函数。 在点击上传按钮时,我们可以调用CKEditor提供的文件上传方法。通过CKEDITOR.uploadUrl()方法,我们可以设置上传文件URL路径,以及回调函数来处理上传成功后的操作。 在上传文件成功后,我们可以通过回调函数来处理返回的数据。可以通过CKEditor提供的接口来获取上传文件URL,在编辑器中插入图片或链接等操作。 总的来说,要在CKEditor4中实现文件上传功能,我们需要引入相关的文件和插件,定义编辑器的相关设置,通过按钮和上传方法来触发文件上传操作,并在成功后进行相关操作。这样就可以实现在CKEditor中方便地上传文件了。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值