整合移动端vue富文本编辑器

近期将旧的商城系统统一迁移到JAVA商城平台，新的商城系统采用市场上成熟的产品。上线后将不使用默认的模板,我们将开发一套适合自己风格的模板。自带的手机端模板没有对移动端的自定义评论功能进行适配,我们将为它增加富文本功能。

使用的这套巡云商城系统对每个功能都分成模块，全部支持传统页面访问方式和json访问方式。

1.我们将新建一个布局

新1.png

2.在布局"查询添加评论页(移动版)"上添加版块

新2.png

3.打开单页应用模板布局文件

 模板： 全部模板  >> 新模板[new]  >> 单页应用模板(移动版)  >>  布局编辑

引入vue-html5-editor文件

<link href="${commonPath}js/vue-html5-editor/style.css" type="text/css" rel="stylesheet">
<script src="${commonPath}js/vue-html5-editor/vue-html5-editor.js" type="text/javascript"/>

增加评论模板

<!-- 自定义评论 -->
<template id="comment-template">
    <div>
        <div class="commentModule">
            <div class="button"><mt-button type="primary"  @click.native="addCommentUI();" style="height: 28px;font-size: 16px;">发表评论</mt-button></div>
        
            <!-- 发表评论 -->
            <mt-popup v-model="popup_comment" position="right" style="width: 100%;height: 100%;">
                <mt-header fixed title="发表评论" style="background: #fafafa; color: #000000;font-size: 14px">
                    <mt-button icon="back" @click.native="popup_comment = false" slot="left" >返回</mt-button>
                    <router-link to="/index" slot="right" @click.native="popup_comment = false" >
                        <span class="cms-home" style="font-size: 18px;"></span>
                    </router-link>
                </mt-header> 
                <div class="addCommentScroll">
                    <div class="box" >
                        <div class="addCommentForm" >
                            <ul>
                                <li>
                                    <editor :content="commentContent" :height="200" :z-index="99999" @change="updateData"></editor>
                                    <p class="tips">
                                        <span>{{error.commentContent}}</span>   
                                    </p>
                                </li>

                                <li style="margin-left: 10px;margin-right: 10px; margin-top: 10px; ">
                                    <mt-button  type="primary" size="large"  @click.native="addComment">提交</mt-button>
                                    <p class="tips">
                                        <span>{{error.customComment}}</span>    
                                    </p>
                                    
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </mt-popup>
        </div>
    </div>
</div>

4.增加评论js模块
打开移动版js文件

新3.png

增加js代码

//评论组件
var comment_component = Vue.extend({
    template : '#comment-template',
    data : function data() {
        return {
            popup_comment :false,//发表评论弹出层
            customItemId : '',//自定义评论项目Id
            commentContent:'',//发表评论内容
            showCaptcha : false, //是否显示验证码
            imgUrl : '', //验证码图片
            captchaKey : '', //验证码key
            captchaValue : '', //验证码value
            error : {
                commentContent: '',
                captchaValue : '',
                customComment: '',
            },
        };
    },
    created : function created() {
        //从URL中获取自定义评论项目Id
        this.customItemId = "5";//这里先固定测试这个
    },
    components:{
        
        //发表评论富文本
        "editor" : new VueHtml5Editor({
            name: "editor",
            language: "zh-cn",
            // 自定义各个图标的class，默认使用的是font-awesome提供的图标
            icons: {
                text: "fa fa-pencil",
                color: "fa fa-paint-brush",
                font: "fa fa-font",
                align: "fa fa-align-justify",
                list: "fa fa-list",
                link: "fa fa-link",
                unlink: "fa fa-unlink",
                tabulation: "fa fa-table",
                image: "fa fa-file-image-o",
                hr: "fa fa-minus",
                eraser: "fa fa-eraser",
                undo: "fa-undo fa",
                full: "fa fa-arrows-alt",
                info: "fa fa-info",
            },
            visibleModules: [
                "text",
                "color",
                "align",
                "link",
                "unlink",
                "eraser",
                "undo",
                "full-screen",
             ],
        })
    },
    methods : {

        //发表评论界面
        addCommentUI : function() {
            this.popup_comment = true;

            //查询添加评论页
            this.queryAddComment();
        },
        //查询添加评论页
        queryAddComment : function() {
        
            //是否显示验证码
            
        },
        //添加评论
        addComment : function(event) {
            if (!event._constructed) { //如果不存在这个属性,则不执行下面的函数
                return;
            }
            
            //提交内容
            
        },
        

        //vue-html5-editor 富文本编辑器更新值
        updateData: function(data) {
            this.commentContent = data;
        },
    }
});

增加css代码

.commentModule .addCommentScroll {
    width: 100%;
    height: 100%;
    background: #fff;
    right:0;
    margin-bottom: 0;
    border-bottom: none;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.commentModule .addCommentScroll .box{
    padding-top: 40px;
}
.commentModule .addCommentScroll .box .addCommentForm{margin-left:5px; margin-right: 5px;}
.commentModule .addCommentScroll .box .addCommentForm .tips{line-height:30px; margin-left: 115px}
.commentModule .addCommentScroll .box .addCommentForm .tips span{color: red;}
.commentModule .addCommentScroll .box .addCommentForm .tag{
    position: relative;min-height:40px;margin-top: 10px;
}

完成效果图

新4.png