富文本插件ckedit

所属分类:输入-丰富的输入

 6093  29  查看评论 (6)
富文本插件ckedit ie兼容8

CKEdit

CKEdit使用方法

引用CKEDITOR的JS文件:

新建JSP页面,添加其JS文件

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

注意:

1.src的路径。

2.不要写成

<script type="text/javascript" src="ckeditor/ckeditor.js />

样式,在现有的3.0.1版本中会出现CKEDITOR未定义的脚本错误提示,致使不能生成编辑器。

替换TEXTAREA标签:

<textarea rows="30" cols="50" name="editor01">请输入.</textarea>
<script type="text/javascript">CKEDITOR.replace('editor01');</script>

注意:要在textarea后面加入javascript.如果要在HEAD区写javasript,那么采用如下代码:

<script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.replace( 'editor01' );
    };
</script>

好了到此一个默认的CKEDITOR就配置完毕了,可以去页面看看它的模样了。

当然还有一个方法CKEDITOR.appendTo(elementOrId, config) 它可以在特定的dom对象中创建CKEDITOR

<div id="editorSpace"><:/div>
CKEDITOR.appendTo( 'editorSpace' );

属性配置:

所有的配置,都可以查阅官方的API:

IN-PAGE配置方式:

最好在创建编辑器的页面中配置你的编辑器属性,使用这种方式,你无需理会在CKEDITOR安装目录中的配置文件(ps:in-page的优先级最高).

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

注意:合法的属性是以“{”开始,“}”"结束,属性名和属性值用“:”隔离.

默认属性文件配置方式:

你也可以在config.js 中加入配置信息,当你打开该文件时你会发觉它几乎为空(默认)。你要做的是把配置信息加入其中。

CKEDITOR.editorConfig = function( config )
{
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

自定义属性文件配置方式:

CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

假设你在custom目录中有一自定义的配置文件ckeditor_config.js,那么就必须在创建ckeditor实例时制定它的路径(用customConfig属性)。


相关插件-丰富的输入

jquery仿牛客网的在线测评考试

实现在线模拟测评,仿照的是牛客网的测评页面
  丰富的输入
 5697  61

纯javript emoji表情插件(原创)

一个可拓展的纯js的emoji表情插件,支持移动端
  丰富的输入
 2573  17

jQuery可视化HTML编辑器插件xhedit

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
  丰富的输入
 12401  40

富文本编辑器NicEdit

NicEdit是一个轻量级,跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。
  丰富的输入
 16604  39

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    怀念★往事 0
    2017/6/2 16:29:01

    文字处理较少,

    无字体大小,颜色,对齐方式,下划线等功能

    回复
    1?5?8?0?7?3?3?4?0?0?0? 0
    2017/4/22 16:09:21
    最主要的就是要能上传本地图片 回复
    DOORn 0
    2017/2/17 10:25:39

    我觉得这款插件功能还是不错的,不过作者在图片上传,插入链接、表格这块的插入是不是功能显得多了一点。我是觉得这些都是给客服用的,他们根本不关心你怎么显示,反正你给我显示出来就行。作者表格删除很nice。本人拙见,作者自己斟酌。

    回复
    BIOSER 0
    2016/10/10 19:10:13
    字体颜色、大小都不能设置 回复
    无语 0
    2016/10/9 10:10:05
    不怎么好用,特别是图片不能本地上传。还不如wangeditor,ueditor。 回复
    seny 0
    2016/10/8 9:10:15
    很有帮助,谢谢分享 回复
取消回复