标签：文本编辑 const wangEditor elemMenu 插入 editor 使用 config

官网链接 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

由于使用公司封装的富文本编辑器不太好使（小声bb），摸索了一个好用的富文本编辑器

npm install wangeditor --save

在componentDidMount中声明使用

    const elemMenu = document.getElementById('editorElemMenu');
    const elemBody = document.getElementById('editorElemBody');
    const editor = new Editor(elemMenu, elemBody);
    (editor as any).config.zIndex = 0;
    // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
    editor.config.onchange = () => {
      const kmContent = editor.txt.html();
      const kmContentText = editor.txt.text();
    };
    editor.config.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'video', // 插入视频
      'code', // 插入代码
      'undo', // 撤销
      'redo', // 重复
    ];
    editor.config.uploadImgShowBase64 = true;
    editor.create();

在组件中使用

                <div
                  id="editorElemMenu"
                  style={{ backgroundColor: '#f1f1f1', border: '1px solid #ccc' }}
                  className="editorElemMenu"
                />
                <div
                  style={{
                    height: 270,
                    border: '1px solid #ccc',
                    borderTop: 'none',
                  }}
                  id="editorElemBody"
                  className="editorElem-body"
                />

标签：文本编辑,const,wangEditor,elemMenu,插入,editor,使用,config
来源： https://www.cnblogs.com/fdd-111/p/14754354.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。