富文本编辑器中工具栏和编辑区分离的解决办法_wangeditor 一个工具栏控制多个编辑器-CSDN博客

本文链接：https://blog.csdn.net/zyg1515330502/article/details/114880099

在前端项目中，为满足特定需求，需实现一个富文本编辑器，其特点是工具栏与编辑区分离，一个工具栏对应三个独立的编辑区域。采用wangEditor进行封装，该编辑器提供了相应的解决方案。wangEditor官网提供了详细的文档和示例，通过导入组件并进行配置，可以成功实现这一功能。

摘要由CSDN通过智能技术生成

最近做项目遇到一个需求，富文本编辑器，一个工具栏对应三个编辑区，如下图所示：

通过wangEditor封装的组件：

wangEditor 的地址： https://www.wangeditor.com/

<template>
  <div>
    <div v-show="toolbalSshow" :id="toolbalId" class="toolbar"></div>
    <div :id="editorId" class="text"></div>
  </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from "wangeditor";
export default {
  props: {
    content: "",
    index: Number,
  },
  model: {
    prop: "content",
    event: "change",
  },
  data() {
    return {
      editor: null,
      editorData: "",
      editorId: "vue-wangEditor-" + Date.now() + Math.floor(Math.random() * 1000),
      toolbalId:
        "vue-wangEditor-toolbal-" + Date.now() + Math.floor(Math.random() * 1000),
      editorInedx: this.index,
      toolbalSshow: false,
      editorContent: this.content,
    };
  },
  mounted() {
    let this_ = this;
    const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = wangEditor;

    
    // 菜单 key ，各个菜单不能重复
    const menuKey = 'menuKey'+Date.now() + Math.floor(Math.random() * 1000);
    const editor = new wangEditor(`#${this.toolbalId}`, `#${this.editorId}`);
    class OkrMenu extends BtnMenu {
      constructor(editor) {
        // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
        const $elem = wangEditor.$(
          `<div class="w-e-menu">
                <button>插入OKR</button>