Vue移动端富文本插件vue-quill-edito简单使用

最新推荐文章于 2024-02-04 17:33:39 发布

kangdeboke

最新推荐文章于 2024-02-04 17:33:39 发布

阅读量2.7k

点赞数 2

文章标签： js vue

本文链接：https://blog.csdn.net/kangdeboke/article/details/118498166

版权

本文介绍了在移动端项目中如何使用vue-quill-editor这一富文本编辑插件。该插件提供类似Microsoft Word的编辑功能，适用于网站和APP的发布场景。通过npm安装、全局或局部引入、组件使用等步骤，轻松实现富文本编辑。默认样式下，编辑器支持标题、图片等元素，并可通过v-html指令渲染HTML内容。

摘要由CSDN通过智能技术生成

PC端的富文本插件比较好找，这次在移动端的项目中遇到需要富文本编辑内容，找了几款之后，最终觉得vue-quill-edito这款插件相对好用。以下是这款编辑器的简单使用方法，更多API关注Quill官网：https://quilljs.com/docs/quickstart/（外网速度可能较慢）。

富文本编辑插件功能：

富文本编辑器，它提供少量类似于 Microsoft Word 的编辑功能，是一套HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，通常会使用在发布相关的网页或app中，如论坛相关等。

使用步骤：

1、项目中安装：

该插件是依赖于Quill的，但是无需再下载Quill,因为在安装vue-quill-editor时，已经安装了Quill。

npm install vue-quill-editor –save

2、引入

2.1、全局引入

//main.js中引入
//引入插件核心文件
import VueQuillEditor from 'vue-quill-editor'
//引入插件样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

2.2、局部引入

//组件中引入
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
  }
}

3、使用

<quill-editor 
    v-model="editorHtml" 
    ref="myQuillEditor" 
    :options="editorOption">
</quill-editor>



data(){
   return{
        editorHtml:'',
        editorOption:{
		placeholder: "请输入...",
	}
   }
}

editorHtml是富文本的内容（在脚本里可使用this. editorHtml获取到文本框的内容）

editorOption是关于插件的配置，举例：placeholder 是富文本框中默认值

4、页面效果（默认样式）

上图中富文本获取到的值为:

“<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA94AAAIhCAYAAAC43mJTAAAgAElEQVR4nOy9CbQlyVnf+c97317VVdWrutVaoCXcklogIWQJWoiDQALJLNKAYJDGAobFDGaQPTYwPtiz4IM92OYY24A9A8PYZl9kkIGxDBqMBWIVaN/Q1p…..>”

注：图片的src的路径替换成base64编码

若需要将以上格式的代码再重新渲染到html中，则用v-html指令即可。

（v-html不会对内容中的html标签进行转义。相当于innerHTML。）