Quill编辑器插入自定义HTML记录的示例详解

static transformValue(value) {
      let handleArr = value.split('n')
      handleArr = handleArr.map(e => e.replace(/^[s]+, '')
        .replace(/[s]+$/, ''))
      return handleArr.join('')
    }

// 返回节点自身的value值 用于撤销操作
    static value(node) {
      return node.innerHTML
    }
  }
  // blotName
  AppPanelEmbed.blotName = 'AppPanelEmbed';
  // class名将用于匹配blot名称
  AppPanelEmbed.className = 'embed-innerApp';
  // 标签类型自定义
  AppPanelEmbed.tagName = 'div';
  Quill.register(AppPanelEmbed, true);
}

接下来你只需要这样调用，便可以在编辑器中插入自定义的HTML块：

quill.insertEmbed(quill.getSelection().index || 0, 'AppPanelEmbed', `
          <div>    
              自定义面板标题
          </div>
          <div>    
              自定义面板内容
          </div>
          <div>    
              footer
          </div>
      `);

传参格式要求如下：

insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta

这里仅仅这是个简单的示例，如果想丰富自定义Blot的功能，可以参照： https://github.com/quilljs/parchment#blots

由于contenteditable属性放开，为了防止造成xss攻击，所以需要我们对该属性做特殊的过滤处理，这里以xss模块处理为例：

handleWithXss(content) {
      const options = {
        whiteList: {
         ...
          div: ['class', 'style', 'data-id','contenteditable'],
         ...
        },
        css: {
          whiteList: {
            color: true,
            'background-color': true,
            'max-width': true,
          },
        },
        stripIgnoreTag: true,
        onTagAttr: (tag, name, value, isWhiteAttr) => {
          // 针对div的contenteditable 处理
          if (isWhiteAttr && tag === 'div' && name === 'contenteditable') {
            return 'contenteditable="false"';
          }
        },
      } // 自定义规则
      const myxss = new xss.FilterXSS(options)
      return myxss.process(content)
    }

到此这篇关于Quill编辑器插入自定义HTML记录的文章就介绍到这了,更多相关Quill编辑器自定义HTML内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!