富文本KindEditor使用

1.官网down KindEditor,添加到自己的项目中;添加时可把不需要的文件夹干掉,asp/php等等。我的项目用的是纯html和js,直接调用后台api;

2.页面引入相关js。eclipse中打开min.js的时候可能会报错,直接忽略就可以,不影响使用。

<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>

3.编辑器初始化脚本。

<script type="text/javascript">
        KindEditor.ready(function(K){
            K.create('textarea[name="messagecontent"]', {
                themeType: 'simple',
                resizeType: 1,
                allowFileManager: true,
                //当失去焦点时执行 this.sync();
                afterBlur: function(){this.sync();}
            });
        });
    </script>

4.form表单添加文本域。

<textarea id="editor" name="messagecontent" style="width:700px;height:300px;"></textarea>

5.表单提交,如果不执行sync()函数,将无法获取到textarea的值。

function saveMsgInfo(){
    if($('#msgInfoForm').form('validate')){ 
        var formData = $("#msgInfoForm").serialize();
        formData = decodeURIComponent(formData,true);
        console.info(formData);
        $("#msgInfoForm").form("submit", {
            url:forceRefresh('msg/info/createMsgInfo'),
            onSubmit: function(param){
                param = formData;
            },
            success: function(data){
                
                
                
                
            }
        });
    }
}

6.文本域的清空和赋值

KindEditor.instances[0].html("");
KindEditor.instances[0].html(val);

 

posted on 2016-04-14 18:08  冰原小白狼  阅读(275)  评论(0)    收藏  举报

导航