ueditor添加工具按钮。点击就在选中的内容下面加上重点符号的点点

首先参考https://blog.****.net/qq_33769914/article/details/84791955给ueditor添加一个加重点符号的按钮

然后参考 https://blog.****.net/qq_33769914/article/details/89566473 给一个class里面的文字都加点

然后修改ueditor.all.js里面写这个按钮的功能

UE.commands['dots'] = {
   execCommand : function( cmdName) {
       var me = this,
   range = me.selection.getRange();
//获取选中的内容
   var rangeContent=range.cloneContents().textContent;//选中的内容的文字信息
   var rangeContentLen=rangeContent.length;//选中内容的长度

range.deleteContents();//删除当前选区范围中的所有内容。因为下面我把选中内容处理了然后又添加到了原来的位置。所以这里选中的要删除了。不能把删除写在添加后面。因为添加以后range就变成了添加的和原来选中的了。

//下面就是把选中的内容切分成一个个的文字然后给他加个span标签

var arr = [];//把选中的值放在一个数组里
for (var i = 0; i < rangeContentLen; i++) {
arr.push(rangeContent.charAt(i));
}
var str = "";//给选中值每个文字都加上一个span标签
arr.forEach(function (item) {
item = "<span class='dots'>" + item + "</span>";
str += item;
})

//创建一个span标签把刚才切分的内容都包起来
var span= this.document.createElement("span")；
span.className="allDOTS";
span.innerHTML=str;

//把处理好的内容插入

range.insertNode(span);

}
},

ueditor添加工具按钮。点击就在选中的内容下面加上重点符号的点点

我这里的样式写在了外面的themes/iframe.css

因为我发现每次在页面添加一个编辑器他就时一个iframe的内容。你展开他的head看到他自己引入的样式在iframe这个文件里面。开始我一直想着在我自己的页面的style里面加但是可能是层次太深。在我的页面里加的样式根本不管用。

ueditor添加工具按钮。点击就在选中的内容下面加上重点符号的点点

我们在iframe.css加上样式

.allDOTS .dots{
position: relative;
}

.allDOTS .dots::before {
   content: '.';
   position: absolute;
   top: 6px;
   left: 4px;
}

还要注意在你自己的页面也要加上上面这个样式。否则在编辑器提交以后你获取的内容显示的时候就没有样式的。你这个iframe的样式只是在编辑器里面看的。到外面还是靠自己的样式。

然后就大功告成啦！！

我研究了好几天啊。搞死个人了

ueditor添加工具按钮。点击就在选中的内容下面加上重点符号的点点

相关推荐