关于怎么安装和引入的不多说了，这篇笔记主要记的是关于自定按钮
其实部分代码就是ckeditor上的代码，但是官方定义的插入图片需要上传到服务器，但是目前的需求不需要上传上去。
我就想直接把图片转成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()来调用；
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
return {
// 自定义窗口的标题
title: 'Abbreviation Properties',
// 最小宽度
minWidth: 400,
// 最大高度
minHeight: 200,
// 自定义窗口的内容，contents为数组，页面上渲染为tab页
contents: [
// 第一个tab页
{
id: 'tab-basic',
// tab页的标题
label: 'Basic Settings',
elements: [
// UI elements of the first tab will be defined here.
{
// 这里是一个input框，type为'text'类型
type: 'text',
id: 'abbr1',
// input的标题
label: 'Abbreviation',
// 验证
validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." )
},
{ // 同上
type: 'text',
id: 'title',
label: 'Explanation',
validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty." )
}
]
},
// 第二个tab页,大致上的配置跟上面的一样
{
id: 'tab-adv',
label: 'Advanced Settings',
elements: [
// UI elements of the second tab will be defined here.
{
type: 'text',
id: 'id',
label: 'Id'
}
]
}
]
};
});效果图：
以上就是官方的代码和效果图，本以为这样配置稍微写些代码也能达到我的目的，可是我实在是太天真了……
下面是修改过的代码
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: ''
+ ''
+ ''
+ '',
// 那要怎么拿到自定义窗口的元素呢？在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.resul;
// 我没有想到好的办法将数据传递到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 );
},
};
});这样就可以实现我想要的效果了
放上自定义窗口的图片