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

慈云数据 2024-05-14 技术支持 58 0

1、Vue中实现富文本功能

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

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

3、适配小程序端(仅展示,不需要编辑)

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

1、Vue中实现富文本功能

  1. 使用插件 vue-quill-editor ,先下载插件
npm insatll --save vue-quill-editor
  1. 在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);
  1. 封装富文本组件 textEditor

    uploadPictures 为图片素材库 ,引入自己的素材库,

    vxe-model 是vxe 插件的弹框组件

    diyConfig 为组件传参,默认file,调用本地电脑上的图片,libImgStore为使用素材库中的图片

    imgData 为调用图片素材库时必要的传参

    getContent 为编辑时富文本Html传参

函数

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

// 组件 textEditor.vue

  
素材库
// 图片素材库引入 uploadPictures import uploadPictures from '@/components/uploadPictures'; import axios from "axios"; export default { props: { getContent:{ type: String, default:"" }, diyConfig:{//自定义配置 type: Object, default:()=>{ return { image:'file',//file 上传图片从电脑文件中选择,libImgStore 微商城素材库 } } }, imageData:{ type: Object, default:()=>{ return {}// storeId 店号,isChoice:多选单选 } } }, components: { uploadPictures, }, mounted() { this.$nextTick(() => { const quill = this.$refs.myTextEditor.quill quill.root.addEventListener('paste', this.handlePaste) //获取图片库中的分类 if(this.diyConfig.image == 'libImgStore'){ this.getClassList() } }) }, data() { return { content: null, editorOption: { modules: { toolbar:{ container:[ ["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: ["small", false, "large", "huge"] size: ['14px', '16px', '18px', '20px', '24px', '28px', '32px'] }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong'] }], // 字体种类 [{ align: [] }], // 对齐方式 ["clean"], // 清除文本格式 ["link", "image", "video"] // 链接、图片、视频 ],//工具菜单栏配置 handlers: { 'image': (e)=>this.imageHandle(e,this.quill) } } }, placeholder: '添加内容...', //提示 readyOnly: false, //是否只读 theme: 'snow', //主题 snow/bubble syntax: true, //语法检测 }, modalPic: false, isHandlingImage: false, } }, directives: { quillImageAdded: { bind(el, binding) { el.addEventListener('paste', (event) => { console.log(event,"paste") if (event.target.tagName === 'IMG') { binding.value(event.target.src); } }); } } }, methods: { // 失去焦点 onEditorBlur() { // console.log(editor) }, // 获得焦点 onEditorFocus() { // console.log(editor) }, // 开始 onEditorReady() { // console.log(editor) }, // 值发生变化 onEditorChange(editor) { this.content = editor.html; this.$emit('update:editor', this.content) this.$emit('editorFn', this.content) }, clearContent() { this.content = '' }, getClassList(){ this.$http.GET('/MA/mallPsdClassify/psdClassList').then(data => { this.classList = data.data this.formDatas[1].options = data.data.map(item => { item.value = item.classifyId; item.name = item.classifyId + '--' + item.classifyName; return item; }); }) }, imageHandle(e,quill){ if(this.diyConfig && this.diyConfig.image == 'libImgStore'){ if (e) { alert('点击了上传图片') } else { quill.format('image', false); } }else{ quill.format('image', ''); } }, // 获取图片信息 getPic(pc) { let quill = this.$refs.myTextEditor.quill; const range = quill.getSelection(true); console.log(pc,"pc",range) if (!range) return; quill.insertEmbed(range.index, "image", pc.picUrl); this.modalPic = false; }, getPicD(pc) { let quill = this.$refs.myTextEditor.quill; const range = quill.getSelection(true); if (!range) return; // 将图片插入到富文本编辑器中 pc.reverse() pc.forEach(element => { quill.insertEmbed(range.index, "image", element.picUrl); }); this.modalPic = false; }, handlePaste(event) { const clipboardData = event.clipboardData || window.clipboardData if (!clipboardData) return const items = clipboardData.items if (!items) return for (let i = 0; i { if (res.data.code==200 && res.data.data.url!=null) { // 上传成功将照片传回父组件 const imageUrl = res.data.data.url; let obj = { classifyId:this.classList[0].classifyId, classifyName: this.classList[0].classifyName, media_id: res.data.data.media_id, picUrl: imageUrl, picName: file.name, } //图片上传成功后添加到图片素材库分类中 this.$http.POSTJSON("/MA/mallPsdClassifyRef/merge", [obj]) .then(data => { if (data.code == 200) { this.delDiyImg() // // 上传成功后,在富文本框中插入图片 const quill = this.$refs.myTextEditor.quill const range = quill.getSelection(true) quill.insertEmbed(range.index, 'image', imageUrl) quill.setSelection(range.index + 1) // this.onEditorChange({html:this.content}) // 在富文本框中展示图片 // 如果你不想展示上传失败的图片,则可以省略这一步 // quill.format('image', imageUrl) }else{ this.$message.warning("图片上传失败1!") this.delDiyImg() } }); }else{ this.$message.warning("图片上传失败2!") this.delDiyImg() } this.isHandlingImage = false; }).catch(err=>{ console.log(err,"err") this.$message.warning("图片上传失败3!") this.delDiyImg() this.isHandlingImage = false; }) } }, delDiyImg(){ const quill = this.$refs.myTextEditor.quill const index = quill.getSelection().index quill.deleteText(index-1, 1) } }, computed: { editor() { return this.$refs.myTextEditor.quillEditor; } }, watch: { getContent: { handler(newVal) { console.log(newVal,"newVal") this.content = newVal; }, immediate: true }, diyConfig: { handler(newVal) { if(newVal && newVal.image == 'libImgStore'){ let that = this this.editorOption.modules.toolbar.handlers.image = function(val){ if (val) { that.modalPic = true; } else { this.quill.format('image', false); } } }else{ delete this.editorOption.modules.toolbar.handlers.image } }, immediate: true } } } .ql-editor u ,.ql-snow u{ text-decoration: underline; } .ql-editor s,del , .ql-snow s,del{ text-decoration: line-through; } .ql-editor i,em , .ql-snow i,em{ font-style: italic; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before { content: "黑体"; font-family: "SimHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before { content: "微软雅黑"; font-family: "Microsoft YaHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before { content: "楷体"; font-family: "KaiTi"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before { content: "仿宋"; font-family: "FangSong"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before { content: "Arial"; font-family: "Arial"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before { content: "Times New Roman"; font-family: "Times New Roman"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before { content: "sans-serif"; font-family: "sans-serif"; } .ql-font-SimSun { font-family: "SimSun"; } .ql-font-SimHei { font-family: "SimHei"; } .ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; } .ql-font-KaiTi { font-family: "KaiTi"; } .ql-font-FangSong { font-family: "FangSong"; } .ql-font-Arial { font-family: "Arial"; } .ql-font-Times-New-Roman { font-family: "Times New Roman"; } .ql-font-sans-serif { font-family: "sans-serif"; } /* 字号设置 */ /* 默认字号 */ .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="14px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: "14px"; font-size: 14px; } .ql-size-14px { font-size: 14px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: "16px"; font-size: 16px; } .ql-size-16px { font-size: 16px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: "18px"; font-size: 18px; } .ql-size-18px { font-size: 18px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: "20px"; font-size: 20px; } .ql-size-20px { font-size: 20px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: "24px"; font-size: 24px; } .ql-size-24px { font-size: 24px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { content: "26px"; font-size: 26px; } .ql-size-26px { font-size: 26px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: "28px"; font-size: 28px; } .ql-size-28px { font-size: 28px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: "32px"; font-size: 32px; } .ql-size-32px { font-size: 32px; } .editor { line-height: normal !important; } .ql-snow .ql-tooltip[data-mode=link]::before { content: "请输入链接地址:" !important; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: '保存' !important; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode=video]::before { content: "请输入视频地址:" !important; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: '文本' !important; } .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' !important; } .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' !important; } .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' !important; } .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' !important; } .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' !important; } .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' !important; } .quill-editor .ql-editor .ql-container img{ max-width: 400px; }

