自定义CKeditor上传图片按钮

背景：之前公司的项目中用的是KindEditor富文本编辑器，后来发现有上传漏洞，所以项目中用了CKeditor富文本编辑器。But 发现自带的上传图片按钮并不能将上传的图片保存到服务器上，So 下面就来说一说如何在CKeditor中自定义上传图片按钮。

CKeditor官网下载：https://ckeditor.com/ckeditor-4/download/
步骤：

1).下载后解压，将整个文件夹放在项目中，如下图：

2).打开config.js配置文件，修改原有的工具栏配置，将自带的上传图片按钮EasyImageUpload修改为自定义的按钮SimpleUpload（注意：大小写），然后注册自定义按钮，如下图：

3).在plugins文件下新建一个simpleupload文件夹，如下图：

4).在simpleupload文件夹下添加相关配置，如下图

5).plugin.js代码如下：

(function () {b = 'simpleupload';   //在config.js配置文件中写的注册自定义按钮名称CKEDITOR.plugins.add(b, {requires: ["dialog"],init: function (a) {a.addCommand(b, new CKEDITOR.dialogCommand(b));a.ui.addButton("SimpleUpload", {  //注意这里SimpleUpload是大写的，是在config.js中配置按钮名称label: "上传图片",  //鼠标放在按钮上时显示提示command: b,icon: this.path + "images/upload.png"   //自定义上传按钮图片，放在在simpleupload文件夹下的images文件夹中});CKEDITOR.dialog.add(b, this.path + "dialogs/simpleupload.js")   //添加上传图片配置脚本，放在simpleupload文件夹下dialogs文件夹中}})
})();

6).simpleupload.js代码如下：

(function () {CKEDITOR.dialog.add("simpleupload",function (a) {console.log(a);return {title: "上传图片",minWidth: 300,  //弹出框的最小宽度minHeight: 80,   //弹出框的最小高度contents: [{id: "tab1",label: "",title: "",expand: true,padding: 0,elements: [{type: "html",html: initImageDlgInnerHtml(a.name) //对话框中要显示的内容，a.name:表示的是当前编辑器的id，initImageDlgInnerHtml方法是调用页面上的js方法（注意：a.name是为了解决同一个页面上使用多个编辑器）}]}],onOk: function () {                initUploadImage();  //点击确定按钮调用页面上的js方法},onLoad: function () {//弹出框中默认的按钮为【确定】和【取消】，这里将【确定】按钮的文字为【上传】，鼠标悬停时显示也为上传$('.cke_dialog_ui_button_ok > .cke_dialog_ui_button').text('上传');$('.cke_dialog_ui_button_ok').attr('title', '上传');}}})
})();

7).在页面上的使用

➀.引用脚本：

<script src="@Url.Content("~/CKeditor/ckeditor.js")" type="text/javascript"></script>

➁.页面上使用：

<textarea id="Content" name="Content" style="height: 200px; width: 640px; "></textarea><script type="text/javascript">CKEDITOR.replace('Content', {height: 200,   //设置编辑器初始高度//removePlugins: "simpleupload"   //如果不需要上传图片按钮，加上这行代码即可});
</script>

➂.对话框显示的方法initImageDlgInnerHtml

//在弹出框中加入html（参数id：是simpleupload.js脚本传递过来的，用于上传图片成功后返回的图片插入到当前编辑器的id中，这里只有多个编辑器时才需用到）
var ckeditorId; //定义当前上传的图片的编辑器ID为全局变量
function initImageDlgInnerHtml(id) {ckeditorId = id;var content = '<a style="cursor:pointer;display:inline-block;padding: 4px;border: 1px solid #bcbcbc;background: #f8f8f8;" onclick="triggerFileEvent()">选择图片</a>&emsp;<span id="imgName"></span>';return content;
}

➃.上传成功后将将图片插入到编辑器中，如下图：

以上就是在CKeditor自定义上传图片按钮

自定义CKeditor上传图片按钮相关推荐

ckeditor上传图片文件，研究了一天，终于...
ckeditors是一款非常好的工具,但是就是上传文件太遗憾了.找了很多关于ckeditor上传图片的例子,就是没有一个完整的demo. 今天终于弄出来了,供大家分享,这里就不写代码了,直接上传例子. ...
swiper切换按钮位置改变_swiper插件自定义切换箭头按钮
不知道大家在使用swiper时有没有遇到这样一种需求,swiper插件自定义切换箭头按钮,话不多说,直接上gif. 也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式. 给swiper容器再加 ...
iOS自定义的UISwitch按钮
2019独角兽企业重金招聘Python工程师标准>>> 因为项目需要在UISwitch按钮上写文字,系统自带的UISwitch是这样的: 既不能写字,也不能改颜色,于是在网上找到了这 ...
flex中自定义皮肤的按钮制作
今天聊一下FLEX中自定义皮肤的按钮的制作.首先这是一个按钮皮肤文件: <?xml version="1.0" encoding="utf-8"?> ...
java 自定义形状按钮_制作自定义背景Button按钮、自定义形状Button的全攻略
在Android开发应用中,默认的Button是由系统渲染和管理大小的.而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的.因此,我们在开发产品的时候,需要对默认按钮进行美化.在本篇里,笔者结 ...
WPF自定义开关切换按钮
WPF自定义开关切换按钮突发奇想先要自己写一个开关按钮,说干就开干了,以下为View视图布局代码,开关按钮的样式就直接在这里定义了,主要呢通过定义触发器来完成按钮的切换. ```csharp < ...
php用ckeditor无法上传大图片,php ckeditor上传图片文件大小限制修改
php ckeditor上传图片文件大小限制修改ckeditor编辑器在上传图片或文件时是没有大小限制的,下面我们来给大家介绍两种ckeditor上传图片文件大小限制问题解决办法. 一种可以通过修改P ...
antd走马灯组件自定义前进后退按钮
antd走马灯组件自定义前进后退按钮[ts + react] antd的Carousel没有提供前进后退按钮需要自己根据文档实现此功能官方提供了next 和prev两个方法 next() 切换到下 ...
php实现新浪微博分享功能,自定义新浪微博分享按钮样式
新浪开放平台虽然有分享按钮的组件(http://open.weibo.com/sharebutton)并且提供了两种格式的应用方法:WBML和JS,但还是无法据自己的需求做到自定义样式. 为了解决该问 ...

自定义CKeditor上传图片按钮

自定义CKeditor上传图片按钮相关推荐

最新文章

热门文章