Vue 富文本编辑器插件 vue-quill-editor 坑！

Vue3 + vue-quill-editor
安装步骤：
vue3 安装vue-quill-editor

npm install @vueup/vue-quill

vue2 安装vue-quill-editor

npm install vue-quill-editor

npm安装完成之后，则是main.js引用，全局的挂载它

// 导入vue富文本编辑器
import { createApp } from 'vue';
import App from './App.vue';
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'const app = createApp(App);
app.component('QuillEditor', QuillEditor)
app.mount("#app");

在组件中使用vue-quill-editor

<template>
<div><input v-model="title" class="title" type="text"><input @click="saveDraft" class="saveDraft" type="button" value="保存草稿"/><input class="saveDiary" type="button" value="发布日记"/><quill-editor :disabled="true" theme="snow"id="quillEditor"content-type="html" :content="desc"style="height: 600px;"/>
</div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "diary",data() {return {desc: "",title: "【无标题】",}},methods:{saveDraft(){console.log(document.getElementById("quillEditor"))}}
}
</script><style scoped>
.saveDraft{height: 41px;margin-right: 16px;padding: 0 16px;font-size: 16px;color: #c7c9cb;border: 1px solid rgb(178, 62, 255);border-radius: 18px;white-space: nowrap;background: none;
}
.saveDraft:hover{background-color: rgba(203, 203, 203, 20%);;
}
.saveDiary{height: 41px;margin-right: 16px;padding: 0 16px;font-size: 16px;color: #c7c9cb;border: 1px solid rgb(178, 62, 255);border-radius: 18px;white-space: nowrap;background-color: rgb(178, 62, 255);
}
.saveDiary:hover{background-color: rgb(178, 62, 255, 70%);
}
.title{width: 20%;border-radius: 18px;padding: 8px;padding-right: 88px;font-size: 18px;line-height: 24px;background: none;margin: 10px;
}
/* ql开头表示富文本样式设计 */
.ql-toolbar.ql-snow {border: 1px solid #d1d5db;box-sizing: border-box;font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;padding: 8px;background-color: rgb(178, 62, 255, 70%);
}</style>

这里说一下，我遇到的坑，首先是v-model 在这个标签上没用，我也不知道为什么，然后就是@change事件没有被触发，这就导致我拿不到这个标签里面的数据，最后实在是用了一个没有办法的办法，使用了document.getElementById 这个方法来获取它里面的数据，里面可以完整的获取用户在中写入的样式，到时候把它用v-html标签输出一下就好了

Vue 富文本编辑器插件 vue-quill-editor 坑！相关推荐

Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
tui-editor（富文本编辑器插件）安装报错处理方法
tui-editor安装报错处理方法项目中yarn或npm install时,tui-editor(富文本编辑器插件)安装报错. 显示 warning tui-editor > highlig ...
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏 ...
14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...

Vue 富文本编辑器插件 vue-quill-editor 坑！

Vue 富文本编辑器插件 vue-quill-editor 坑！相关推荐

最新文章

热门文章