KindEditor 编辑器,一键排版自定义添加样式

因为更换了编辑器,加上对一键排版的要求,我上网搜了一下,但是网上都是无用解答,对于我这样的JQuery小白,真的是弄了很久。但是回过来看真的简单。希望也能帮助到大家。

修改文件

引用kindeditor-all-min.js 就修改 kindeditor-all-min.js
我是直接引用 kindeditor-all.js,则修改kindeditor-all.js
直接快速搜索 关键词 quickformat
找到 KindEditor.plugin(‘quickformat’, function (K) {}方法
修改其中的代码
注意:其他方法说修改 plugin文件夹下的quickformat的JS文件中,

 K.each(nodeList, function (i, subList) {
            var wrapper = K('<p style="text-indent:2em;"></p>', doc);
            subList[0].before(wrapper);
            K.each(subList, function (i, knode) {
                wrapper.append(knode);
            });
        });

其中(下图),并没起作用

K('<p style="text-indent:2em;"></p>', doc);

于是我只得自己探索了,终于在我拖拖拉拉的寻找中,找到了这个方法

可行方法,具体代码如下

var index = 0;
 while (child) {
            next = child.next();
            index += 1;
            var firstChild = getFirstChild(child);
            if (!firstChild || firstChild.name != 'img') {
                if (blockMap[child.name]) {
                    child.html(child.html().replace(/^(\s|&nbsp;| )+/ig, ''));
                    //首行缩进
                    child.css('text-indent', '2em');
                    //字体大小 16px
                    child.css('font-size', '16px');
                    //字体样式 微软雅黑
                    child.css('font-family', 'Microsoft YaHei');
                    //两端对齐
                    child.css('text-align', 'justify');
                    //整个文章首行加粗
                    if (index == 1) {
                        child.html("<strong>" + child.html() + "</strong>");
                    }
                    //行距2倍
                    child.html("<span style=\"line-height:2;\">" + child.html() + "</span>");
                    
                } else {
                    subList.push(child);
                }
                if (!next || (blockMap[next.name] || blockMap[child.name] && !blockMap[next.name])) {
                    if (subList.length > 0) {
                        nodeList.push(subList);
                    }
                    subList = [];
                }
               
            }
            child = next;
        }

以上利用child.css添加的样式,是会添加到p的style中
由于行距的样式 放在span中才起作用,因此需要直接加到内容的两侧
加粗的样式 也是标签在起作用,因此也是直接加到内容的两侧

如果你想恢复到默认样子,可以对照plugin文件夹下的quickformat的JS文件

有什么更好的方法,也请一起分享。谢谢

没有更多推荐了,返回首页