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']
]
});
分享到:
相关推荐
自定义CKEditor配置主要通过修改`config.js`文件来实现。这个文件通常位于CKEditor的根目录下,用于定义编辑器的各种设置,如工具栏按钮、语言、默认样式等。例如,如果你想禁用某些默认的工具栏按钮,可以在`...
### ckeditor的详细配置 ckeditor是一款非常流行的富文本编辑器,它是FCKeditor的后续版本,广泛应用于网页开发中,支持多种浏览器环境。本文将详细阐述如何进行ckeditor的基本配置及高级定制,帮助开发者更好地...
在本文中,我们将深入探讨如何使用CKEditor和CKFinder配置一个图片上传的实例。CKEditor是一款功能强大的在线文本编辑器,而CKFinder则是一个与之配套的文件管理器,允许用户方便地上传、管理和选择图片或其他文件。...
**ckeditor及配置方法** ...总结,CKEditor是一个强大且灵活的富文本编辑器,通过合理的配置和API使用,可以轻松集成到你的项目中,提升用户体验。了解其配置和API,能帮助你定制出满足特定需求的在线编辑环境。
CKeditor的完整toolbar配置说明,很多人不知道,其他它就在sample下面。我单摘出来,方便大家查看
### CKEditor配置详解 CKEditor是一款广泛应用于网页开发中的富文本编辑器,它提供了丰富的文本编辑功能,如格式化文本、插入图片、链接等,极大地提升了用户在网页上的编辑体验。本文将深入解析CKEditor的配置方法...
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
3. **配置CKEditor**:在需要使用CKEditor的页面中,引入CKEditor的JavaScript文件,并配置CKFinder的路径。例如: ```html <script src="js/ckeditor/ckeditor.js"> CKEDITOR.replace('editor', { ...
### CKeditor的详细配置知识点 #### 一、简介与历史沿革 CKEditor是一款非常流行的开源富文本编辑器,最初名为FCKeditor。随着时间的发展,它经历了多次版本更新和技术革新,尤其是在升级至3.0版本时,进行了大...
- 文档中可能会涵盖错误处理、自定义配置以及与其他ASP.NET功能(如用户权限控制)集成的方法。 7. **实际应用**: - 这个Demo可能包含了一个完整的ASP.NET Web应用程序,演示了CKEditor如何在实际项目中工作,...
ckeditor5 v19完整配置文件,含教程及源文件,index.html调用文件及配置文件为单独文件,可以用于复制替换及学习,提醒个别插件必须在网站调试模式下才能正常显示工具,ckfinder需要自行从网上下载,默认为放在网站...
以上配置展示了如何自定义 CKEditor 的工具栏,包括显示哪些按钮以及它们的顺序。 #### 四、总结 通过上述步骤,您可以成功地在 ASP.NET 和 HTML 页面中集成并配置 CKEditor 3.6。CKEditor 的强大功能和灵活性使其...
对于"最新ckeditor_ckfinder整合超完整版.doc"这个文件,它可能包含了详细的整合步骤、配置示例,以及可能遇到的问题解决方案。建议仔细阅读文档,以确保成功集成并优化CKEditor和CKFinder的使用体验。 总之,通过...
CKeditor 3.0版本是其历史上的一个重要里程碑,提供了一套详尽的配置选项,使得开发者可以根据需求定制编辑器的功能和外观。以下将详细介绍CKeditor 3.0的一些关键知识点。 1. **CKeditor的特点与用途**: - ...
文本编辑器CKEditor 3使用配置和图片上传实现实例,里面包含了一个项目源代码和使用文档。项目经过自己的测试,是成功的,但里面还包含了其他程序代码没有去掉,不会影响的。 项目是使用jsp+struts 1.2实现。
在本文中,我们将深入探讨CKEditor的使用,包括如何集成到ASP.NET项目中,以及如何利用C#和VS2010进行配置和定制。 一、CKEditor的安装与引入 1. 首先,你需要下载CKEditor的开发包。这通常是一个.zip或.tar.gz...
在本文中,我们将深入探讨如何配置和使用CKeditor,以及它的一些关键配置参数。 首先,要使用CKeditor,你需要从其官方网站[http://ckeditor.com/](http://ckeditor.com/)下载所需版本。在这个例子中,我们使用的是...
为了使CKEditor5能够与这个后端接口交互,我们需要配置CKEditor5的图片上传插件。在JavaScript中设置`uploadUrl`属性指向`UploadImage`方法的URL,并启用图片上传功能: ```javascript ClassicEditor .create...
【ckeditor+ckfinder 配置】是将两个流行的开源富文本编辑器集成在一起,以便在ASP环境下实现...但一旦成功配置,它将为你的ASP网页提供一个功能强大且易于使用的在线编辑环境,满足用户对文档编辑和文件管理的需求。