平台兼容性

富文本组件加强 js 工具

加强、优化富文本（rich-text）组件，调用方便，可配置，大幅度优化富文本组件；

作者 : graceUI

GraceUI 极速开发之旅 兼容uni-app及微信小程序的优秀前端框架，大幅度提高布局效率! GraceUI 自发布以来已经受到超过1000名网友支持， 我们不断更新、新增组件及界面库！ 目前 graceUI 已经包含:

1. 38 个基础组件
2. 28 个界面
3. 表单验证模块
4. 电子商城前端UI套装
5. js 常用工具库 您不必再去费力的布局，有 graceUI 就够了 ^_^

GraceUI 官网

http://grace.hcoder.net/

基础优化

已经优化的标签 : div h1-6 p b strong code img blockquote ul li table td 自动转换的标签 : pre (用于展示代码类内容)

    // 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 样式
    ['p', "font-size:1em; line-height:2em;"],
    // 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%; margin:8px 0;"],
    // 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', "width:100%; border-left:1px solid #F2F3F4; border-top:1px solid #F2F3F4;"],
    ['th', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4;"],
    ['td', "border-right:1px solid #F2F3F4; border-bottom:1px solid #F2F3F4; padding-left:5px;"]

根据项目的实际需求添加、修改此处配置即可获得更美观、更好用的富文本组件！

目录结构

|_ static
    |_ richText.js
|_ pages
    |_ ......

调用演示

<template>
    <view>
        <view class="grace-rich-text">
            <rich-text type="text" :nodes="demoHtml"></rich-text>
        </view>
    </view>
</template>
<script>
var _self;
var graceRichText = require("../../static/richText.js");
export default {
    data() {
        return {
            demoHtml : ''
        };
    },
    onLoad:function(){
        _self = this;
        // 加载 html 内容
        uni.request({
            url:'http://grace.hcoder.net/richTextDemo.php',
            success:function(res){
                // 强化 richText
                _self.demoHtml = graceRichText.format(res.data);
            }
        });
    },
    methods:{

    }
}
</script>
<style>
view{font-size:28upx;}
.grace-rich-text{padding:10upx 30upx;}
</style>