富文本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);

巴特西

富文本KindEditor使用

最新文章

热门文章