ueditor自定义工具如何做？比如新加一个类似引用的工具

ueditor工具栏里面的引用（blockquote）点击后，选中内容就被加了样式。

我希望选中文中全部统一加一个样式，如何做？

换成通用的问法，如何在工具栏添加自定义工具

工具栏定制方法

首先，我们知道工具栏可以在ueditor.config.js里面定制

可以新增一个工具栏

, toolbars: [
     [
         'emphasize',//强调
         'anchor', //锚点

可以工具栏又多增了一个加粗按钮，点击没有如何反应！

需要再ueditor.all.js 增加功能

首先要注册emphasis命令，搜var btnCmds = [，增加一个

var btnCmds = ['undo', 'redo', 'formatmatch',
    'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',
    'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',
    'blockquote', 'pasteplain', 'pagebreak',
    'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',
    'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',
    'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts',
    'emphasizes'
];

然后增加这个插件

UE.plugins['emphasizes'] = function() {
  var me = this;
  me.commands['emphasizes'] = {
    execCommand : function( cmdName, attrs ) {
      var range = this.selection.getRange();
      var tmpRange = range.cloneRange();
      var content = range.extractContents();

      var blockquote = dtd.blockquote;
      var node = tmpRange.startContainer.nodeType == 1 ? tmpRange.startContainer : tmpRange.startContainer.parentNode,
        preNode = node,
        doEnd = 1;

      //调整开始
      while ( 1 ) {
        if ( domUtils.isBody(node) ) {
          if ( preNode !== node ) {
            if ( range.collapsed ) {
              tmpRange.selectNode( preNode );
              doEnd = 0;
            } else {
              tmpRange.setStartBefore( preNode );
            }
          }else{
            tmpRange.setStart(node,0);
          }

          break;
        }
        if ( !blockquote[node.tagName] ) {
          if ( range.collapsed ) {
            tmpRange.selectNode( preNode );
          } else{
            tmpRange.setStartBefore( preNode);
          }
          break;
        }

        preNode = node;
        node = node.parentNode;
      }

      //调整结束
      if ( doEnd ) {
        preNode = node =  node = tmpRange.endContainer.nodeType == 1 ? tmpRange.endContainer : tmpRange.endContainer.parentNode;
        while ( 1 ) {

          if ( domUtils.isBody( node ) ) {
            if ( preNode !== node ) {

              tmpRange.setEndAfter( preNode );

            } else {
              tmpRange.setEnd( node, node.childNodes.length );
            }

            break;
          }
          if ( !blockquote[node.tagName] ) {
            tmpRange.setEndAfter( preNode );
            break;
          }

          preNode = node;
          node = node.parentNode;
        }

      }



      var section = range.document.createElement('section'); // 这里你可以替换为你想要的标签
      section.setAttribute('class', 'emphasizes-area'); // 可选：设置类名或其他属性
      section.appendChild(content);
      tmpRange.insertNode(section);
    }
  }
}

这样点击，及发现被点击的内容被section包裹了

如何修改自定义按钮的样式

不一一细说了

还有一种方法

ueditor自定义UI

这个在一个地方改就好了，推荐使用这种方式

UE.registerUI("emphasize", function(editor, uiName) {
  editor.registerCommand(uiName, {
    execCommand: function() {
      debugger
      var range = this.selection.getRange()
      var content = range.extractContents()
      var section = this.document.createElement("section") // 这里你可以替换为你想要的标签
      section.setAttribute("class", "emphasize-area") // 可选：设置类名或其他属性
      section.appendChild(content)
      editor.fireEvent("contentChange")
    },
    queryCommandState: function() {
      var node = editor.selection.getStartContainer()
      return node && node.nodeName.toLowerCase() === "blockquote"
    }
  })

  // 创建按钮
  var btn = new UE.ui.Button({
    name: uiName,
    title: "插入引用",
    cssRules: "background-image: url(https://www.zhoulujun.cn/statics/images/vms/qbbg.jpg);", // 替换为你的图标路径
    onclick: function() {
      debugger
      editor.execCommand(uiName)
    }
  })

  return btn
}, 88 /* 插件优先级 */)

这个只需改动一个地方就够了！

转载本站文章《ueditor自定义工具如何做？比如新加一个类似引用的工具》,
请注明出处：https://www.zhoulujun.cn/html/php/phpcms/2024_1223_9388.html