vue.js uni-app Vue中实现富文本功能，适配小程序端，uniapp也可实现，vue-quill-editor适配小程序，将vue-quill-editor插件中的class样式换为style内联样式达到适配目的

1、Vue中实现富文本功能

1.1 拓展功能，上传图片从系统图片素材库中拉取图片，黏贴图片时，图片也存入图片素材库中

2、将自带的class样式换为style内联样式

3、适配小程序端（仅展示，不需要编辑）

4、小程序端新增编辑富文本

1、Vue中实现富文本功能

使用插件 vue-quill-editor ，先下载插件

npm insatll --save vue-quill-editor

在main.js 中引入

import VueQuillEditor from 'vue-quill-editor' //富文本

import * as Quill from 'quill'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

封装富文本组件 textEditor uploadPictures 为图片素材库 ，引入自己的素材库， vxe-model 是vxe 插件的弹框组件 diyConfig 为组件传参，默认file，调用本地电脑上的图片，libImgStore为使用素材库中的图片 imgData 为调用图片素材库时必要的传参 getContent 为编辑时富文本Html传参

函数 editorFn 回调函数 返回值进行下一步处理

// 组件 textEditor.vue

在页面中使用

:diyConfig="{image:'libImgStore'}" :imageData="{storeId: form.storeId,isChoice:'多选'}"

style="width:340px;" @editorFn="editorFn">

此时富文本已经可以使用了

2、 将自带的class样式换为style内联样式

可以参考文档 https://www.kancloud.cn/liuwave/quill/1409946#_61

将main.js 中引入的文件换为 下面文件

import VueQuillEditor from 'vue-quill-editor' //富文本

import * as Quill from 'quill'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

// 设置字体大小

const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上

fontSizeStyle.whitelist = [ '14px', '16px', '18px', '20px', '24px', '28px', '32px']

Quill.register(fontSizeStyle, true)

const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上

const fonts = [

'SimSun',

'SimHei',

'Microsoft-YaHei',

'KaiTi',

'FangSong'

]

Font.whitelist = fonts // 将字体加入到白名单

Quill.register(Font, true)

var Align = Quill.import('attributors/style/align')

Quill.register(Align, true)

var Direction = Quill.import('attributors/style/direction')

Quill.register(Direction, true)

Vue.use(VueQuillEditor);

中间这个部分 会在写入样式时，写入style样式，达到目的 其中的 whitelist 、fonts、这两个数组赋值，是将富文本自带的数组换为自定义的数组了

查看原本数据 可以 console.log(Quill.imports) 单独打印出来看

3、 小程序中展示（仅展示，不编辑）

使用uview 中自带的富文本功能，Parse只需把富文本传值传入即可展示，对应的样式查看官方文档 https://v1.uviewui.com/components/parse.html 基本使用，长按复制，样式设置 等功能都能满足 （注意有1.0版本和2.0 版本）根据下载的插件看不同版本的文档

4、小程序中新增、编辑管理端中存入的富文本

1、下载插件

https://ext.dcloud.net.cn/plugin?id=12013 富文本插件 下载到自己项目中

2、把不需要的功能屏蔽，或者如果有满足不了的可以自己开发。

源码中 上传图片代码有两处，根据平台不同，找到对应代码，图片我默认给宽度100%了，所以我控制了不让调整大小，更剧自己需求具体适配 在微信小程序中适配是 // #ifdef MP 从这以下的代码

添加一个参数用来控制富文本的样式 ，我主要是用来更改他的高度

下载插件后的代码 piaoyi-editor 更改完后的代码，可直接复制替换

插件已经修改为成后，就可以在页面中使用了

3、在页面中使用

注意下面部分需要换成自己的接口 完整代码 如下

相关链接

 您阅读本篇文章共花了：