项目中使用富文本编辑器

  • 百度富文本编辑器  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(); //清空编辑器内容

效果展示:

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注