CKEditor 简单图片上传插件开发和详细步骤
CKEditor插件使用方法就不在这里赘述了，这里只讲CKEditor的插件开发，下面是官方开发的指南的地址
官方插件开发指南
CKEditor插件目录
- ckeditor 根目录/
- plugins/
- pluginName 与插件名对应的文件夹/
- icons 插件图标文件夹/
- pluginIcon.png
- dialog 如果插件有弹出框则需要/
- plugin.js 插件脚本/本次开发的插件没有弹出框 （dialog），所以没有dialog文件夹。
目录结构如下:
第一步(开发插件目录下的plugin.js)
需要用到的几个方法和类
1.CKEDITOR.plugins.add()
方法定义如下，需要两个参数
- 第一个参数是字符串，插件名字
- 第二个参数需要定义一个 CKEDITOR.pluginDefinition 函数对象
2.CKEDITOR.pluginDefinition对象
该对象下有四个方法分别是：
- afterInit(editor) 初始化页面之后调用
- beforeInit(editor) 初始化页面之前调用
- init(editor) 初始化页面调用
- onLoad(editor) 页面载入完成时调用
官方描述如下:
3.editor.ui.addButton()
方法描述：添加新的按钮到按钮列表
该方法接收两个参数：
- 按钮名字，接收字符串
- 按钮属性定义对象，常用的有
- label 按钮提示和按钮显示的文字（如果可见的话）
- command 当按钮被点击的时候执行的命令名字，类似onClick()方法中的执行函数名。
- icon 按钮图标图片路径
官方描述如下:
4.editor.addCommand()
方法描述：添加一个命令到editor实例，该命令添加之后可以使用execCommand()执行。
该方法接收两个参数：
- 命令名，接收字符串，上面addButton中的命令名于此处对应
- 命令定义对象 (commandDefinition) ，详细如下 5
官方描述如下：
5.CKEDITOR.commandDefinition
该对象包含两个方法：
- exec 命令被调用时执行此函数
- refresh 通过命令定义定义的函数来确定的命令状态，当编辑器有它改变了状态或选择它会被调用。
官方描述如下：
上面讲解了需要用到的方法和对象
下面直接上代码
plugin.js代码
/**
* 添加自定义图片上传组件
*/
CKEDITOR.plugins.add('MultipleImageUpload',{//调用add方法添加插件
init : function (editor) { //初始化页面时调用方法，接收一个富文本对象实例
var pluginName = 'MultipleImageUpload'; //插件名
var _file = document.getElementById('editFileInput'); //获取页面中的file文件选择器对象
/**
* 添加执行命令
*/
editor.addCommand('openFileComm', {//添加命令
exec : function (editor) {//命令调用时执行此函数
_file.click(); //触发文件选择器的点击事件
_file.onchange = function(){//为文件选择器独享绑定onchange方法
console.log("_file is changed");
upload();//执行函数
function upload(){
var file = new FormData($("#editorImageForm")[0]);//获取文件表单中的文件对象
$.ajax({ //使用ajax请求上传图片
url : FILE_UPLOAD_URL + FILE_UPLOAD_URI,
type : 'POST',
data : file,
async : false,
cache : false,
contentType : false,
processData : false,
success : function(data) {
var element = CKEDITOR.dom.element.createFromHtml( '
1] +'" border="0" />' );//上传成功后添加上传完成的图片元素到富文本内容中
editor.insertElement( element );//插入元素
},
error : function() {
alert("图片上传失败！");
}
});
}
};
},
async : true
});
editor.ui.addButton && editor.ui.addButton(pluginName, { //添加一个上传图片的按钮
label: '多图片上传',//按钮提示名
command: 'openFileComm',//当按钮被点击时执行上面定义好的命令
/**
* 添加自定义按钮图片
*/
icon: this.path + 'images/hello_icon.png'
});
},
/*onLoad : function(){
alert('onload');
console.log(this);
}*/
});HTML代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="../ckeditor/ckeditor.js">script>
<script src="../js/jquery-easyui-1.3.5/jquery-1.12.0.js">script>
<script src="../js/general_query.js">script>
<script src="../ckeditor/samples/js/sample.js">script>
<script src="../js/background-module/editorPage.js">script>
<link rel="stylesheet" href="../ckeditor/samples/css/samples.css" />
<link rel="stylesheet" href="../ckeditor/samples/toolbarconfigurator/lib/codemirror/neo.css" />
<title>富文本编辑器title>
head>
<body>
<main>
<div id="editor">
div>
<div>
<form id="editorImageForm" enctype="multipart/form-data" method="post"
style="display: none">
<div>
<input type="file" id="editFileInput" name="file"
accept=".gif,.png,.jpg,.jpeg" /><br>
div>
form>
div>
main>
<button id='putContentBtn' type="button" style="height: 2.1rem;">保存编辑内容button>
body>
<script>
$(function(){
/*EditorPage.initPage();*/
initSample();//页面载入调用方法初始化富文本编辑器
});
script>
html>
最后将开发好的按钮添加到toolbar中
修改根目录下的config.js
/**
* @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbar = [
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Scayt' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'document', items: [ 'Source' ] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'about', items: [ 'About' ] },
'/',
{ name: 'imageUpload', items: ['MultipleImageUpload'] }//定义好的按钮，添加到工具栏
/*,
'/',
{ name: 'extent', items:[ 'HelloWorld' ] }*/
];
config.extraPlugins += (config.extraPlugins ? ',MultipleImageUpload' : 'MultipleImageUpload');//定义好的按钮，添加到工具栏
/*config.extraPlugins += (config.extraPlugins ? ',HelloWorld' : 'HelloWorld');*/
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
//
config.allowedContent = true;
/*config.width = '600px';*/
config.height = '350px';
};
插件最终效果:
