vue实现富文本

vue实现富文本

1、引入插件

npm install vue-quill-editor --save

2、在封装的组件中引入并注册

<script>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 },data() {return {content: "", // 文本内容};},methods: {// 失去焦点事件onEditorBlur() {},// 获得焦点事件onEditorFocus() {},// 准备编辑器onEditorReady() {},// 内容改变事件onEditorChange() {},},watch: {// 监听文本变化内容content() {console.log(this.content);},},};</script>

3、使用注册的组件内容

<template><!-- 富文本 --><quill-editorref="myQuillEditor"v-model="content":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"@change="onEditorChange($event)"/></template>

4、根据自身使用情况选择全局注册还是某一页面注册使用，显示效果如下：

5、回显显示，使用v-html

<div v-html="msg" class="ql-editor"></div>

注意：class="ql-editor" 是为了将文本样式与富文本框输入的样式保持一致（也可自己写样式）

其他（功能优化）

1、输入框提示文本

 editorOption: {placeholder: "请输入需要编写的内容...",},

2、内容控件汉化

提示：将代码样式复制到对应组件中即刻

<style>.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {content: "10px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {content: "18px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {content: "32px";}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "文本";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: "标题6";}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";}</style>

3、显示效果如下：

4、编辑图片

4.1、安装依赖包，包含编辑器包，拖拽包，缩放包

npm i quill-image-drop-module-S // 拖拽插件npm i quill-image-resize-module -S // 放大缩小插件

4.2、组件里引入使用

import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用Quill.register("modules/imageDrop", ImageDrop); // 注册Quill.register("modules/imageResize", ImageResize); // 注册

4.3、在data中配置`

editorOption: {placeholder: "请输入需要编写的内容...",modules: {imageDrop: true, //图片拖拽imageResize: {//放大缩小displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},// 需要重置工具，不然富文本工具上的功能会缺失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: ["12","14","16","18","20","22","24","28","32","36",],},], // 字体大小[{ header: [1, 2, 3, 4, 5, 6] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["image", "video"], // 链接、图片、视频],},},

4.4、将在webpack中对插件进行配置
提示：找到文件中vue.config.js进行配置

const webpack = require('webpack') // 引入webpackmodule.exports = {// 在vue.config.js中configureWebpack中配置configureWebpack: {plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})]}}

注意：配置完成后需要重启服务

完整组件代码

<template><!-- 富文本 --><div><quill-editorref="myQuillEditor"v-model="textContent.content":options="editorOption"@blur="onEditorBlur()"@focus="onEditorFocus()"@ready="onEditorReady()"@change="onEditorChange()"/><el-buttonclass="button"size="small"type="primary"@click="handleSendData">保存/发布</el-button></div></template><script>import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";import { quillEditor } from "vue-quill-editor";import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用Quill.register("modules/imageDrop", ImageDrop); // 注册Quill.register("modules/imageResize", ImageResize); // 注册export default {components: { quillEditor },data() {return {textContent: {content: "",textShow: false,},editorOption: {placeholder: "请输入需要编写的内容...",modules: {imageDrop: true, //图片拖拽imageResize: {//放大缩小displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},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: ["12","14","16","18","20","22","24","28","32","36",],},], // 字体大小[{ header: [1, 2, 3, 4, 5, 6] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色// [{ font: ['songti'] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["image", "video"], // 链接、图片、视频],},},};},methods: {// 失去焦点事件onEditorBlur() {},// 获得焦点事件onEditorFocus() {},// 准备编辑器onEditorReady() {},// 内容改变事件onEditorChange() {},//保存按钮点击事件handleSendData() {this.$emit("sendContentData", this.textContent);},// 获取已有的文本内容getContent(e) {this.textContent.content = e;},},// watch: {// // 监听文本变化内容// content() {// console.log(this.content);// },// },};</script><style>/* 富文本框汉化 */.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {content: "10px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {content: "18px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {content: "32px";}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "文本";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: "标题6";}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";}/* 确认按钮 */.button {margin-top: 10px;}</style>

链接: 官方链接

总结

供自己学习笔记使用