【js】kindeditor富文本编辑器的简单使用

首先去下载kindeditor的相关文件

引入css以及js

<link rel="stylesheet" href="js/kindeditor-4.1.10/themes/default/default.css">
<script src="js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script src="js/kindeditor-4.1.10/lang/zh_CN.js"></script>

准备一个隐藏的textarea

<body>
    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
</body>

然后进行简单的初始化

<script>
    //简单模式初始化
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="desc"]', {
            resizeType : 1,
            allowPreviewEmoticons : false,
            allowImageUpload : false,
            items : [
                'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                'insertunorderedlist', '|', 'emoticons', 'image', 'link']
        });
    });
</script>

效果如下:

【js】kindeditor富文本编辑器的简单使用

【js】kindeditor富文本编辑器的简单使用

相关推荐