ueditor给选中的内容加样式。加波浪线啊

最新推荐文章于 2023-09-14 17:53:16 发布

肖肖肖丽珠

最新推荐文章于 2023-09-14 17:53:16 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：编辑器ueditor踩坑

本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/89556028

该博客介绍了如何自定义ueditor工具栏，添加名为waveline的按钮，为选中的文本内容添加波浪线样式。通过在ueditor.all.js中定义UE.commands['waveline']，并在execCommand中使用applyInlineStyle方法，将选中文本包裹在span标签内并设置相应的class和style属性，实现背景图片重复显示的波浪线效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我这里又自定义了一个工具栏。名字是waveline。

具体添加方式参考https://blog.youkuaiyun.com/qq_33769914/article/details/84791955

在ueditor.all.js里面添加下面的代码。代表这个按钮的操作功能

UE.commands['waveline'] = {
   execCommand : function( cmdName) {
       var me = this,
       range = me.selection.getRange();
         range.applyInlineStyle("span",{"class":"WAVELINE","style":"background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E\") repeat-x 0 100%; background-size: 20px auto;"});
   }
},

重点就是这个applyInline