关于Ckeditor编辑器（三）

ckeditor 编辑器首行缩进

最近不知道是不是犯水逆呀，万恶的产品需求就和这个编辑器干上了。
编辑器原有的增加/减少缩进量是整段缩进，不符合需求！！！
关于Ckeditor编辑器（三）
然后就去网上看了各种关于ckeditor的问题，
最后发现ckeditor编辑器的这个功能是有单独的插件的，只不过要在下载的时候预先build
a.在ckeditor官网进入Add-ons
https://ckeditor.com/cke4/addons/plugins/all
搜索Paragraph Indentation
然后builder进自己的ckeditor后再下载
b.下载之后将lang目录下的lang/zh-cn.js文件，查找字符串“textindent”，将“Insert first line indentation”改为“首行缩进”即可。

是不是很简单？但是这种只适合在用编辑器之前就知道有这种需求的呀！！想我们这种经历和n个前辈的项目，谁知道编辑器是改了多少遍的呢！！
只能寻找第二种方法
自定义的插件
a.在原本的config.js中增加自定义插件
1.在文件里加入一个名叫textindent的插件

config.extraPlugins = 'textindent';

2.在plugins目录下新建textindent文件夹
其中 icons目录为改插件的图标
plugins.js为相关代码
关于Ckeditor编辑器（三）
c.编写plugins.js
(可以直接从第一种方法下载的ckeditor.js中将这一部分拷贝过来)

/*
 * @file Video plugin for CKEditor
 * Copyright (C) 2011 Alfonso Martínez de Lizarrondo
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 */

( function() {

	 CKEDITOR.plugins.add("textindent", {
	        icons: "textindent",
	        availableLangs: {
	            "pt-br": 1,
	            en: 1
	        },
	        lang: "pt-br, en",
	        init: function(a) {
	            var e = a.config.indentation,
	            c = a.config.indentationKey;
	            "undefined" == typeof e && (e = "2em");
	            "undefined" == typeof c && (c = "tab");
	            a.ui.addButton && a.ui.addButton("textindent", {
	                label: a.lang.textindent.labelName,
	                command: "ident-paragraph"
	            });
	            if (!1 !== c) a.on("key",
	            function(d) {
	                if (d.data.domEvent.$.key.toLowerCase() === c.toLowerCase().trim() || d.data.keyCode === c) a.execCommand("ident-paragraph"),
	                d.cancel()
	            });
	            a.on("selectionChange",
	            function() { (new CKEDITOR.style({
	                    element: "p",
	                    styles: {
	                        "text-indent": e
	                    },
	                    overrides: [{
	                        element: "text-indent",
	                        attributes: {
	                            size: "0"
	                        }
	                    }]
	                })).checkActive(a.elementPath(), a) ? a.getCommand("ident-paragraph").setState(CKEDITOR.TRISTATE_ON) : a.getCommand("ident-paragraph").setState(CKEDITOR.TRISTATE_OFF)
	            });
	            a.addCommand("ident-paragraph", {
	                allowedContent: "p{text-indent}",
	                requiredContent: "p",
	                exec: function(d) {
	                    d = a.getSelection().getRanges()[0];
	                    d = new CKEDITOR.dom.walker(d);
	                    for (var b, c = a.getCommand("ident-paragraph").state; b = d.next();) b.type == CKEDITOR.NODE_ELEMENT && "p" === b.getName() && (a.fire("saveSnapshot"), c == CKEDITOR.TRISTATE_ON ? (b.removeStyle("text-indent"), a.getCommand("ident-paragraph").setState(CKEDITOR.TRISTATE_OFF)) : (b.setStyle("text-indent", e), a.getCommand("ident-paragraph").setState(CKEDITOR.TRISTATE_ON)));
	                    null === b && (b = a.getSelection().getStartElement().getAscendant("p", !0), a.fire("saveSnapshot"), c == CKEDITOR.TRISTATE_ON ? (b.removeStyle("text-indent"), a.getCommand("ident-paragraph").setState(CKEDITOR.TRISTATE_OFF)) : (b.setStyle("text-indent", e), a.getCommand("ident-paragraph").setState(CKEDITOR.TRISTATE_ON)))
	                }
	            })
	        }
	    });

})();

最终实现效果
关于Ckeditor编辑器（三）

关于Ckeditor编辑器（三）

ckeditor 编辑器首行缩进

相关推荐