Hot For Coding

给Ckeditor添加一个插入code标签的按钮

Ckeditor是一个非常受欢迎的JavaScript编辑器,问世至今走了十年,依然还是市场老大,经得起时间考验就是好程序。

因为经常写一些技术博文,可能有些地方需要插入code标签,而默认Ckeditor不具备插入code标签功能,但它提供的拓展灵活程度让我感觉这就是那么容易。

下载程序

下载地址:http://ckeditor.com/

创建插件目录

目录plugins就是Ckeditor插件目录,所有的插件都集合在里边,在里边创建一个code目录,作为插入code标签功能的插件目录。

编写插件程序

Ckditor插件的规则是在插件目录下创建一个plugin.js文件作为插件主程序处理文件,如果是复杂的插件可能会有N个js文件。

因为插入code标签这个功能非常简单,所以一个plugin.js就能搞定。

plugin.js

// 添加一个插件
CKEDITOR.plugins.add('code', {
 
  // 插件初始化
  init: function (editor) {
    // 添加code按钮
    editor.ui.addButton('code', {

      // 鼠标移到按钮提示文字
      label: 'code',

      // 命令
      command: 'code',

      // 图标(相对于插件本身目录下)
      icon: this.path + 'images/code.gif'

    });
  }
});

制作按钮图标

可以使用一些简单的作图工具制作就好,我随便使用Fireworks做了一个,图标文件名与路径要对应你在plugin.js中设置好的,因为我在plugin.js中定义的图标位置是在images目录下的code.gif图标,所以把code.gif图片放到插件目录的images目录下

修改config.js配置文件

config.js

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */
 
CKEDITOR.editorConfig = function( config ) {
  // Define changes to default configuration here. For example:
  // config.language = 'fr';
  // config.uiColor = '#AADC6E';
    
  // 这句代码是添加的
  config.extraPlugins += (config.extraPlugins ? ',code' : 'code');
};

测试

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
    <script src="ckeditor/ckeditor.js"></script>
  </body>
</html>

效果

full

添加点击事件

打开之前创建plugin.js文件,添加click事件,最终代码如下:

plugin.js

// 添加一个插件
CKEDITOR.plugins.add('code', {
 
  // 插件初始化
  init: function (editor) {
  
    // 添加code按钮
    editor.ui.addButton('code', {

      // 鼠标移到按钮提示文字
      label: 'code',

      // 命令
      command: 'code',

      // 图标(相对于插件本身目录下)
      icon: this.path + 'images/code.gif',

      // 添加点击事件   
      click:function(){
          
        // 获取选取的文本
        var selectText = editor.getSelection().getSelectedText();

        // 判断选取的文本是否为空
        // 如果为空就啥都不干
        if (selectText !== ""){

          // 判断你是要干嘛?
          // 你是要添加code标签呢?
          // 还是你要取消code标签?
          if (editor.getSelection().getStartElement().getName() !== "code") {
              
            // 添加code标签
            var insertHtml = "<code>" + selectText + "</code>";
            editor.insertHtml(insertHtml);
          } else {
            // 取消code标签
            editor.insertText(selectText);      
          }
        }
      }
    });
  }
});

重新运行浏览器,随便输入一行字,选中几个,点击code按钮,亲,这下可以了吧!

full

code标签样式

虽然,按钮功能可以用了,但还有点郁闷,就是code标签的文本跟其它标签的文本看起来没差别,看不出来哪些已经添加code标签

full

我们给code标签添加几个样式,让它与众不同。打开ckeditor目录下的contents.css

contents.css结尾添加

code {
  border:1px solid #ffe4c4;
  color:#ff7f50;
  border-radius:2px;
  padding:0 2px;
  margin:0 2px;
}

保存,重新运行看下效果!

full

如果需要取消code标签的文字只需要选择已被添加code标签的文字,再点击code按钮就好!

分享

TITLE: 给Ckeditor添加一个插入code标签的按钮

LINK: https://www.qttc.net/369-ckeditor-custom.html

NOTE: 原创内容,转载请注明出自琼台博客