CKEDITOR使用与配置

安装：　　下载CKEDITOR的文件，解压后复制到工程的WEBROOT目录下就OK！引用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>

[align=left]注意：要在textarea后面加入javascript.如果要在HEAD区写javasript,那么采用如下代码[/align]

<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：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.htmlIN-PAGE配置方式：The best way to set your configurations is in-page, when creating editor instances. In this way you avoid touching the original distribution files in the CKEditor installation folder, making the upgrade task easier.最好在创建编辑器的页面中配置你的编辑器属性，使用这种方式，你无需理会在CKEDITOR安装目录中的配置文件（ps:in-page的优先级最高）.CKEDITOR.replace( 'editor1', { customConfig : '' });

This setting is definitely recommended if you are not setting configurations in the config.js file nor a custom configuration file.这段就不翻译了，so,easy!配置个性化工具栏：A toolbar definition is a JavaScript array that contains the elements to be displayed in all "toolbar rows" available in the editor. There are two ways to set the desired toolbar definition in the editor. It can be set directly into the "toolbar" setting,or it can instead be set to a configuration named "toolbar_<name>", where "<name>" is a name that can be used to identify the toolbar in the "toolbar" setting. The following is the default setting we have in the editor.上面的英文太罗嗦了说重点算了：工具栏是通过数组来设定的，工具栏的名字以toolbar_<name>的方式命名，其中的<name>是用来赋值给config.toolbar这一变量的。那么以下代码定义了toolbar_Full和toolbar_Basic的两种工具栏配置，并使用了config.toolbar = 'Full';定义当前的编辑器的工具栏为Full。其中("-") 为空间栏的水平分割，("/") 为换行。CodeCKEDITOR.replace( 'editor1', { toolbar : 'MyToolbar' }); CKEDITOR.replace( 'editor2', { toolbar : 'Basic' });

It's also possible to set the toolbar definition in-page, when creating the editor instance directly. In that case, just assign it to the toolbar setting directly, for example:也可以通过IN-PAGE的方式定义工具栏参数。

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

The Styles DefinitionThe styles definition is a JavaScript array which is registered by calling the CKEDITOR.addStylesSet() function. A unique name must be assigned to your style definition, so you can later set each editor instance to load it. It means that you can have a singlestyle definition which is shared by several editor instances present on the page.The following is a sample style definition registration:通过CKEDITOR.addStylesSet() 函数，我们可以定义一个样式，结合以下的例子，my_styles为样式的名称，具体的样式为一个JAVASCRIPT数组。通过样式的名称我可以让页面的多个编辑器应用该样式。

CodeCKEDITOR.addStylesSet( 'my_styles',[// Block 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' } }]);

The above definition registration can be placed inline in the page using the editor, or can even live in an external file, which is loaded "on demand", when needed only (see below).样式可以通过IN-PAGE或配置文件中进行注册。After that, you must instruct the editor to use your newly registered style definition by using the stylesCombo_stylesSet setting. This may be set into the config.js file, for example:你可以通过在config.js 加入以下代码使编辑器应用该样式：

config.stylesCombo_stylesSet = 'my_styles';

Using an External Styles Definition File 使用自定义的样式文件

You can include the above styles definition registration call into an external JavaScript file. This is the preferred way for it because it will be loaded only when opening the Styles selection box, enhancing the page loading performance. Users may feela small loading gap because of it though.By default, the editor uses the "plugins/stylescombo/styles/default.js" file, which is a "minified" JavaScript file. You can find the uncompressed version of it at "_source/plugins/stylescombo/styles/default.js". You can see it online at our SVN also: http://svn.fckeditor.net/CKEditor/trunk/_source/plugins/stylescombo/styles/default.js. It can be used as a template for your custom file.Your style definition file can be saved anywhere at your web site (or the web). You must just know the URL to reach it. For example, you can save at it at the root of your web site, so you can reach it with "/styles.js", or even place it in a central website, so you can locate it with "http://www.example.com/styles.js". At that point,simply change the stylesCombo_stylesSet setting to point the editor to your file:默认的样式文件在"_source/plugins/stylescombo/styles/default.js"目录中，我们也可以自己定义一个样式文件，如在站点的跟目录中有styles.js这一个样式文件，这个文件通过以下代码指定其路径：

config.stylesCombo_stylesSet = 'my_styles:/styles.js';ORconfig.stylesCombo_stylesSet = 'my_styles:http://www.example.com/styles.js';

Style RulesThe entries inside a style definition are called "style rules". Each rule defines the display name for a single style as well as the element, attributes and css styles to be used for it. The following is the generic representation for it:

Code{name : 'Display name',element : 'tag name (for example "span")',styles :{'css-style1' : 'desired value','css-style2' : 'desired value',}attributes :{'attribute-name1' : 'desired value','attribute-name2' : 'desired value',}}

The "name" and "element" values are required, while other values are optional.

Style Types

There are three types of style types, each one related to the element used in the style rule:Block styles: applied to the text blocks (paragraphs) as a whole, not limited to the text selection. The elements values for that are: address, div, h1, h2, h3, h4, h5, h6, p and pre.Object styles: applied to special selectable objects (not textual), whenever such selection is supported by the browser. The elements values for that are: a, embed, hr, img, li, object, ol, table, td, tr and ul.Inline styles: applied to text selections for style rules using elements not defined in the other style types.Output FormattingThe HTML Writer这个是用来对各种标签的排版进行设定的Technically speaking, writing the final output is a task executed by theCKEDITOR.htmlWriter class ("writer"), used by the CKEDITOR.htmlDataProcessor class. Therefore, the current writer instance for a specific editor instance can be retrieved by the <editorInstance>.dataProcessor.writer property.By setting the writer properties, it's possible to configure several output formatting options. The following example is the best way to summarize the most used of them, with their default values:

Codevar writer = editor.dataProcessor.write;// The character sequence to use for every indentation step.writer.indentationChars = '\t';// The way to close self closing tags, like <br />.writer.selfClosingEnd = ' />';// The character sequence to be used for line breaks.writer.lineBreakChars = '\n';// Set writing rules for the <p> tag.writer.setRules( 'p',{// Indicates that this tag causes indentation on line breaks inside of it.indent : true,// Insert a line break before the <p> tag.breakBeforeOpen : true,// Insert a line break after the <p> tag.breakAfterOpen : true,// Insert a line break before the </p> closing tag.breakBeforeClose : false,// Insert a line break after the </p> closing tag.breakAfterClose : true});

Setting Writer Rules

Because the writer is a property of each editor instance, and also because it's dependency on the writer plugin to be loaded, the best way to make changes to it is by listening to the "instanceReady" event, so it's safe to assume that the dataProcessor propertywill be loaded and ready to changes. The following is an example of it, when creating an editor instance:可以为单一得编辑器指定标签的格式。

CodeCKEDITOR.replace( 'editor1',{on :{instanceReady : function( ev ){// Output paragraphs as <p>Text</p>.this.dataProcessor.writer.setRules( 'p',{indent : false,breakBeforeOpen : true,breakAfterOpen : false,breakBeforeClose : false,breakAfterClose : true});}}});

Another way for it is by using the CKEDITOR object, so all editor instances will be changed:也可以对所有的编辑器进行设定。

CKEDITOR.on( 'instanceReady', function( ev ){// Out self closing tags the HTML4 way, like <br>.ev.editor.dataProcessor.writer.selfClosingEnd = '>';});

发表评论[align=left][/align]