富文本编辑器使用及遇到的问题

1. 百度编辑器-Ueditor

1.1 vue中使用

1. 将编译后的文件，即dist目录下的将 utf8-php 文件复制到 vue项目的 public文件夹里中，并将utf8-php重命名为Ueditor便于使用

2. 安装vue-ueditor-wrap

   $ yarn add vue-ueditor-wrap
   

3. 基础用法

   <template>
     <div class="ueditor-container">
       <vue-ueditor-wrap
         v-model="editorData"
         :config="editorConfig"
         @ready="ready"
       ></vue-ueditor-wrap>
     </div>
   </template>
   
   <script>
   import VueUeditorWrap from 'vue-ueditor-wrap'
   
   export default {
     name: 'Ueditor',
     components: { VueUeditorWrap },
     data() {
       return {
         editorData: '',
         editorConfig: {
           wordCount: false,
           elementPathEnabled: false,
           enableContextMenu: false,
           initialFrameHeight: 385,
           pasteplain: true,
           zIndex: 99,
           // UEditor 是文件的存放路径，
           UEDITOR_HOME_URL: '/UEditor/',
           serverUrl: '' // 服务器统一请求接口路径
         },
         editorInstance: null, // 编辑器实例
       }
     },
     methods: {
       ready(editorInstance) {
         this.editorInstance = editorInstance
       }
     }
   }
   </script>
   

1.2 实战项目

• 在ueditor中插入自定义组件，并且可点击打印对应数据

  1. 代码

  2. 效果图

     

  3. 使用ueditor的页面在微前端（阿里乾坤）中报错

     

     解决办法：将使用了ueditor的页面路由改为iframe引入

1.3 参考文章

• https://blog.csdn.net/weixin_60148344/article/details/124449230

---

2. wangeditor

2.1 若使用wangeditor的页面在微前端中报错

解决办法：使用老版本wangeditor

---

3. quill中文文档

3.1 vue中使用

$ npm install vue-quill-editor

3.2 基础使用

<template>
  <div class="quill-editor-container">
    <quill-editor v-model="content" :options="editorOption" />
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'QuillEditor',
  components: { quillEditor },
  data() {
    return {
      content: '',
      editorOption: {
        placeholder: '请输入',
        modules: {
          toolbar: [
            { size: [] },
            'bold',
            { color: [] }
          ]
        }
      }
    }
  }
}
</script>

<style lang="scss">
</style>

3.3 实战项目

1. 代码

2. 效果图

   

3.4 参考文章

• quill自定义（工具栏、字体大小、字号等）
• 自定义Quill.js 扩展属性
• vue.draggable中文文档
• 各编辑器比较