- 浏览: 404671 次
- 性别:
- 来自: 哈尔滨
最新评论
-
springdata_springmvc:
如何在java Web项目中开发WebService接口,地址 ...
JAVA6开发WebService (二)——JAX-WS例子 -
springdata-jpa:
如何在java Web项目中开发WebService接口,地址 ...
JAVA6开发WebService (三)——几个概念 -
springmvc-freemarker:
如何在java Web项目中开发WebService接口,地址 ...
JAVA6开发WebService (一) -
yuanfen2014:
[color=red][/color] 学习了
jdom解析xml -
di1984HIT:
我很喜欢你对设计模式的理解。
JAVA设计模式学习笔记5——模版方法模式(Template Method Pattern)
配置CKEditor
主要有三种方式配置CKEditor,可以在 CKEditor API 中CKEDITOR.config 部分查看所有可配置选项。
一、在页面中配置
在页面中进行配置是CKEditor官方推荐的方式,这样可以避免修改CKEditor原始的配置文件,使得应用进行升级时更加便捷。可以在任意的创建CKEditor实例的方法中对其进行配置,如CKEDITOR.replace 和 CKEDITOR.appendTo :
CKEDITOR.replace( 'editor1', { toolbar : 'Basic', uiColor : '#9AB8F3' });
二、在config.js中配置
默认情况下,这个文件基本是空的,可以在这个文件中进行你所需配置,如:
CKEDITOR.editorConfig = function( config ) { config.language = 'fr'; config.uiColor = '#AADC6E'; };
三、自定义配置文件
若不想更改config.js文件,CKEditor 也允许用户自定义自己的配置文件。在任意位置创建一份config.js的拷贝,如在根目录下创建一个名为“custom”的文件夹,将config.js文件拷贝至此文件夹,并重命名为“ckeditor_config.js
”,这样,在创建CKEditor实例时,就可以指定此文件为CKEditor的配置文件:
CKEDITOR.replace( 'editor1', { customConfig : '/custom/ckeditor_config.js' });
定义工具栏
CKEditor提供了许多工具栏按钮,可以根据需要自由选择所需的部分。或使用 CKEditor 提供的两种的工具栏风格:
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'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['BidiLtr', 'BidiRtl'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'], '/', ['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'; 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'] ]; };
若应用中定义了多种工具栏风格,可在创建CKEditor实例时,为其指定一种:
CKEDITOR.replace( 'editor1', { toolbar : 'MyToolbar' }); CKEDITOR.replace( 'editor2', { toolbar : 'Basic' });
你也可以在创建实例时,直接为其定义工具栏选项:
CKEDITOR.replace( 'editor1', { toolbar : [ ['Styles', 'Format'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About'] ] });
样式
我们可以自定义CKEditor工具栏中“样式”下拉列表的内容,CKEditor提供了许多默认的样式,默认的样式列表定义在“plugins/styles/styles/default.js”文件中。可以通过如下形式定义自己的样式列表,并将其注册到
CKEditor中:
CKEDITOR.stylesSet.add( 'my_styles', [ // Block-level styles { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } }, { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } }, // Inline styles { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } }, { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } } // Object styles { name : 'A Style', element : 'a', attributes : { 'color':'#000','text-decoration':'none' } }, ]);
其中,“my_styles”是自定义样式的名称,必须是唯一的。定义好之后,就可以通知CKEditor实例使用这个样式了:
config.stylesSet = 'my_styles';
自定义的样式可以配置在config.js中、CKEditor实例的jsp页面,或者一个单独的文件,甚至一个已知的URL中,可以通过如下形式指定它的位置:
config.stylesSet = 'my_styles:/styles.js'; OR config.stylesSet = 'my_styles:http://www.example.com/styles.js';
一条自定义的样式包括:name、element、 attributes,和CSS样式的定义,如:
{ name : '在样式下拉列表中显示的名称', element : 'HTML元素的名称 (如 "span")', styles : { 'css-style1' : 'desired value', 'css-style2' : 'desired value', ... } attributes : { 'attribute-name1' : 'desired value', 'attribute-name2' : 'desired value', ... } }
其中,name
和 element元素是必选的,其它是可选的。
CKEditor有三种级别的元素样式,分别是:
Block-level styles(块级元素样式)
– 应用于文本块(段落)。适用于以下元素 These apply
to the following elements: address
, div
, h1
, h2
, h3
, h4
, h5
, h6
, p
, and pre
.
Object styles(对象元素样式)
– 应用于特殊的可被选择的对象(不是文本),当一个对象被选中之后才被显示。适用于以下对象: a
, embed
, hr
, img
, li
, object
, ol
, table
, td
, tr
and ul
.
Inline styles(内联元素样式) – 用于扩展被选中的文本样式。
发表评论
-
CKFinder2.x 入门 二
2011-07-08 17:28 11287破解 CKFinder是收费的,可是我们都比较 ... -
CKFinder2.x 入门
2011-07-08 16:04 6385CKFinder是一款强大的基于浏览器的ajax文件管 ... -
jxl 操作 Excel
2011-06-09 12:06 9687java 操作 Excel 最常用的就是JXL(jav ... -
CKEditor 3.6 入门
2011-05-20 11:28 8267有多种方法可以将CKEditor集成到你的页面中,下面是 ... -
JAVA6开发WebService (五)—— JAXB
2011-01-25 16:55 6941JAXB(Java API for XML Bindi ... -
多线程断点续传
2011-01-12 12:20 3740以前看过一个前辈写的断点续传的文章,记得当时没看懂,就 ... -
JAVA6开发WebService (四)——SAAJ调用WebService
2010-11-13 14:32 8543前面写了个JAX-WS的小例子,看到用JAVA6开发W ... -
JAVA6开发WebService (三)——几个概念
2010-11-11 17:00 18635要了解WebService,光能写 ... -
JAVA6开发WebService (二)——JAX-WS例子
2010-11-10 17:13 19736上一篇写了个最简单的小例子,只是为了说明JAVA6开发 ... -
JAVA6开发WebService (一)
2010-11-10 12:32 36015WebService ... -
InputStream、OutputStream、String的相互转换
2010-11-09 16:37 473971、字符串转inputStream String ... -
dom4j解析xml
2010-08-20 10:52 7283dom4j和jdom都是非常优秀的xml解析工具,但现 ... -
正则表达式
2010-05-17 16:39 1774先看一个用正则表达式校验Email的js方法 func ... -
Struts 1 和 Struts 2 的线程安全
2010-03-23 16:58 5699昨天人问我Struts 2是怎么保证全局变量的线程安全 ... -
oracle 字符串函数
2010-02-22 10:59 25941.LOWER 返回字符串的小写形式;select lower ... -
JAVA 集合类
2010-01-06 16:41 1284Collection├List│├LinkedLi ... -
JAVA 线程学习笔记--同步
2009-12-30 16:37 1531为了确保可以在线程之间以受控方式共享数据,Java 语言提供了 ... -
JAVA 线程学习笔记
2009-12-30 16:26 2896创建线程有两种方法。 ... -
JAVA调用系统命令或可执行程序
2009-09-03 15:33 69640通过 java.lang.Runtime 类可以方便的 ... -
FTP客户端(利用sun.net.ftp.FtpClient实现)
2009-07-30 15:35 25822昨天帮同事弄java上传文件到ftp服务器,用的sun ...
相关推荐
在web工程中整合ckeditor3.6和ckfinder2.0.2在web工程中整合ckeditor3.6和ckfinder2.0.2
ckeditor3.6_ckfinder2.0.2破解,整合,已经配置好,可以直接调用,asp.net版本 ckeditor3.6_ckfinder2.0.2破解,整合,已经配置好,可以直接调用,asp.net版本 ckeditor3.6_ckfinder2.0.2破解,整合,已经配置好,可以...
CKEditor3.6+CKFinder2.1
java版本的ckeditor3.6,可以上传图片,使用目前最新版本的ckeditor 用eclipse导入项目,就可以直接使用了。
asp.net ckeditor3.6+ckfinder2.1(完美破解),压缩包里面有完整的项目。
CKEditor 3.6 和 CKFinder 2.2 for ASP.NET 二者zip打包下载。 解压即可。
公式在线编辑,asp………………动态网页中公式的编辑传输
最新ckeditor3.6+ckfinder2.1整合含上传(java版) 给新手一个参考,希望大家一起进步
ckeditor3.6.6.1+ckfinder2.0.1(php破解) 完美整合,可直接使用,内附说明,完美的编辑器,堪比word
ckeditor_aspnet_3.6.6.2 ckfinder_aspnet_2.4.1 破解 后的源码
ckeditor的API 著名的开源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor。原来叫FCK,是因为最初的开发者叫Frederico Calderia Knabben;现在叫CK,意指"Content and Knowledge"。新版的编辑器的更新...
ckeditor_aspnet_3.6.6.2.zip刚从官网上下的
把ckeditor 3.4的ckeditor.js复盖就行
ckeditor_3.6.zip
以上文件包含 ckeditor3.6.4 和ckfinder2.3 及其他们的相关配置。经过本人测试,如若按照文档配置设置,能实现在线编辑功能以及图片等文件上传功能。
html在线编辑器ckeditor_3.6
最新版本ckeditor压缩包下载,官方网站的版本。 很好用,文夹是完全的。
在线文本编辑器ckeditor3.6.2 for java 版包含一个3.6.2的war包 一个3.6.2的zip包一个3.5.3的zip包 一个FCKeditor2.6.7的zip包
本插件源码来自互联网,由于源代码基于ckeditor3.6.61,故对源码进行过简单修改,以求适应ckeditor4.4.7