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