关于CKEditor4 5 6的使用,自定义toolbar配置,上传图片案例(SpringMVC+MyBatis案例),

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               


关于CKEditor的一个配置整理,改文件为config.js

关于CKEditor4 5 6的使用,自定义toolbar配置,上传图片案例(SpringMVC+MyBatis案例),_第1张图片

文件内容如下:

 
 

/**
 * @license Copyright (c) 2003-2016, 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 example:
 // config.language = 'fr';
 // config.uiColor = '#AADC6E';
 config.toolbarGroups = [
  { 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' ] }
 ];
 // config.removeButtons = 'Source,Save,Templates,Cut,Undo,Find,Scayt,SelectAll,Paste,Copy,Redo,NewPage,Preview,Print,Form,Bold,RemoveFormat,Link,Image,TextColor,Outdent,JustifyLeft,BidiLtr,Blockquote,NumberedList,UIColor,lineheight';
 config.line_height ='8px;9px;10px;11px;12px;13px;14px;15px;16px;17px;18px;19px;20px;21px;22px;23px;24px;25px;26px;27px;28px;29px;30px;31px;32px;33px;34px;35px;36px;37px;38px;39px;40px;41px;42px;43px;44px;45px;46px;47px;48px;49px;50px;51px;52px;53px;54px;55px;56px;57px;58px;59px;60px;61px;62px;63px;64px;65px;66px;67px;68px;69px;70px;71px;72px;';
 config.skin = 'office2013';
 config.extraPlugins='imagepaste';
 config.pasteFromWordRemoveFontStyles = false;
 config.pasteFromWordRemoveStyles = false;
 config.extraPlugins = 'uploadwidget';
 config.extraPlugins = 'notificationaggregator';
 config.extraPlugins = 'notification';
 config.extraPlugins = 'uploadimage';
 config.extraPlugins = 'toolbar';
 config.extraPlugins = 'button';
 config.extraPlugins = 'filetools';
 config.extraPlugins = 'clipboard';
 config.extraPlugins = 'dialog';
 config.extraPlugins = 'dialogui';
 config.extraPlugins = 'widget';
 config.extraPlugins = 'lineutils';
 config.extraPlugins = 'widget';
 config.SecureImageUploads = true;
 config.image_previewText=' '; //预览区域显示内容
 //config.filebrowserUploadUrl: "import/ckeditorUploadFile.action";
 config.filebrowserImageUploadUrl = basePath + "/import/ckeditorUploadFile.action?type=Image"; //待会要上传的action或servlet
 
};

 

 

关于图片上传部分可以参考:

http://blog.csdn.net/itmyhome1990/article/details/17264627

 

实现过程中的一个案例

 
 

/*

 

 * name        :tuzuoquan

 

 * mail        :[email protected]

 

 * 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

这里写图片描述

你可能感兴趣的:(关于CKEditor4 5 6的使用,自定义toolbar配置,上传图片案例(SpringMVC+MyBatis案例),)