uni-app使用富文本组件 mp-html

目录

1. 安装 npm install mp-html
2.  vue页面
3. 富文本增加js组件 

安装 npm install mp-html

 vue页面

<template>
	<view class="gui-padding gui-margin-top" >
		<mp-html :content="content" />
	</view>
</template>

<script>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import graceRichText from '@/utils/fuwenben.js';
	var parserHtml = require("@/GraceUI5/js/parserHTML.js");
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				content:'',
			}
		},
		onLoad: function(options) {
			const item = JSON.parse(decodeURIComponent(options.item))
			this.content = graceRichText.format(item.content);
		}
	}
	
</script>

<style>
</style>

富文本增加js组件 

 fuwenben.js

/*
graceUI rich-text 加强工具
link : graceui.hcoder.net
author : [email protected] 深海
*/
 
// 正则变量
var graceRichTextReg;
 
// 批量替换的样式 [ 根据项目需求自行设置 ]
var GRT = [
	// div 样式
	// ['div', "line-height:2em;"],
	// h1 样式
	// ['h1', "font-size:3em; line-height:1.5em;"],
	// h2 样式
	// ['h2', "font-size:2em; line-height:1.8em;"],
	// h3 样式
	// ['h3', "font-size:1.6em; line-height:2em;"],
	// h4 样式
	// ['h4', "font-size:1.2em; line-height:2em;"],
	// h5 样式
	// ['h5', "font-size:1em; line-height:2em;"],
	// h6 样式
	// ['h6', "font-size:0.9em; line-height:2em;"],
	// p 样式
	 ['text', "font-size:1em;line-height:2em;"],
	 ['p', "font-size:1em;word-wrap: break-word;"],
	// b 样式
	// ['b', "font-size:1em; line-height:2em;"],
	// strong 样式
	// ['strong', "font-size:1em; line-height:2em;"],
	// code 样式
	// ['code', "font-size:1em; line-height:1.2em; background:#F6F7F8; padding:8px 2%; width:96%;"],
	// img 样式
	['img', "width:100%;margn:-10rpx"],
	// blockquote
	// ['blockquote', "font-size:1em; border-left:3px solid #D1D1D1; line-height:2em; border-radius:5px; background:#F6F7F8; padding:8px 2%;"],
	// li 样式
	// ['ul', "padding:5px 0; list-style:none; padding:0; margin:0;"],
	// ['li', "line-height:1.5em; padding:5px 0; list-style:none; padding:0; margin:0; margin-top:10px;"],
	// // table
	['table', "border:1px solid #616161;border-collapse: collapse;margin:5px 0;"],
	['th', "border-right:1px solid #616161; border-bottom:1px solid #616161;"],
	['td', "border-right:1px solid #616161; border-bottom:1px solid #616161; padding:5px;border-left:1px solid #616161;"]
];
 
 
module.exports = {
	format : function(html){
		html = html.replace(/<pre.*pre>?/gis, function(word){
			return word =  word.replace(/[\n]/gi,'');
			word =  word.replace(/    /gi,'<span style="padding-left:2em;"></span>');
			return word.replace(/[\t]/gi, '<span style="padding-left:2em;"></span>');
		});
		// html = html.replace(/<pre/gi, '<p style="font-size:1em; margin:12px 0; line-height:1.2em; background:#F6F7F8; border-radius:5px; padding:8px 4%; width:92%;"');
		html = html.replace(/<\/pre/gi,"</p");
		for(let i = 0; i < GRT.length; i++){
			graceRichTextReg = new RegExp('<'+GRT[i][0]+'>|<'+GRT[i][0]+' (.*?)>', 'gi');
			html = html.replace(graceRichTextReg , function(word){
				// 分析 dom 上是否带有 style=""
				if(word.indexOf('style=') != -1){
					var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
					return word.replace(regIn, '<'+ GRT[i][0] +'$1style="$2 ' + GRT[i][1] +'"$3$4>');
				}else{
					var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
					return word.replace(regIn, '<'+ GRT[i][0] +'$1 style="' + GRT[i][1] +'$2">');
				}
			});
		}
		return html;
	}
	
}

---

tip: 

• 解决连续数字、字母不自动换行 p标签：word-wrap: break-word;
• 解决pre不自动换行：white-space:pre-wrap;
• 合并表格的边框：border-collapse: collapse;

前

后