因为更换了编辑器,加上对一键排版的要求,我上网搜了一下,但是网上都是无用解答,对于我这样的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| | )+/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文件
有什么更好的方法,也请一起分享。谢谢
KindEditor 自定义一键排版样式实现
在更换编辑器并需要一键排版功能时,作者通过修改kindeditor-all-min.js或kindeditor-all.js文件中的'quickformat'方法,实现了自定义样式。尽管网上的解决方案并未奏效,但经过探索,找到了将样式直接添加到内容两侧的方法,有效解决了问题。如果想要恢复默认样式,可以参考plugin文件夹下的quickformat JS文件。
3020

被折叠的 条评论
为什么被折叠?



