富文本的爬坑之路 - - vue

1.百度富文本编辑器

// 百度编辑器页面初始化
// 报错：Uncaught SyntaxError: Unexpected token '<'； Uncaught ReferenceError: ZeroClipboard is not defined   ueditor文件要放在public静态资源文件夹下，vue2.0静态资源文件夹是static,vue3.0则是public
      config: {
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        initialContent: 'xxxxxxxxxxxxxxxxx', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent: true, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        initialFrameWidth: null,
        initialFrameHeight: 600,
        BaseUrl: "",
        //这是vue 2.0下面的目录配置
        // UEDITOR_HOME_URL: "../../static/ueditor/ueditor/"
        //这是vue 3.0 下面的配置
        UEDITOR_HOME_URL: "/UEditor/"
      }

除了被静态资源文件这个坑了一把，还有就是目前的下拉都出不来（这个坑暂未爬完）

但这些在vue 2.0 的项目下是能正常使用的

以下为完整的例子

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>

<script>
import '../../../public/ueditor/ueditor.config.js';
import '../../../public/ueditor/ueditor.all.js';
import '../../../public/ueditor/lang/zh-cn/zh-cn.js';

// import '../../../public/ueditor/jquery-2.2.3.min.js';

export default {
  name: 'UEditor',
  props: {
    id: {
      type: String
    },
    config: {
      type: Object
    }
  },
  data() {
    return {
      editor: null
    };
  },
  mounted() {
    // 初始化UE
    const that = this;
    that.editor = UE.delEditor('editor');
    that.editor = UE.getEditor('editor', that.config);
  },
  destoryed() {
    this.editor.destory();
  },
  methods: {
    getUEContent: function () {
      return this.editor.getContent();
    },
    getContentTxt: function () {
      return this.editor.getContentTxt();
    }
  }
};
</script>

2.vue-quill-editor

需要添加这两个样式vue-quill-editor 的样式文之fontFamily，vue-quill-editor 的样式文之fontSize否则就是这种鬼畜的形式

以下为完整的例子

<template>
  <div class="editor_wrapper">
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" style="height:100%"></quill-editor>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import 'quill/dist/quill.bubble.css';

// import './quillEditorCss/fontSize.css';
// import './quillEditorCss/fontFamily.css';

import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);

import tool from './tool.js'
import {addQuillTitle} from './addTitle.js';

export default {
  components: { quillEditor },
  props:{
    content:{       // 传入富文本内容
      type: String,
      default: ''
    }
  },
  data () {
    return {
      editorOption: {
        modules: {
          ImageExtend: {
            // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
            name: "file", // 图片参数名
            size: 10, // 可选参数 图片大小，单位为M，1M = 1024kb
            action: "", // 服务器地址, 如果action为空，则采用base64插入图片 后台提供
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: res => {
              return res.data;
            },
            headers: xhr => {
              xhr.setRequestHeader('Qzdcloud-Auth','bearer '+sessionStorage.getItem('token_get'))
            }, // 可选参数 设置请求头部
            sizeError: () => { }, // 图片超过大小的回调
            start: () => {
              this.$loading({ lock: true, text: '上传中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.5)' });
            }, // 可选参数 自定义开始上传触发事件
            end: () => { 
              this.$loading().close();
            }, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {
              this.$message("上传失败")
              this.$loading().close();
            }, // 可选参数 上传失败触发的事件
            success: res => {
              this.$message.success("上传成功");
            }, // 可选参数  上传成功触发的事件
            change: (xhr, formData) => {
              // xhr.setRequestHeader('myHeader','myValue')
              // formData.append('token', 'myToken')
            } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            // 如果不上传图片到服务器，此处不必配置
            // container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
            container: tool,
            handlers: {
              image: function () {
                // 劫持原来的图片点击按钮事件
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        },
        placeholder: 'Insert text here ...'
      },
      htmlContent: ''
    }
  },
  mounted(){
    addQuillTitle();
    // console.log('content', this.content)
  },
  methods:{
    //设置富文本编辑器的默认值
    setContent(val = ''){
      this.content = val;
    },
    onEditorChange(event){
      this.htmlContent = event.html;
      // console.log(this.htmlContent)
      this.$emit('change',event.html)
    },
    // 获取富文本内容
    getHtmlContent(){
      return this.htmlContent;
      console.log(this.htmlContent)
    }
  }
}
</script>

<style scoped lang="scss">
.editor_wrapper{
  width:100%;
  /* min-height:50vh; */
  height: calc(100% - 100px);
}
.editor_wrapper /deep/ .quill-editor{
  height: calc(100% - 42px) !important;
}
</style>

上面的代码中，我们引入了 addQuillTitle 的方法，作用是给富文本的操作项增加title

addTitle 代码资源

3.wangeditor

完整代码如下

<template>
  <div id="wangeditor">asdasdasd</div>
</template>

<script>
let node = null;
import wangeditor from 'wangeditor'
export default {
  mounted(){
    var node = wangeditor;
    var editor2 = new node('#wangeditor')
    editor2.create()
  },
}
</script>

<style>

</style>

由于功能太少又没有时间做扩展，于是就没有考虑用这个