中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

Jquery集合

浏览声明

UI

分类插件

模态框

滚动轮播

拖拉排序

多选框

滚动条

Loading

移动端

提示框

功能性插件

瀑布流

  • CSS3立方体小照片
  • D3.js logo可视化库 D3.js
  • 图片处理

    banner特效

    富文本插件ckedit

    阅读 (2305)

    ie兼容8
    插件描述:在web上常会有需求做一个富文本输入和存储

    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属性)。




    关闭
    程序员人生