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"
      :style="`height: ${height}px`"
      :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 id="editorUploadImage" />
      </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 lang="scss" 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"
/>