项目中使用富文本编辑器

• 百度富文本编辑器  Ueditor   

基本使用：下载源码 →放入项目中引用（vue2可以放到static文件夹中，如果是vue3放到public文件夹中 ）→使用

例：编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器，详询    API文档→http://fex.baidu.com/ueditor/

        <div id="container"></div>

        this.editor = window.UE.getEditor('container', {

              toolbars: [
                   ['fullscreen', 'source', 'undo', 'redo', 'bold']
              ],
              autoHeightEnabled: true,
              autoFloatEnabled: true

         });

         this.editor.addListener('ready', () => {
                  this.editor.setContent('hello') ;//设置编辑器内容
         })

        this.editor.addListener('contentchange', () => {  //内容变化时获取编辑器内容
               let html= this.editor.getContent()  //获取html内容，返回: <p>hello</p>

               let txt=this.editor.getContentTxt()  //获取纯文本内容，返回: hello
        })

  效果展示：

    

• wangEditor Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费 (兼容常见的 PC 浏览器：Chrome，Firefox，Safari，Edge，QQ 浏览器，IE11。不支持移动端)

  基本使用   API文档→http://www.wangeditor.com/doc/

  1.下载

           npm 安装 npm i wangeditor --save

          CDN 链接 https://unpkg.com/wangeditor/dist/wangEditor.min.js

   

  2-1.使用 js 外链引入

         <div id="div1">
                 <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
         </div>

         <script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
         <script type="text/javascript">
                 const E = window.wangEditor
                const editor = new E('#div1')
               // 或者 const editor = new E( document.getElementById('div1') )
                editor.create()
          </script>
  2-2使用 npm 安装

        <div ref="editorElem" style="width:800px;"></div>

          import E from "wangeditor";
          

          this.editor = new E(this.$refs.editorElem);
        
          this.editor.config.onchange = html => {    // 编辑器的事件，每次改变会获取其html内容
                  this.editorContent = html；
          };
          this.editor.config.height = 100;
          this.editor.config.menus = [
                // 菜单配置
                'head', // 标题
                 'bold', // 粗体
                 'fontSize', // 字号
                 'fontName', // 字体
                 'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
               'emoticon', // 表情
               'image', // 插入图片
               'table', // 表格
               'code', // 插入代码
               'undo', // 撤销
               'redo' // 重复
          ]；

          this.editor.create(); // 创建富文本实例

          

         let txt=this.editor.txt.text()；//获取纯文本
         let html=this.editor.txt.html(); //获取内容

               this.editor.txt.html('sasasasasasa');//设置编辑器内容

              this.editor.txt.clear(); //清空编辑器内容

效果展示：

----------------------------------------《完》-----------------------------------------欢迎指正