在页面中使用

 

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

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 更改完后的代码,可直接复制替换

	
		
			
				
					
					
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
						
					
						
						
						
						
						
					
					
					
					
				
			
		
	


	import PickerColor from "./color-picker.vue"
	export default {
		components: {
			PickerColor
		},
		props: {
			api: {
				type: String,
				default: ''
			},
			photoUrl: {
				type: String,
				default: ''
			},
			values: {
				type: String,
				default: ''
			},
			readOnly: {
				type: Boolean,
				default: false
			},
			maxlength: {
				type: Number,
				default: 300
			},
			name: {
				type: String,
				default: 'file'
			},
			editStyle: {
				type: Object,
				default: ()=>{}
			},
		},
		data() {
			return {
				currentTab: 0,
				curColor: '#000000',
				show: true,
				hdid: "",
				myHtml: "",
				formats: {}
			}
		},
		methods: {
			showPicker() {
				this.$refs.colorPicker.open()
			},
			confirm(e) {
				this.editorCtx.format('color', e.hex)
			},
			saveContens() {
				let that = this;
				let maxlength = parseInt(that.maxlength);
				that.editorCtx.getContents({
					success: function(res) {
						let html_text = res.html;
						let html_length = html_text.length;
						if (html_length > maxlength) {
							uni.showmodal({
								title: '最多只能输入' + maxlength + '字',
								confirmText: '确定',
								showCancel: false,
								success(res) {
									that.$emit("changes", {
										html: res.html,
										length: html_length
									});
								}
							});
						} else {
							that.$emit("changes", {
								html: res.html=='


'?'':res.html, length: html_length }); } }, }) }, update() { //获取一下是否有数据 let that = this; setTimeout(() => { that.editorCtx.setContents({ "html": that.values }); }, 1000) }, onEditorReady() { let that = this; uni.createSelectorQuery().in(this).select('#editor').context((res) => { that.editorCtx = res.context; that.update(); }).exec((result) => {}); }, undo() { this.editorCtx.undo() }, redo() { this.editorCtx.redo() }, format(e) { let { name, value } = e.target.dataset if (!name) return if (name == 'color') { this.showPicker() } else { this.editorCtx.format(name, value) } }, onStatusChange(e) { const formats = e.detail this.formats = formats }, insertDivider() { this.editorCtx.insertDivider(); }, clear() { let that = this this.editorCtx.clear({ success: res=>{ this.$emit("changes",{html:""}) } }); }, insertDate() { const date = new Date() const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}` this.editorCtx.insertText({ text: formatDate }) }, insertImage() { let that = this; // #ifdef APP-PLUS || H5 uni.chooseImage({ count: 1, //默认9 sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album'], //从相册或者相机选择 success: (res) => { const tempFilePaths = res.tempFilePaths[0] if (!this.api || !this.photoUrl) { that.editorCtx.insertImage({ src: tempFilePaths, alt: '图像', success: function() {} }) uni.showToast({ title: '未传入api字段或者photoUrl字段,此为临时图片路径', duration: 3000, icon: 'none' }) } else { uni.uploadFile({ url: this.photoUrl + this.api, filePath: tempFilePaths, name: this.name, formData: {}, success: (uploadFileRes) => { var obj = JSON.parse(uploadFileRes.data) if (obj.code == 200) { this.img = this.photoUrl + '/' + obj.data wx.showToast({ title: obj.msg, icon: 'none' }) this.editorCtx.insertImage({ src: this.img, alt: '图像', width: "100%", success: function() { const imageElement = document.querySelector('.custom-image-class'); console.log(imageElement,"imageElement") if (imageElement) { imageElement.style.width = '100%'; // 设置宽度为20px } } }) } else { wx.showToast({ title: obj.msg, icon: 'none' }) } } }); } }, fail() { uni.showToast({ title: '未授权访问相册权限,请授权后使用', icon: 'none' }) } }); // #endif // #ifdef MP uni.chooseMedia({ count: 1, mediaType: ['image'], sourceType: ['album'], sizeType: 'compressed', success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFiles[0].tempFilePath; console.log(tempFilePaths) if (!this.api || !this.photoUrl) { that.editorCtx.insertImage({ src: tempFilePaths, alt: '图像', success: function() {} }) uni.showToast({ title: '未传入api字段或者photoUrl字段,此为临时图片路径', duration: 3000, icon: 'none' }) } else { uni.uploadFile({ url: this.photoUrl + this.api, filePath: tempFilePaths, name: this.name, formData: {}, success: (uploadFileRes) => { var obj = JSON.parse(uploadFileRes.data) console.log(obj,"uploadFileRes") if (obj.code == 200) { // this.img = path + '/' + obj.data this.img = obj.data.url wx.showToast({ title: obj.msg, icon: 'none' }) this.editorCtx.insertImage({ src: this.img, alt: '图像', width: "100%", success: function() {} }) } else { wx.showToast({ title: obj.msg, icon: 'none' }) } }, fail(err) { console.log(err) uni.showToast({ title: err.errMsg, icon: 'none' }) } }); } } }) // #endif } } } @import url('iconfont.css'); .tabs { display: flex; justify-content: space-around; background-color: #FFFFFF; } .tabs .current { border-bottom: 2px solid #0369D6; } .tabs .tab { font-size: 32upx; } .main { padding: 20upx; background-color: #FFFFFF; } .main .item { display: flex; justify-content: space-between; line-height: 80upx; border-bottom: 1px solid #F2F2F2; } .main .item .left { min-width: 200upx; } .main .title { padding-bottom: 20upx; font-weight: bold; border-bottom: 1px solid #F2F2F2; } .main .textarea { border: 1px solid #F2F2F2; } .wrapper { padding: 0 10upx; } .iconfont { display: inline-block; width: 9%; cursor: pointer; font-size: 40upx !important; text-align: center; padding: 10upx 0; } .icon-rili4 { font-size: 48upx !important; } .icon-duanqianju, .icon-duanhouju, .icon-zitijiacu, .icon-zitixieti, .icon-zitixiahuaxian, .icon-shanchuxian { font-size: 36upx !important; } .toolbar { box-sizing: border-box; border-bottom: 0; margin-bottom: 10upx; } .ql-container { box-sizing: border-box; width: 100%; min-height: 600upx; height: auto; background: #fff; font-size: 32upx; line-height: 1; padding-bottom: 60upx; } /deep/ .ql-editor.ql-blank:before { font-size: 28upx; font-style: inherit; } .ql-active { color: #ff0000; } button { width: 150upx; font-size: 30upx; } .editor { color: #333; }

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

3、在页面中使用

注意下面部分需要换成自己的接口

在这里插入图片描述

完整代码 如下

	
		
		
			
				确认
			
		
	


	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		data() {
			return {
				readOnly: false, //是否只读
				photoUrl: '', //服务器图片域名或者ip
				api: '/wechat/media/uploadMedia', //上传图片接口地址
				txt: '',
				name: 'file',
				desc: '11111222',
				editStyle: {
					height: "calc(100vh - 130px)",
				}
			};
		},
		components: {
			piaoyiEditor
		},
		onLoad(option){
			this.desc = decodeURIComponent(option.desc);
			this.txt = this.desc;
		},
		onShow() {
			this.photoUrl = this.$common.api_url+this.$common.fileserver;
			this.api = `/wechat/media/uploadMedia?type=image&storeId=${uni.getStorageSync('shopNo')}`;
		}, 
		methods: {
			saveContens(e) {
				console.log(e,"e")
				this.txt = e.html
			},
			submit(){
				let that = this;
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2];
				uni.navigateBack({
					delta: 1,
					success() {
						prevPage.$vm.richTextSubmit(encodeURIComponent(that.txt));
					},
				})
			},
		},
	}


	.bottomBar{
		background: #fff;
	}
	.buttonSTY{
		width: 600rpx;
		text-align: center;
		background: #FC6B3A;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #f3f3f3;
		border-radius: 40rpx;
	}

微信扫一扫加客服

微信扫一扫加客服

点击启动AI问答
Draggable Icon