富文本插件ckeditor和kindeditor

cheditor插件：

1，引用js

src="${pageContext.request.contextPath}/resource/js/mtypt/common/ckeditor/ckeditor.js"></script>

2.定义文本区域

<textarea  id="editor_id" name="content" style="width:100%;height:300px;"></textarea>
<!-- 宽度最好定义上，不然可能会不显示-->

3.在js里面给textarea添加插件

var editer = CKEDITOR.replace('content');
<!-- content 是textarea的name-->
<!-- 定义editer是为了方便取值和赋值-->

4.富文本取值和赋值

<!--editer是添加插件的时候定义的对象-->
var editer_text = editer.document.getBody().getText();
<!--获取到不带格式的文本-->

var editer_format = editer.getData(); //带格式
<!--获取到带格式的文本-->

editer.document.getBody().setText();//赋值不带格式文本
editer.setData();//赋值带格式文本

5.ckeditor简单配置

在插件里找到config.js里面写配置

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = 'Basic';
    config.toolbar_Basic =
        [
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

                                               ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

                     ['Image','Table','HorizontalRule','Smiley','SpecialChar'],

                ['Styles','Format','Font','FontSize'],
                ['TextColor','BGColor']
        ];
};

toolbar_Basic 里面可以自定义富文本工具栏，具体详细配置可以百度

*******cheditor end************

kindeditor插件：