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( '<img style="width: 100%;" src="'+ ACCESS_SERVER_URL + data.response[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代码

<!doctype 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"><!-- <h1>Hello world!</h1><p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p> --></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';
};

插件最终效果:

CKEditor 简单图片上传插件开发和详细步骤相关推荐

ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
使用struts2完成ckeditor和图片上传
代码地址如下: http://www.demodashi.com/demo/12427.html 使用struts2完成ckeditor和ckeditor图片上传 ckeditor版本ckeditor ...
xshell往linux传文件,Xshell向Linux服务器上传文件的详细步骤
相信Linux用户对Xshell远程管理软件都不陌生的,不过对于一些新手朋友来讲,向Linux服务器上传文件可能还存在难度,这里小编就分享了Xshell向Linux服务器上传文件的详细步骤,下面一起来 ...
asp.net core集成CKEditor实现图片上传功能
背景本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,具体内容如下. 准备工作 1.visual studio 2019 开发环境 2. ...
ckeditor ——在图片上传中上传其他文件（word等）
最近项目中遇到需要用富文本编辑文档,最终以公告的形式在内网中展示,其中一个简单的要求就是要有附件.因为知道ckeditor是有图片的上传了,于是想是不是也可以上传如word,pdf等附件呢.这样内网展 ...
CKEditor实现图片上传以及预览
前言 CKEditor其实不需要多介绍,最早之前叫FCKEditor,后面改名了,其实就是一个富文本编辑器. The best web text editor for everyone 上面是官网首页 ...
CKEditor实现图片上传
本人用的 CKEditor版本为4.3 CKEditor 配置和部署参考CKEditor4.x部署和配置. CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮并且预览中有一 ...
.net MVC 简单图片上传
主要完成的是在网页上上传一张图片到服务器我搜出来的上传文件代码都特别复杂,对于初学者来说,先解决能上传的问题才最重要,并不需要特别多的功能,仅适合不会上传的初学者,大神请绕路,错误请指出,谢谢 v ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...

CKEditor 简单图片上传插件开发和详细步骤

CKEditor 简单图片上传插件开发和详细步骤相关推荐

最新文章

热门文章