其他分享
首页 > 其他分享> > guns集成wangediter步骤

guns集成wangediter步骤

作者:互联网

guns的消息模块已经集成了wangediter富文本,可以直接参考。

本人再参考的过程中因理解不深,导致走了很多弯路,把弯路记录下,希望能帮助其他人少踩坑。

 

首先改js,您的模块_info.js 改动内容

var XXInfoDlg = {

editor: null,// 此处要添加个富文本对象

    XXInfoData : {}

};

然后初始化富文本到页面中,修改最下面的初始化方法

$(function() {
//下面是全部要添加的
     var E = window.wangEditor;
        var editor = new E('#editor');//这个是页面中div的id,用于初始化富文本
        editor.create();
        editor.txt.html($("#contentVal").val());//这个是编辑页面要用的,吧信息回写到富文本中
        XXInfoDlg.editor = editor;
});

最后是收集数据方法改造

/**
 * 收集数据
 */
BooklistInfoDlg.collectData = function() {
    this
    .set('id')
    .set('creattime') 
    .set('context',BooklistInfoDlg.editor.txt.html());//添加此处,把富文本值放到变量中国呢,即你传入后台的内容变量 context ,次变量要根据自己实体定义的内容一致。
}

js大概改这几个地方就ok了。

html页面修改, 添加页面修改

首先最底部要加富文本依赖js  

<script type="text/javascript" src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>

然后添加div用于显示富文本的

     <div class="col-sm-12">
         <div id="editor" class="editorHeight"><!-- div的id  editor 和js对应 -->
         </div>
     </div>

 

 

修改页面改造

定义一个隐藏表单域 用于接受后台传来的富文本信息,富文本不能直接接受后台的数据。

<input type="hidden" id="contentVal" value='${后台数据}'>   这个id就是上面提到的用于编辑初始化富文本内容的。

 

同时添加div用于显示富文本的

     <div class="col-sm-12">
         <div id="editor" class="editorHeight"><!-- div的id  editor 和js对应 -->
         </div>
     </div>

 

 

标签:集成,初始化,js,添加,editor,wangediter,文本,guns,页面
来源: https://www.cnblogs.com/myhanghang/p/10386842.html