富文本编辑器quill的简单使用

富文本编辑器quill的简单使用

使用quill可以将输入到文本框中的东西转化为html存储起来

// 参考使用教程 https://zhuanlan.zhihu.com/p/662012733
// 获取上传框对象 https://blog.youkuaiyun.com/mynewdays/article/details/105726120
// ref dom https://zhuanlan.zhihu.com/p/527995785
// 图片上传 https://blog.youkuaiyun.com/mynewdays/article/details/105726120

在组件中引入

// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 // 组件直接使用
import { quillEditor} from 'vue-quill-editor/src' // 网上有地方说是不加src 但是我不加报错了

配置具体设置

const editorOption = reactive( {
        modules: {
          toolbar: {
                container:[
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        ['blockquote', 'code-block'], // 引用  代码块
                        [{ header: 1 }, { header: 2 }], // 1、2 级标题
                        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                        [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                        [{ indent: '-1' }, { indent: '+1' }], // 缩进
                        [{ direction: 'rtl' }], // 文本方向
                        [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        // [{ font: ['songti'] }], // 字体种类
                        [{ align: [] }], // 对齐方式
                        ['clean'], // 清除文本格式
                        ['image', 'video'] // 链接、图片、视频
                ],
                handlers: {
              // 重写点击组件上的图片按钮要执行的代码
              'image': function (value) {   // 用dom 来获取元素 可以使用这种方法来区分!
                if (value) { // value === true
                    document.querySelector(".avatar-uploader[id='Quill'] input").click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
            }
          
        },
        placeholder: '请输入正文'
      })

实现图像输入

1. 我们要重写一下上传图片的方法： 首先定义一个 el-upload 标签 然后让他隐藏起来
2. 在配置文件中编写处理函数：

handlers: {
              // 重写点击组件上的图片按钮要执行的代码
              'image': function (value) {   // 用dom 来获取元素 可以使用这种方法来区分!
                if (value) { // value === true
                    document.querySelector(".avatar-uploader[id='Quill'] input").click()
                } else {
                  this.quill.format('image', false)
                }
              }

3. 编写给图片插入编辑器的方法：

const  myQuillEditor = ref(null) // 获取对象
const successUploadimg = (result)=>{
    const imageUrl = result.data
    //  console.log(result.data)
     ElMessage.success(result.message||"上传成功")
    // 获取光标所在位置
    let quill = myQuillEditor.value.quill // 使用ref方法获取的元素 要加上value才能使用！
    let length = quill.getSelection().index
      // 插入图片  
      quill.insertEmbed(length, 'image', imageUrl)
      // 调整光标到最后
      quill.setSelection(length + 1)
      // this.content += url
}

实现数据绑定

按理说用v-model可以绑定双向 但是我实验发现只能从数据结构输入到editor 如果出现和我一样的错误，可以写个onChange函数

const onChange = (word)=>{
    articleModel.value.content = word.html
}

 <quill-editor 
                    v-model:content="articleModel.content" 
                    contentType="html"
                    :options="editorOption"
                    @change="onChange($event)"
                    ref = "myQuillEditor"
                    >
 </quill-editor>