zh前端时间需要用到富文本编辑器,经理推荐了这个ckeditor,开发过程中有上传图片的功能,由于业务需要,我们不存图片路径,只好把图片转成base64当成标签存到数据库,编辑器自带的上传图片功能都是存储路径的(也有可能是学艺不精)我们需要转成base64.只好自定义一个上传图片的功能。
在ckeidtor的目录下有个plugins文件夹,我们要做的就在这个文件夹里
在plugins下新建一个文件夹,名称为abbr,进入abbr文件夹再新建一个dialog文件夹用来放自定义的窗口。
abbr文件夹下新建一个plugin.js文件,dialog文件夹新建一个mydialog.js文件。
plugin.js文件代码
CKEDITOR.plugins.add( 'abbr', {
icons: 'abbr',
init: function( editor ) {
// Plugin logic goes here...
// 给自定义插件注册一个调用命令
editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
editor.ui.addButton( 'Abbr', {
// label为鼠标悬停时展示的字
label: 'Insert Abbreviation',
// the command to be executed once the button is activated. This is the command we created in the previous step.
command: 'abbr',
// 将插件放在哪一组tollbar, 像我这样写的话,将放在'insert'组的第一个,懂了吗?后面的数字是这个数据的下标
toolbar: 'insert,0'
});
// 加载自定义窗口,'abbrDialog'跟上面调用命令的'abbrDialog'一致;
CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/mydialog.js' );
}
});
mydialog.js
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
return {
title: 'Abbreviation Properties',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'Upload',
label: 'Upload test',
elements: [
// 我这里需要一个tab页面,所以elements数组只有一个对象
{
// type为html表示html代码
type: 'html',
// 接下来html属性就可以直接写html代码了
html: '<div>'
+ '<label for="fileuploadtest">选择图片</label>'
+ '<input type="file" name="fileuploadtest" id="fileuploadtest">'
+ '</div>',
// 那要怎么拿到自定义窗口的元素呢?在ckeditor自带的自定义窗口里并不容易拿到,这时候我们得用到onLoad函数了
onLoad: function () {
// 在自定义窗口展示的时候会触发这条函数;而我们就能在这条函数里写我们的代码了;
var ele = document.getElementById('fileuploadtest');
// 给id为'fileuploadtest'的input绑定change事件
ele.addEventListener('change', function() {
// 当用户没选或者点取消的时候直接return
if (this.files.length == 0) return;
var imageData = this.files[0];
// 检测后缀名
var lastIndex = imageData.name.lastIndexOf('.');
var imageSuffix = imageData.name.substring(lastIndex + 1);
// 判断后缀名
if (!(imageSuffix == 'png' || imageSuffix == 'jpg' || imageSuffix == 'jpeg')) {
alert('图片格式只支持"png, jpg, jpeg格式"');
return
}
// 大小不能超过1m
if (imageData.size > 1*1024*1024) {
alert('图片大小不能超过1M');
return
}
// 使用FileReader接口读取图片
var reader = new FileReader();
reader.addEventListener('load', function () {
var imageBase64 = reader.result;
// 我没有想到好的办法将数据传递到onOk函数那里去,只好将图片数据保存在sessionstorage里面
// 有好的办法希望各位大神能提供下
sessionStorage.setItem('image', imageBase64)
})
// 将图片转成base64格式
reader.readAsDataURL(imageData)
debugger;
})
}
}
]
}
],
onOk: function() {
// this这里就是自定窗口了,ckeditor内部封装好了。
var dialog = this;
// 创建img标签
var image = editor.document.createElement( 'img' );
// 给img标签设置class类
image.setAttribute( 'class', 'insert-image');
var imageData = sessionStorage.getItem('image');
// 将图片数据赋予img标签
image.setAttribute('src',imageData);
// 利用ckeditor提供的接口将标签插入到富文本框中
editor.insertElement( image );
},
};
});
这样就没有问题了。点击自定义的按钮
根据顺序是没有问题的,可以实现。
然后我们还需要给这个自定义按钮,设置一个图标
在自定义的plugin.js下创建一个icons的目录,然后把你需要的图标放进去就可以了
这里指定一下
然后取值的时候是这样
你页面是先需要引入ckeditor插件的,这是必须的
ckArea是文本域的name或Id
取值方法,var titleContent = editor.getData();