1、安装

npm install vue-quill-editor --save

2、使用

import { quillEditor } from 'vue-quill-editor'

  

3、组件中

<quill-editor v-model="content"
ref="myQuillEditor"
class="editer"
:options="editorOption"
@ready="onEditorReady($event)">
</quill-editor>

  

data(){
return {
content: '<h3>文本编辑</h3>',
editorOption: { }
}
},
components: {
NavHeader,
quillEditor,
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
methods: {
onEditorReady(editor) {
console.log('editor ready!', editor)
},
submit(){
console.log(this.content);
this.$message.success('提交成功!');
}
}

  这样就已经完成了,但是有的时候在页面中 这样之后,样式会全部乱掉解决办法

main.js 中

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor);

  

Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor的更多相关文章

  1. Quill 富文本编辑器

    Quill 富文本编辑器 https://quilljs.com/ https://github.com/quilljs/quill https://github.com/quilljs/awesom ...

  2. Vue整合Quill富文本编辑器

    Quill介绍 Quill是一款开源的富文本编辑器,基于可扩展的架构设计,提供丰富的 API 进行定制.截止2021年1月,在github上面已有28.8k的star. Quill项目地址:https ...

  3. 如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

    我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...

  4. 轻量级quill富文本编辑器

    因为公司产品需要在移动端编辑文本,所以发现了这个轻量级的好东西,网上也没找到比较好的案例,就自己总结了下,有兴趣的直接复制代码运行看看就知道啦! 下面是quill.js的CDN加速地址: <!- ...

  5. quill富文本编辑器 API

    //1. 从第三个开始删除,删除4个 // console.log(this.quill.deleteText(2, 4)); // 12345678 1278 // 2.(返回对象)返回从第三个开始 ...

  6. 基于 React-draft-wysiwyg 实现的 react 富文本编辑器组件 开箱即用

    工作中遇到了一个需要做图文详情 的富文本编辑的需求, 于是基于 React-draft-wysiwyg 实现了一个 纯组件, 目前支持 常规文本输入 外部链接图片 以及本地上传图片, 由于是纯组件, ...

  7. ckeditor5富文本编辑器在vue中的使用

    安装依赖: npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 要创建编辑器实例,必须首先将编辑器 ...

  8. 现代富文本编辑器Quill的内容渲染机制

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  9. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

随机推荐

  1. 洛谷—— P2733 家的范围 Home on the Range

    https://www.luogu.org/problem/show?pid=2733 题目背景 农民约翰在一片边长是N (2 <= N <= 250)英里的正方形牧场上放牧他的奶牛.(因 ...

  2. CPU工作原理简图

  3. java读取中文分词工具(一)

    import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.I ...

  4. Python图像处理库PIL中图像格式转换(一)

    在数字图像处理中,针对不同的图像格式有其特定的处理算法. 所以,在做图像处理之前,我们须要考虑清楚自己要基于哪种格式的图像进行算法设计及事实上现.本文基于这个需求.使用python中的图像处理库PIL ...

  5. kendo AutoComplete实现多筛选条件

    kendo autoComplete 原始情况下是不支持多筛选条件的 $("#autocomplete").kendoAutoComplete({ filter: "co ...

  6. 将byte[]转为各种进制的字符串

    /**      * 将byte[]转为各种进制的字符串      * @param bytes byte[]      * @param radix 基数可以转换进制的范围(2-36),从Chara ...

  7. Dubbo实战(一)高速入门

    Dubbo是什么? Dubbo[]是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封 ...

  8. Spring+Mybatis之登录功能demo

    其实工作之后就没有用过Spring+Mybatis的框架了,因为公司有一个自己开发的框架,讲道理,其实这个与Spring+Mybatis整合很是神似.当然性能上还是比不上Spring+Mybatis所 ...

  9. 解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合”

    解决WinForm下ListBox控件“设置DataSource属性后无法修改项集合” 最近更新: 2013-2-15    587   很少写WinForm程序第一次使用ListBox控件就遇到了比 ...

  10. 动态规划---状压dp2

    今天模拟,状压dp又没写出来...还是不会啊,所以今天搞一下这个状压dp.这里有一道状压dp的板子题: Corn FieldsCorn Fields 就是一道很简单的状压裸题,但是要每次用一个二进制数 ...