900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > KindEditor 编辑器 一键排版自定义添加样式

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

时间:2018-12-16 04:21:47

相关推荐

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');//字体大小 16pxchild.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文件

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。