【kindeditor】kindeditor的使用

原创

wx58f0846670609 2021-07-15 15:38:56 ©著作权

文章标签 IT 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wx58f0846670609的原创作品，请联系作者获取转载授权，否则将追究法律责任

官网：http://kindeditor.net/demo.php

效果:

0.下载文档

1.引入核心文件(CSS与JS)

　　items可以设置需要显示的控件

<!-- 编辑器 -->
<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.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="liuyan.content"]', {
            resizeType : 1,
            allowPreviewEmoticons : false,
            allowImageUpload : true,
            pasteType : 0, //设置能否粘贴
            items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor',
                    'bold', 'italic', 'underline', 'removeformat', '|',
                    'justifyleft', 'justifycenter', 'justifyright',
                    'insertorderedlist', 'insertunorderedlist', '|',
                    'emoticons', 'image', 'link' ]
        });
        // 同步数据后可以直接取得textarea的value
        editor.sync();
    });
</script>

2.页面准备textarea

        <!--编辑留言区域-->
        发表您的留言:<br />
        <form action="1.action" method="post" id="liuyanform">
            <textarea id="liuyan.content" name="liuyan.content"
                style="width: 100%;" class="el_editorBox"></textarea>
            <input type="hidden" name="liuyan.name"> <br>
            <p id="fabiao" class="btn btn-primary btn-sm" data-toggle="modal"
                data-target="#add">
                <span>发表</span>
            </p>
        </form>

3.处理的JS函数

　　判断编辑器是否为空以及获取编辑器的值异步ajax提交。

/**
 * 
 * Created by liqiang on 2017/10/1.
 */
$(function() {
    /**
     * 提交按钮点击事件，内容不为空 的时候打开模态框输入姓名
     */
    $("#fabiao").click(function() {
        editor.sync();
        // 判断内容区是否为空
        if (editor.isEmpty()) {
            alert("内容不能为空！");
            return;
        }
        $("#tijiaomotai").modal();
    });
    $("#tijiao").click(function() {
        $("input[name='liuyan.name']").val($("input[name='name']").val());
        $.ajax({
            url : 'myBlog/liuyan_addLiuyan.action',
            data : {
                'liuyan.content' : editor.html(),
                'liuyan.name' : $("input[name='name']").val()
            },
            type : 'POST',
            async : true,
            success : function(data) {
                alert(data);
                window.location.href = 'liuyan_getLiuyans.action';
            },
            error : function() {

            }
        });
    });

});