Vue中使用quillEditor编辑器使用粘贴可用，小坑讲解，回显空格丢失等问题。

在日常开发中我们经常会使用到富文本编辑器，怎么选择一个好的富文本编辑器呢

安装依赖

npm install vue-quill-editor --save

npm install quill --save

个人不太喜欢wangedit，说不上来那里不好
最后还是选用了quillEditor

小坑
就是我们在里面按了键盘上的空格键的时候，下面显示的文字不会缩进，这时我们只需要添加一个class完事

<span v-html="content" :class="['quill', 'ql-editor']"></span>

但是实际开发中这需要帮这段富文本提交给后端，比如我们编辑的时候，需要先回显，在编辑，你会发现回显在富文本编辑器中的内容空格不在了，这个时候只需要给上面的 class="ql-editor"

<quill-editor class="ql-editor"</quill-editor>

使用方法跟简单
直接在组件中使用即可
代码如下


<template><div class="edit_container"><p>quillEditor编辑器使用</p><quill-editor class="ql-editor"v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor><span v-html="content" :class="['quill', 'ql-editor']"></span><button @click="handRemove">清空</button><button @click="showtext">回显</button></div>
</template>
<script>
const toolbarOptions = [['insertMetric'],['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线['blockquote', 'code-block'],                     //引用，代码块[{ 'header': 1 }, { 'header': 2 }],               // 几级标题[{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，无序列表[{ 'script': 'sub' }, { 'script': 'super' }],     // 下角标，上角标[{ 'indent': '-1' }, { 'indent': '+1' }],         // 缩进[{ 'direction': 'rtl' }],                         // 文字输入方向[{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小[{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题[{ 'color': [] }, { 'background': [] }],          // 颜色选择[{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体[{ 'align': [] }],    // 居中// ['clean'],            // 清除样式,//['link', 'image']   // 上传图片、上传视频
]import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';export default {components: {quillEditor},data() {return {content: ``,editorOption: {placeholder: '请在这里输入',theme: 'snow', //主题 snow/bubblemodules: {history: {delay: 1000,maxStack: 50,userOnly: false},toolbar: {container: toolbarOptions,handlers: {insertMetric: this.showHandle}}}}}},methods: {onEditorReady(editor) { // 准备编辑器console.log(editor)},onEditorBlur(){}, // 失去焦点事件onEditorFocus(){}, // 获得焦点事件onEditorChange(){}, // 内容改变事件handRemove(){this.content = ""},showtext(){this.content = `<p>啥地方第三方水电费水电费水电费水电费水电费速度佛挡杀佛</p><p> 水电费水电费水电费</p><p>第三方水电费第三方</p><p> 胜多负少的水电费水电费水电费</p>`}},computed: {editor() {return this.$refs.myQuillEditor.quill;},}
}
</script>
<style >
.edit_container{width: 90%;margin: 50px auto;
}
.ql-editor{min-height: 300px;
}
</style>

Vue中使用quillEditor编辑器使用粘贴可用，小坑讲解，回显空格丢失等问题。相关推荐

Java中List集合的addAll方法的小坑
Java中List集合的addAll方法的小坑遇到的问题已有一个封装类的ArrayList的集合,命名为firstList,现在需要把firstList中的值复制给另一个List,另一个List命 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
用百度富文本编辑器UMeditor实现对html文本的编辑功能，vue中使用UMeditor编辑器
百度 UMeditor 编辑器资源免费下载地址: https://download.csdn.net/download/WanweI897/67403979 该编辑器没有官方文档,不过百度另一个编辑器 ...
记录一下Vue中的created函数所踩到的坑（回调函数不立即生效）
在Vue中,经常会在created函数中初始化页面内容.因此,我们常常会在created函数中通过请求后台的方式去获取数据. getAction(this.url.getCurrentUser,{}, ...
Vue中一些需要注意的点（采坑）
前言:记录在学Vue中需要注意的问题 1.给link添加事件.给组件绑定原生事件在vue-router1中使用v-link写入路由,但是在vue-router2中要使用router-link写入路由 ...
vue中使用 markdown 编辑器编写图文消息，并在小程序中展示。
需求是做个类似微信公众号那样的图文编辑推广,文章最后要在小程序里面浏览. 开始找到个富文本编辑器'vue-quill-editor' 可以使用,最后出来的内容是html格式,虽然小程序里面可以转译过来 ...
vue中使用Ueditor编辑器 -- 1
一. 下载包: 从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器,官网地址为:http://ueditor.baidu.com/website/download.html ...
vue中使用Ueditor编辑器
一.下载包: 官网地址:http://fex.baidu.com/ueditor/ git地址: https://github.com/fex-team/ueditor 打开下载后的文件,大致目录,不 ...
Vue中使用QuillEditor代替UEditor
Situation 需求:使用能插入图片的编辑器将文字和图片混合作为一道作业题目由于是在原来项目的基础上做的修改,老项目使用的UEditor编辑器,为了将题目中的公式转为图片,方便新增数据,于是前 ...

Vue中使用quillEditor编辑器使用粘贴可用，小坑讲解，回显空格丢失等问题。

在日常开发中我们经常会使用到富文本编辑器，怎么选择一个好的富文本编辑器呢

Vue中使用quillEditor编辑器使用粘贴可用，小坑讲解，回显空格丢失等问题。相关推荐

最新文章

热门文章