vue项目富文本编辑器推荐使用/react项目富文本编辑器/quill富文本编辑器的使用

这些全都是别人使用过的,推荐使用的哦~

vue项目:

1.Wang editor * 2

2.tinymce * 1

3. quill（目前公司使用这个)

4. slate-editor

react项目:

4. braft-editor (react 推荐使用)

如果上天再给我一次机会,我会选择Wang editor试试, -_-

第一步:

"vue-quill-editor": "^3.0.6",

然后npm install 或者 npm install vue-quill-editor --save

查看:https://github.surmon.me/vue-quill-editor/

第二步,写组件(害 这个组件同事写的,我也记录下)

<template>
  <div class="container">
    <quill-editor
      ref="newEditor"
      v-model="content"
      class="qediter"
      :
      :options="editorOption"
      @change="onEditorChange"
    />
    <!-- 隐藏upload 上传图片 -->
    <el-upload
      ref="uploadImg"
      class="upload-img"
      action=""
      :before-upload="picBeforeupload"
      :on-error="picError"
      accept="image/png, image/jpeg, image/jpg, image/gif"
      :show-file-list="false"
      :http-request="picUpload"
    >
      <slot name="trigger">
        <div  />
      </slot>
    </el-upload>
  </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'
import Quill from 'quill/dist/quill.js'
import { uploadArticleImgApi } from '@/api/operateMangement'
export default {
  name: 'QEditor',
  components: {
    quillEditor,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    height: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      content: '',
      editorOption: {},
      addImgRange: null,
    }
  },
  watch: {
    value: {
      handler(newValue, preValue) {
        if (newValue !== preValue && newValue !== this.content) {
          this.content = newValue
        }
      },
      immediate: true,
    },
  },
  created() {
    Object.assign(this.editorOption, this.option)
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 重写图片添加图片
      const imgHandler = state => {
        if (state) {
          document.getElementById('editorUploadImage').click()
        }
      }
      this.$refs.newEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
    },
    onEditorChange() {
      this.$emit('input', this.content)
    },
    // 图片大小检查
    picBeforeupload(file) {
      const isLt4M = file.size / 1024 / 1024 < 4
      if (!isLt4M) {
        this.$message.error('上传图片大小不能超过 4MB!')
      }
      return isLt4M
    },
    // 上传图片
    async picUpload(item) {
      try {
        const formData = new FormData()
        formData.append('file', item.file)
        const res = await uploadArticleImgApi(formData)
        this.addImg(res.data.url)
      } catch (e) {
        item.onError()
      }
    },
    // 上传图片失败
    picError() {
      this.$message({
        message: '图片添加失败，请重试',
        type: 'error',
      })
    },
    // 添加图片
    addImg(imgUrl) {
      this.addImgRange = this.$refs.newEditor.quill.getSelection() // 检索用户的选择范围, 如果编辑没有焦点，可能会返回一个null
      this.$refs.newEditor.quill.insertEmbed(
        this.addImgRange != null ? this.addImgRange.index : 0,
        'image',
        imgUrl,
        Quill.sources.USER,
      )
    },
  },
}
</script>

<style  scoped>
  .container{
    .qediter{
      margin-bottom: 80px;
    }
    .upload-img{
      display: none;
    }
  }
</style>

上面拦截了一个图片上传,改成element的upload进行上传

第三步 使用

import QEditor from '@/components/QEditor'
components: {
   QEditor,
},
<q-editor
   v-model="newVersion.versionDesc"
   :height="200"
/>