富文本插件ckeditor和kindeditor

来源：互联网发布：windows常用api 编辑：程序博客网时间：2024/05/17 22:26

cheditor插件：
ckeditor插件

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插件：

0 0