当前位置: 代码迷 >> Web前端 >> ckeditor应用以及配置
  详细解决方案

ckeditor应用以及配置

热度:185   发布时间:2012-10-08 19:54:56.0
ckeditor使用以及配置
1.使用方式
  jsp页面中包含 <script type="text/javascript" src="<%= request.getContextPath() %>/km/knowledge/ckeditor/ckeditor.js"></script>
    <td class="label_left" colspan="6">
                  <html:textarea property="entity.mainContent" styleId="bottom" rows="100" cols="30" style="width: 30%; height: 100%" />
                  <br>
                </td>
              </tr>
              <script>
CKEDITOR.replace( 'entity.mainContent',
{
   fullPage : false,
   width:'100%'
          });

              </script>   

2.ckeditor工具栏的自定义
CKEditor 工具栏是一个JavaScript数组,数组里面包含了要显示的工具的名字。工具栏的命名规则为:“toolbar_<name>”, “<name>”是定义的工具栏名字。 下面代码中是CKEditor默认定义好的两个工具栏,“Full”和“Basic”,并且默认使用的是“Full”工具栏

config.toolbar = 'Full';

config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    ['BidiLtr', 'BidiRtl'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];




自定义工具栏
用户可以在config.js里自定义工具栏:

CKEDITOR.editorConfig = function( config )
{

    config.toolbar = 'MyToolbar';//把默认工具栏改为‘MyToolbar’

    config.toolbar_MyToolbar =
    [
        ['NewPage','Preview'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format'],
        ['Bold','Italic','Strike'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Link','Unlink','Anchor'],
        ['Maximize','-','About']
    ];
};



或者你也可以定义多个Toolbar,然后在不同的地方使用不同的toolbar属性的设置:

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'MyToolbar'
    });

CKEDITOR.replace( 'editor2',
    {
        toolbar : 'Basic'
    });
当然,你也可以在调用CKEditor的地方直接定义新的工具栏

CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

  相关解决方案