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

KindEditor 自定义一键排版样式实现
在更换编辑器并需要一键排版功能时,作者通过修改kindeditor-all-min.js或kindeditor-all.js文件中的'quickformat'方法,实现了自定义样式。尽管网上的解决方案并未奏效,但经过探索,找到了将样式直接添加到内容两侧的方法,有效解决了问题。如果想要恢复默认样式,可以参考plugin文件夹下的quickformat JS文件。
部署运行你感兴趣的模型镜像

因为更换了编辑器,加上对一键排版的要求,我上网搜了一下,但是网上都是无用解答,对于我这样的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文件

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

您可能感兴趣的与本文相关的镜像

Kotaemon

Kotaemon

AI应用

Kotaemon 是由Cinnamon 开发的开源项目,是一个RAG UI页面,主要面向DocQA的终端用户和构建自己RAG pipeline

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值