前端富文本编辑器(已验证)

vue3+ts  

• quillEditor 毫无疑问一款非常强大的 富文本编辑器

• 在 vue 中一个也非常好用 ，而且也十分轻量的；

• 使用步骤：

• npm install @vueup/vue-quill@alpha --save

  在main.js 中全局组件式导入

• import { createApp } from 'vue';
  import { QuillEditor } from '@vueup/vue-quill'
  import '@vueup/vue-quill/dist/vue-quill.snow.css';
  
  createApp(App)
          .component('QuillEditor', QuillEditor)
          .mount('#app')
  

  全局使用

• <template>
  	<quill-editor
  		content-type='html'
  		:content='content'
  		:options='options' 
  		@blur='editorBlur($event)'
  	/>
  </template>
  
  <script setup>
    import { ref } from 'vue';
    let content = ref("<p> 初始内容。。。</p>");
    let options = 。。。。
  </script>
  

  content-type 设置保存的文本类型 ，html => 已超文本的形式保存；

  content 内容也就是这个超文本 => 返回的为 很长的 string 字符串 (HTML 文本)；

  后端保存这个字符串， 用的时候，把这个字符串 返回来 内容就渲染啦；

  引入的图片，图片也是 Base64 显示，所以保存 一个字符串 就是 一篇富文本 

• 配置项

•     let editorOption = {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ align: [] }], // 对齐方式
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ font: [] }], // 字体种类
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ direction: 'ltl' }], // 文本方向
            [{ direction: 'rtl' }], // 文本方向
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            ['blockquote', 'code-block'], // 引用  代码块
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'], // 链接、图片、视频
          ],
        },
      };
  

  事件

• <quill-editor
  	:content='content'
  	:options='options' 
  	@blur='editorBlur($event)'
  />
  ......
  <script setup>
  function editorBlur(val) {
  	console.log('当前的文本框的内容：' + val);
  }
  </script>
  

  更多内容可以参考官网 => quillEditor 官网

• vant中的案例

•  <van-uploader ref="uploaderRef" v-show="false" :after-read="afterRead" />
        <van-popup class="back-Popup" v-model:show="showBackPopup" round>
          <quill-editor ref="editorRef" content-type='html' v-model:content='submitParams.content' :options='editorOption' :placeholder="route.query?.type == '2' ? '请输入留言内容……' : '请输入回复内容……'" />
          <van-button class="submit-btn" type="danger" round @click="handleSubmit">提交</van-button>
        </van-popup>
  
  const afterRead = async (file: any): Promise<void> => {
    try {
      const res: any = await $upload('/common/upload', { file: file.file })
      if (res.code == 200) {
        let quill = editorRef.value.getQuill();
        let length = quill.getSelection().index
        quill.insertEmbed(length, 'image', res.url)
        quill.setSelection(length + 1);
      }
      showToast(res.msg)
    } catch (error: any) {
      showToast(error.message)
    }
  };
  
  let editorOption = {
    modules: {
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
          [{ align: [] }], // 对齐方式
          [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
          [{ font: [] }], // 字体种类
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
          [{ direction: 'ltl' }], // 文本方向
          [{ direction: 'rtl' }], // 文本方向
          [{ indent: '-1' }, { indent: '+1' }], // 缩进
          [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
          ['clean'], // 清除文本格式
          ['image'],
        ],
        handlers: {
          'image': function (value: any) {
            if (value) {
              uploaderRef.value.chooseFile()
            } else {
  
            }
          }
        }
      }
    },
  };
  
  
  提交成功之后清空编辑器内容
  const handleSubmit = async (): Promise<void> => {
    try {
      const res: any = await $post("/video/messageDetail", submitParams.value)
      if (res.code == 200) {
        showBackPopup.value = false
        let quill = editorRef.value.getQuill();
        quill.deleteText(0, quill.getLength());
        handleGetList()
      }
      showToast(res.msg)
    } catch (error) {
  
    }
  }