kindeditor(二) kindeditor与数据库交互

kingeditor数据插入数据库:

  //加载kindeditor
  var editor;
  KindEditor.options.filterMode = false;
     KindEditor.ready(function(K) {
       editor = K.create('textarea[name="messageContent"]]', {
    uploadJson : '${ctx}/static/common/kindeditor-4.1/jsp/upload_json.jsp', //指定上传图片的服务器端程序
    allowUpload : true,
    urlType : 'absolute',
                resizeType : 0,  //文本框不可拖动
    items : [  //配置工具栏
       'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
       'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
       'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
       
       afterCreate : function(){ //kindeditor创建后,将编辑器的内容设置到原来的textarea控件里
              this.sync();  
       },
       afterChange: function(){ //编辑器内容发生变化后,将编辑器的内容设置到原来的textarea控件里
              this.sync();  
       },
       afterBlur : function(){ //编辑器聚焦后,将编辑器的内容设置到原来的textarea控件里
           this.sync();
       } 
   });
    
     });

特别注意

你在富文本编辑框里面输入的值是存储在动态生成的iframe里的而不是textarea,所以需要将iframe的值赋给textarea,

this.sync();  这个方法封装了实现

 

数据库读取数据显示到kindeditor

 

$(document.getElementsByTagName('iframe')[0].contentWindow.document.body).html(data);

这句代码是获取动态生成的iframe并且设置它的值为数据库读取出来的值,它在富文本编辑器里会按原格式显示,

不能直接赋给textarea

 

 

你可能感兴趣的:(web前端html,css,js)