關於CKEditor4 5 6的使用，自定義toolbar配置，上傳圖片案例（SpringMVC+MyBatis案例），
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
關於CKEditor的一個配置整理，改檔案為config.js：
檔案內容如下：
| /** CKEDITOR.editorConfig = function( config ) { |
關於圖片上傳部分可以參考：
http://blog.csdn.net/itmyhome1990/article/details/17264627
實現過程中的一個案例
| /* * name :tuzuoquan * mail * date :2016/01/13 * version :1.0 * description:XXXXXX對應的js * CopyRight (C) 2015-12-31 */ if (CKEDITOR.env.ie && CKEDITOR.env.version < 9) CKEDITOR.tools.enableHtml5Elements(document);
/** * 編輯器對應的操作方法 * * 關於線上編輯器的文件：http://sdk.ckeditor.com/samples/resize.html */ var CKEDITORHandler = (function($) { return { /** * 初始化引數配置 */ ckeditorConfig:function(){ //去掉開始進來的時候自動新增 BR CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; //去掉開始進來的時候自動新增P CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P; CKEDITOR.config.font_names='微軟雅黑;宋體;新宋體;黑體;隸書;幼圓;楷體_GB2312;仿宋_GB2312;方正舒體;方正姚體;華文隸書;華文新魏;華文行楷;sans-serif;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;' CKEDITOR.config.line_height="1em;1.1em;1.2em;1.3em;1.4em;1.5em"; }, /** * 初始化工具條的相關資訊 */ initToolBar:function(){ CKEDITOR.config.toolbar = 'Full';
/** * 其中("-")為空間欄的水平分割，("/")為換行 * * 以下：Full表示的所有的操作 */ CKEDITOR.config.toolbar_Full = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, { name: 'forms', groups: [ 'forms' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, '/', { name: 'links', groups: [ 'links' ] }, { name: 'insert', groups: [ 'insert' ] }, { name: 'colors', groups: [ 'colors' ] }, { name: 'styles', groups: [ 'styles' ] }, { name: 'tools', groups: [ 'tools' ] }, { name: 'paragraph', groups: [ 'list', 'blocks', 'bidi', 'align', 'indent', 'paragraph' ] }, { name: 'others', groups: [ 'others' ] }, { name: 'about', groups: [ 'about' ] } ];
CKEDITOR.config.toolbar_Basic = [ ['Source','Preview'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','SpecialChar'], ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['lineheight'] ]; }, /** * 線上編輯器的初始化過程 * textContent :表示的是文字元件的內容 */ init:function(textContent){ //注意：這裡的tpl-content-editor是編輯器對應的id值 if(CKEDITOR.instances.tplContentEditor) { var editor = CKEDITOR.instances["tplContentEditor"];
//console.log("1------------------------------------------"); //console.log(editor.getData()); //editor.setData(editor.setData(textContent)); //console.log("2------------------------------------------");
//銷燬編輯器，然後新增一個 if(editor) editor.destroy(true); }
CKEDITORHandler.ckeditorConfig(); //初始化工具欄 CKEDITORHandler.initToolBar();
CKEDITOR.replace("tplContentEditor", { toolbar:'Basic', height:'300', width:'auto' });
//為編輯器設定內容 CKEDITOR.instances.tplContentEditor.setData(textContent); }, /** * 2、判斷一個字串變數是否為空 * 如果不為空：返回true * 如果為空:返回false */ isNotBlank:function(variable){
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
|