`

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']
        ]
    });

1
0
分享到:
评论

相关推荐

    ckeditor4.2.2自定义配置

    自定义CKEditor配置主要通过修改`config.js`文件来实现。这个文件通常位于CKEditor的根目录下,用于定义编辑器的各种设置,如工具栏按钮、语言、默认样式等。例如,如果你想禁用某些默认的工具栏按钮,可以在`...

    ckeditor的详细配置

    ### ckeditor的详细配置 ckeditor是一款非常流行的富文本编辑器,它是FCKeditor的后续版本,广泛应用于网页开发中,支持多种浏览器环境。本文将详细阐述如何进行ckeditor的基本配置及高级定制,帮助开发者更好地...

    ckeditor+ckfinder配置实现图片上传实例

    在本文中,我们将深入探讨如何使用CKEditor和CKFinder配置一个图片上传的实例。CKEditor是一款功能强大的在线文本编辑器,而CKFinder则是一个与之配套的文件管理器,允许用户方便地上传、管理和选择图片或其他文件。...

    ckeditor及配置方法

    **ckeditor及配置方法** ...总结,CKEditor是一个强大且灵活的富文本编辑器,通过合理的配置和API使用,可以轻松集成到你的项目中,提升用户体验。了解其配置和API,能帮助你定制出满足特定需求的在线编辑环境。

    ckeditor4完整配置说明

    CKeditor的完整toolbar配置说明,很多人不知道,其他它就在sample下面。我单摘出来,方便大家查看

    ckeditor配置(详细)

    ### CKEditor配置详解 CKEditor是一款广泛应用于网页开发中的富文本编辑器,它提供了丰富的文本编辑功能,如格式化文本、插入图片、链接等,极大地提升了用户在网页上的编辑体验。本文将深入解析CKEditor的配置方法...

    ckeditor配置上传视频

    最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...

    ckeditor+ckfinder配置

    3. **配置CKEditor**:在需要使用CKEditor的页面中,引入CKEditor的JavaScript文件,并配置CKFinder的路径。例如: ```html &lt;script src="js/ckeditor/ckeditor.js"&gt; CKEDITOR.replace('editor', { ...

    CKeditor的详细配置文档

    ### CKeditor的详细配置知识点 #### 一、简介与历史沿革 CKEditor是一款非常流行的开源富文本编辑器,最初名为FCKeditor。随着时间的发展,它经历了多次版本更新和技术革新,尤其是在升级至3.0版本时,进行了大...

    ASP+Ckeditor上传图片配置Demo和文档说明

    - 文档中可能会涵盖错误处理、自定义配置以及与其他ASP.NET功能(如用户权限控制)集成的方法。 7. **实际应用**: - 这个Demo可能包含了一个完整的ASP.NET Web应用程序,演示了CKEditor如何在实际项目中工作,...

    ckeditor5 v19配置文件完整版.

    ckeditor5 v19完整配置文件,含教程及源文件,index.html调用文件及配置文件为单独文件,可以用于复制替换及学习,提醒个别插件必须在网站调试模式下才能正常显示工具,ckfinder需要自行从网上下载,默认为放在网站...

    ckeditor3.6配置

    以上配置展示了如何自定义 CKEditor 的工具栏,包括显示哪些按钮以及它们的顺序。 #### 四、总结 通过上述步骤,您可以成功地在 ASP.NET 和 HTML 页面中集成并配置 CKEditor 3.6。CKEditor 的强大功能和灵活性使其...

    最新ckeditor_ckfinder整合超完整版 for PHP 附ckeditor完整中文配置

    对于"最新ckeditor_ckfinder整合超完整版.doc"这个文件,它可能包含了详细的整合步骤、配置示例,以及可能遇到的问题解决方案。建议仔细阅读文档,以确保成功集成并优化CKEditor和CKFinder的使用体验。 总之,通过...

    CKeditor3.0详细配置[定义].pdf

    CKeditor 3.0版本是其历史上的一个重要里程碑,提供了一套详尽的配置选项,使得开发者可以根据需求定制编辑器的功能和外观。以下将详细介绍CKeditor 3.0的一些关键知识点。 1. **CKeditor的特点与用途**: - ...

    文本编辑器CKEditor 3使用配置和图片上传实现实例

    文本编辑器CKEditor 3使用配置和图片上传实现实例,里面包含了一个项目源代码和使用文档。项目经过自己的测试,是成功的,但里面还包含了其他程序代码没有去掉,不会影响的。 项目是使用jsp+struts 1.2实现。

    CKEditor使用介绍

    在本文中,我们将深入探讨CKEditor的使用,包括如何集成到ASP.NET项目中,以及如何利用C#和VS2010进行配置和定制。 一、CKEditor的安装与引入 1. 首先,你需要下载CKEditor的开发包。这通常是一个.zip或.tar.gz...

    CKeditor配置使用[参照].pdf

    在本文中,我们将深入探讨如何配置和使用CKeditor,以及它的一些关键配置参数。 首先,要使用CKeditor,你需要从其官方网站[http://ckeditor.com/](http://ckeditor.com/)下载所需版本。在这个例子中,我们使用的是...

    asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码

    为了使CKEditor5能够与这个后端接口交互,我们需要配置CKEditor5的图片上传插件。在JavaScript中设置`uploadUrl`属性指向`UploadImage`方法的URL,并启用图片上传功能: ```javascript ClassicEditor .create...

    ckeditor+ckfindr配置

    【ckeditor+ckfinder 配置】是将两个流行的开源富文本编辑器集成在一起,以便在ASP环境下实现...但一旦成功配置,它将为你的ASP网页提供一个功能强大且易于使用的在线编辑环境,满足用户对文档编辑和文件管理的需求。

Global site tag (gtag.js) - Google Analytics