Vue中使用quill富文本

安装

npm install vue-quill-editor --save

挂载 vue-quill-editor 插件

全局挂载

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)

局部挂载

// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {components: {quillEditor}
}

页面使用

<template>
<div><!-- Two-way Data-Binding --><quill-editorref="myQuillEditor"v-model="content":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"/><!-- Or manually control the data synchronization --><quill-editor:content="content":options="editorOption"@change="onEditorChange($event)"/>
</div>
</template><script>export default {data () {return {content: '<h2>I am Example</h2>',editorOption: {placeholder: '请在这里输入',modules: {toolbar: [['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: ['small', 'large', 'huge'] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色[{ font: [] }], // 字体[{ align: [] }], // 对齐方式['clean'], // 清除字体样式['link'] //, 'image', 'video']}},}},methods: {onEditorBlur(quill) {console.log('editor blur!', quill)},onEditorFocus(quill) {console.log('editor focus!', quill)},onEditorReady(quill) {console.log('editor ready!', quill)},onEditorChange({ quill, html, text }) {console.log('editor change!', quill, html, text)this.content = html}},computed: {editor() {return this.$refs.myQuillEditor.quill}},mounted() {console.log('this is current quill instance object', this.editor)}
}
</script>

结果

Vue中使用quill富文本相关推荐

vue中使用quill富文本编辑器
因为公司的需求,对比了线在很火的几款富文本编辑器,最终选定了quill,他够轻量,拓展性也比较高,除了文档是英文的阅读不方便之外,都很适合公司项目.故整理出来,也方便以后使用. 在网上找了一个中文文档 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
Vue中使用Wangeditor富文本实现聊天发送文件驻留
1.最近遇到一个需求,类似企业微信发送文件及视频时可以在文本框内驻留,然后点击发送按钮进行文件发送,这里使用的是富文本框进行处理,Wangeditor富文本框. 自定义添加菜单功能如下: cnpm i ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
vue中使用tinymce富文本
安装方式一: npm install @tinymce/tinymce-vue -S npm install tinymce -S 方式二: 将下面的配置粘到package.json文件depend ...

Vue中使用quill富文本

安装

挂载 vue-quill-editor 插件

全局挂载

局部挂载

页面使用

结果

Vue中使用quill富文本相关推荐

最新文章

热门文章