【wangeditor富文本编辑器v4版自定义功能】格式刷

注：本人只处理了选择单行的情况。

使用方法：1.先选择想要的样式所在的文字。2.点击启动格式刷。3.选中想要复制给的文字

前端菜鸡，烂代码勿喷QAQ

完整代码：

      const { BtnMenu } = wangEditor;//配置格式刷class format extends BtnMenu {constructor(editors) {const $elem = wangEditor.$(`<div class="w-e-menu format-menu" data-title="格式刷"></div>`);super($elem, editors);}for_style(domE) {let arr = {};for (let i = 0; i < domE.length; i++) {arr[domE[i]] = domE[domE[i]];}//console.log("循环获取样式", arr);return arr;}font_style(domE) {let arr = [];let color = domE.getAttribute("color");let size = domE.getAttribute("size");let face = domE.getAttribute("face");if (color != null) {arr.push(`color='${color}'`);}if (size != null) {arr.push(`size='${size}'`);}if (face != null) {arr.push(`face='${face}'`);}return arr;}string_style(val) {let arr = "";for (const key in val) {if (val.hasOwnProperty(key)) {const element = val[key];arr += `${key}:${element};`;}}return arr;}clickHandler(e, type) {//console.log(this.$elem);//console.log("格式刷被点击");//获取editor全局编辑对象const editor = this.editor;// 判断当前格式刷是否已经被激活// 如果是激活状态：关闭格式刷if (this.formatShow) {this.formatShow = false;editor._brush = false;// editor._dblBrush = false;this.$elem.removeClass("format-active");editor.$textContainerElem.removeClass("brush");//console.log("关闭格式刷");return;}// 如果当前状态是未激活// 将格式刷改成激活状态this.formatShow = true;editor._brush = true;// this.$elem.addClass('w-e-active')// 如果是双击格式刷触发连续使用格式刷// 记录双击格式刷状态// editor._dblBrush = type === "dblclick" ? true : false;this.$elem.addClass("format-active");editor.$textContainerElem.addClass("brush");//获取选中对象let containerEle = editor.selection.getSelectionContainerElem();editor._html = [];if (containerEle.elems[0].tagName.toLowerCase() == "font") {//console.log("有font");editor._html.push({html: containerEle.elems[0].tagName.toLowerCase(),style: this.font_style(containerEle.elems[0]),});} else {editor._html.push({html: containerEle.elems[0].tagName.toLowerCase(),style: this.string_style(this.for_style(containerEle.elems[0].style)),});}//向上整合style//如果是顶级p标签name将style放在wrap里面，否则直接整合进stylewhile (!containerEle.equal(editor.$textElem)) {containerEle = containerEle.parent();//console.log("循环中", containerEle);if (containerEle.parent().equal(editor.$textElem) &&!containerEle.equal(editor.$textElem)) {editor._html.push({html: containerEle.elems[0].tagName.toLowerCase(),style: this.string_style(this.for_style(containerEle.elems[0].style)),});}if (!containerEle.parent().equal(editor.$textElem) &&!containerEle.equal(editor.$textElem)) {//console.log("非顶点");if (containerEle.elems[0].tagName.toLowerCase() == "font") {//console.log("有font");editor._html.push({html: containerEle.elems[0].tagName.toLowerCase(),style: this.font_style(containerEle.elems[0]),});} else {editor._html.push({html: containerEle.elems[0].tagName.toLowerCase(),style: this.string_style(this.for_style(containerEle.elems[0].style)),});}}}// editor._html = [];// editor._html.push(containerEle.elems[0].tagName.toLowerCase());//console.log(editor);editor.$textElem.on("mouseup", (e) => {//  //console.log("监听可编辑区域", e);//  //console.log("当前选区", editor.saveSelection());editor.$textElem.off("mouseleave", editor.selection.saveRange());if (editor._brush) {let text;let style = "";let wrapStyle = "";//console.log("选区是否为空", editor.selection.isSelectionEmpty());if (editor.selection.isSelectionEmpty()) {// 如果没有选中任何内容// 折叠选区editor.selection.collapseRange();} else {let range = editor.selection.getRange();let containerElem =editor.selection.getSelectionContainerElem();// 如果只刷了一行if (!containerElem.equal(editor.$textElem)) {text = editor.selection.getSelectionText();//设置模板let _html = "";for (let i = 0; i < editor._html.length; i++) {if (i == 0) {if (editor._html[0].html == "font") {let arr = ``;for (let index = 0;index < editor._html[0].style.length;index++) {arr += ` ${editor._html[0].style[index]}`;}console.log((_html = `<${editor._html[0].html} ${arr}>${text}</${editor._html[0].html}>`));_html = `<${editor._html[0].html} ${arr}>${text}</${editor._html[0].html}>`;} else {_html = `<${editor._html[0].html} style="${editor._html[0].style}">${text}</${editor._html[0].html}>`;}} else {if (editor._html[i].html == "font") {let arr = ``;for (let index = 0;index < editor._html[i].style.length;index++) {arr += ` ${editor._html[i].style[index]}`;}_html = `<${editor._html[i].html}  ${arr}>${_html}</${editor._html[i].html}>`;} else {_html = `<${editor._html[i].html} style="${editor._html[i].style}">${_html}</${editor._html[i].html}>`;}}}//渲染模板editor.cmd.do("insertHTML", _html);}}}});}// 菜单激活状态tryChangeActive() { }}editor.menus.extend("format", format);

【wangeditor富文本编辑器v4版自定义功能】格式刷相关推荐

wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器:自定义粘贴,去除复制word或网页html冗余样式代码的解决方案 1.环境说明 2.解决方案 3.完整代码总结在使用wangEditor富文本编辑器时,当从wor ...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
前言富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载下载好之后 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
wangeditor富文本编辑器的使用（超详细）
一.基本介绍官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...

【wangeditor富文本编辑器v4版自定义功能】格式刷

【wangeditor富文本编辑器v4版自定义功能】格式刷相关推荐

最新文章

热门文章