ckeditor3.2.1文档翻译(用goole翻译的)

xieye

浏览: 835805 次
性别:
来自: 南京

最近访客更多访客>>

zhangdaiscott1

u014388962

lucifer821031

jAmEs_

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

我的资讯 ( 1)
我的论坛 ( 2143)
我的问答 ( 297)

存档分类

博客分类：

PHP 浏览器应用服务器 ASP.net JavaScript

首先，要加载一个js文件

<head>
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>

在页面中，先创建一个textarea

<textarea name="editor1">你好</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' ); //注意参数必须是textarea的name
</script>

然后，在php服务端如何获得数据
<?php
$editor_data = $_POST[ 'editor1' ];
?>

其次，如果想直接在客户端就获得数据

<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

该编辑器带有一组丰富的配置，使得它可以自定义其外观，功能和行为。
主配置文件被命名为“config.js”。
你可以在CKEditor安装文件夹的根目录找到此文件。

要想知道所有可用的配置选项，可以找到我们的API文档里面的CKEDITOR.config对象的定义。

最好的办法是在您的页面直接创建编辑器实例。这样可避免接触安装在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后，通过简单的覆盖所有文件。

假设你复制了配置，js中命名的文件夹内的“惯例”在您的Web站点的根。
你也改名为文件“ckeditor_config.js”。
现在，你必须只设置customConfig设置在创建编辑器的实例。例如：
CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });
您的自定义配置文件必须看起来就像默认config.js文件。

配置顺序

你不是只需要使用上面的配置选项之一。你可以混合所有这些，将配置正确。
以下是配置的加载顺序编辑时创建实例：

   1。该编辑器实例被创建。此时所有的默认配置设置。
   2。如果customConfig设置已经设置“在页的”，该文件被加载，否则默认config.js文件被加载。在这个文件中的所有设置将覆盖当前实例的设置。
   3。如果设置加载点“2”也定义一个新的customConfig值，这个新的文件被加载并重载其设置当前实例的设置。出现这种情况的所有文件，直到没有customConfig递归定义。
   4。最后，确定了“在页的”重写当前实例设置（除customConfig，这一点已在使用的设置“1”）。

避免加载外部设置文件

它也可以完全避免加载外部配置文件，减少了加载的文件的数量。要做到这一点，就足够了设置customConfig设置为一个空字符串。例如：
CKEDITOR.replace( 'editor1',
    {
        customConfig : ''
    });

此设置是被推荐的，如果你不设置在config.js配置文件也不是自定义配置文件。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

工具条

虽然是全功能的编辑器，并非所有的选项，可能需要在所有情况。正因为如此，自定义工具栏是最常见的任务之一，需要时CKEditor处理。

定义工具栏

工具栏的定义是一个JavaScript数组，包含要在所有的“工具栏行”在编辑器中可用的显示内容。
有两种方法来设置在编辑器中所需的工具栏上的定义。
它可以设置直接进入“工具栏”设置，也可以设置为1，而不是配置名为“toolbar_ <名称>”，
其中“<名称>”是一个可以被用来确定在“工具栏上的工具栏名称“设置。以下是默认设置，我们在编辑器中有。

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'],
    ['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']
];

请注意，两个工具栏上的定义已经确定，一个名为“全”和其他“基本法”。 “完整”的定义已被设置为在工具栏上的设置使用。

带工具栏

每个工具栏的定义是由一个“工具栏带”是在最后的工具栏布局分组系列。该项目提出的乐队一起当重量尺寸编辑器新行。

正如你可以看到在上面的定义，每一个工具栏带是分隔的JavaScript字符串数组定义。每串显示工具栏项目使用。项目定义的工具栏插件。

您也可以包括在工具栏上的乐队，包括它破折号("-")字符分隔符。
强迫行中断

在“全部”的定义看你会注意到一些斜线("/")工具栏乐队之间的字符。这斜线可以用来强制在该点休息后，乐队将在未来呈现在一个新行，而不是按照以前的1。
自定义工具栏

一个简单的方法来配置所有的编辑工具栏，只需添加一个内config.js文件，
甚至更好的配置文件中分离自定义工具栏的定义（见是“设置配置”）。
对于这最简单的方法是通过简单的上述“完全”复制工具栏上的定义，及带它到您的需求。例如，下面的工具栏是一个很好的建议定义了在该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.replace( 'editor1',
    {
        toolbar : 'MyToolbar'
    });

CKEDITOR.replace( 'editor2',
    {
        toolbar : 'Basic'
    });

它也可以设置在工具栏上的定义页，在创建实例的直接编辑。在这种情况下，只需将其分配给工具栏上直接设置，例如，
CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

风格

该“stylescombo”插件增加了一个不错的选择框到工具栏，与它很容易定制的风格和适用价值的语义内容。

该作品在风格组合列表中可以很容易地定制以符合您的网站需要。对于这一点，你必须在你的工作风格的定义，这是一个简单的JavaScript数组，其中包含的规则为每个风格使用。

样式定义

样式定义是一个JavaScript数组是通过调用CKEDITOR.addStylesSet（）函数注册。
一个独特的名称必须分配给您的样式定义，所以你可以设定每个编辑器的实例后加载它。
这意味着你可以有一个风格的定义，是由不同的编辑器实例的页目前共享。

下面是一个示例样式定义登记：

CKEDITOR.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' } }
]);
上述定义可以放置在注册页面内嵌使用编辑器，甚至可以生活在一个外部文件，它是装上的需求“，”只有在需要时（见下文）。

之后，您必须指示编辑器来使用使用stylesCombo_stylesSet设置您的新注册的样式定义。这可能是设置到config.js文件，例如：
config.stylesCombo_stylesSet = 'my_styles';

使用外部样式定义文件

您可以包括上述风格到外部JavaScript文件定义的注册要求。
这是它的首选方式，因为它会被载入时才打开样式选择框，提高页面加载的性能。因为用户可能会感到它的小的差距，虽然装载。

默认情况下，编辑器使用“插件/ stylescombo /风格/ default.js”文件，这是一个“精缩”JavaScript文件。
您可以在“_source它的未压缩的版本/插件/ stylescombo /风格/ default.js”。
你可以在网上看到我们SVN还：http://svn.fckeditor.net/CKEditor/trunk/_source/plugins/stylescombo/styles/default.js。
它可以被用来作为您的自定义模板文件。

您的样式定义文件可以保存在任何地方你的网站（或网页）。
你必须只知道URL达到目标。例如，你可以在它保存在您的网站的根目录，这样你就可以达到与“/ styles.js”，
甚至发生在一个中央网站它，所以你可以找到以“http://它www.example.com / styles.js“。
在这一点上，简单地改变stylesCombo_stylesSet设置为指向编辑器到您的文件：
config.stylesCombo_stylesSet = 'my_styles:/styles.js';

OR

config.stylesCombo_stylesSet = 'my_styles:http://www.example.com/styles.js';
上面的设置语法是“样式定义名称”+“：”+“文件的URL”。请注意，您仍然必须使用唯一的名称您已使用注册到该文件中的样式定义。
样式规则

在一个样式定义的项被称为“”样式规则。每个规则定义了一个样式的显示名称和元素，属性和CSS样式来为它用。下面是它的通用代表：

{
    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',
        ...
    }
}
在“名称”和“元素”值是必需的，而其他值是可选的。
风格类型

有三种类型的风格，与在样式规则使用的每一个元素类型：

    *座样式：应用于文本块作为一个整体（段），而不是仅限于文本选择。对于那些：地址，分区和H1，H2，H3和H4，H5型，H6中，p和前值的元素。
    *对象样式：适用于特别选择的对象（而不是文本），只要这种选择是由浏览器的支持。该是：元素的值1，嵌入，人力资源，IMG公司，李，对象，醇，表，运输署，TR和UL认证。
    *直列式：适用于使用中没有其他样式类型定义元素的样式规则文本的选择。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

输出格式化

CKEditor提供了一个强大和灵活的输出格式化系统，使开发的HTML如何通过它必须像制作的完全控制。
它可以控制每一个标签上，有一个为他们中的每一个不同的结果。
作家的HTML

从技术上说，写最后的输出是由CKEDITOR.htmlWriter类执行任务（“作家”），
由CKEDITOR.htmlDataProcessor类。因此，一个特定的编辑器实例的当前作家实例可以检索到<editorInstance>。dataProcessor.writer财产。

笔者通过设置属性，它可以配置多个输出格式选项。下面的例子是最好的方式来概括，其中最常用的，与它们的默认值：
var 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
    });

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

文件上传

CKEditor可以很容易地集成到一个外部文件浏览器/上载。

一旦正确设置，所有的文件浏览器功能将自动变为可用（即“浏览服务器”按钮（1），“上传”选项卡（2在“链接”，“形象”和“闪光”对话窗口））。

Basic Configuration

该filebrowserBrowseUrl设置是一个外部文件浏览器的位置，应该在开展“浏览服务器”按钮（1）被按下。

该filebrowserUploadUrl设置是一个脚本来处理文件上传的位置。如果设置的“上传”选项卡（2）将出现在对话框（只有在这样的功能可用，在“链接”，“形象”和“闪光”对话窗口）IE浏览器。

Example 1

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserUploadUrl : '/uploader/upload.php'
    });

它也可以设置为一个对话框中选择一个单独的网址，使用文件浏览器设置对话框名称：filebrowser [dialogName] BrowseUrl和filebrowser [dialogName] UploadUrl。

例如设置一个特殊的图像对话框上传网址，设置filebrowserImageUploadUrl属性：

Example 2

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserImageBrowseUrl : '/browser/browse.php?type=Images'
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
    });

在上面的例子，filebrowserBrowseUrl和filebrowserUploadUrl设置将默认情况下使用，但是在图像对话框中，将使用 filebrowserImageBrowseUrl CKEditor和filebrowserImageUploadUrl配置设置代替。
文件浏览器窗口大小

在CKEditor文件浏览器窗口的默认宽度设置为80％的屏幕宽度，默认海特设置为屏幕高度的70％。如果由于某种原因，默认值是不适合你，你可以将它更改为任何其他值。

使用filebrowserWindowWidth改变宽度和filebrowserWindowHeight改变窗口的高度。

要设置窗口中的像素大小，刚刚成立的数字值（例如“800”）。如果你喜欢设置的高度和在屏幕窗口宽度的百分比，记得要在最后添加如“60％”）（百分号。

Example 3

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserWindowWidth : '640',
        filebrowserWindowHeight : '480'
    });
要设置一个特定的内部对话框的文件浏览器窗口大小，使用filebrowser [dialogName] WindowWidth和filebrowser [dialogName] WindowHeight设置。

例如，要改变只在“图像对话框”文件浏览器窗口的大小，更改设置filebrowserImageWindowWidth和filebrowserImageWindowHeight设置。

Example 4

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageWindowWidth : '640',
        filebrowserImageWindowHeight : '480'
    });

使用CKFinder

CKFinder可以很容易地集成到CKEditor（见现场演示）。

这项整合可采取两种方式：通过设置CKEditor配置选项（例如下文）或使用CKFinder.SetupCKEditor（）方法CKFinder的API可用。

Example 5

CKEDITOR.replace( 'editor1',
    {
        filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
        filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
        filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
    });
上面的例子是有效的PHP环境。 / ckfinder /是基础路径CKFinder安装目录。如果您使用的ASP，ASP.NET或ColdFusion的CKFinder记得要改变“PHP的”向右延伸：

    *的ASP - CKFinder为ASP
    * aspx顷 - ASP.NET的CKFinder
    *立方英尺 - CKFinder为ColdFusion
    * PHP的 - CKFinder为PHP

例6

CKEditor + CKFinder整合的CKFinder.SetupCKEditor使用（）函数：

var editor = CKEDITOR.replace( 'editor1' );
CKFinder.SetupCKEditor( editor, '/ckfinder/' );

该SetupCKEditor（）方法的第二个参数是到CKFinder安装路径。

请检查_samples文件夹过来/ js中/ ckeditor.html样品CKFinder发给看到完整的工作这种集成方法的示例。

PHP的API

作为CKFinder 1.4.2和CKEditor 3.1是有可能的结合使用PHP的API CKFinder CKEditor。
更多细节见CKFinder PHP的文档。
其他资源

    *创建一个自定义的文件浏览器
    *添加了文件浏览器对话

在CKEditor架构允许没有任何需要改变的源文件非常灵活的对话的内容定制。

为了看到一些例子，请看看_samples文件夹过来看看/分配api_dialog.html文件。

这是另一个例子，说明如何使用一些选项，在fckeditor的存在：

CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

// Check if the definition is from the dialog we're
// interested on (the Link dialog).
if ( dialogName == 'link' )
{
// FCKConfig.LinkDlgHideAdvanced = true
dialogDefinition.removeContents( 'advanced' );

// FCKConfig.LinkDlgHideTarget = true
dialogDefinition.removeContents( 'target' );
/*
Enable this part only if you don't remove the 'target' tab in the previous block.

// FCKConfig.DefaultLinkTarget = '_blank'
// Get a reference to the "Target" tab.
var targetTab = dialogDefinition.getContents( 'target' );
// Set the default value for the URL field.
var targetField = targetTab.get( 'linkTargetType' );
targetField[ 'default' ] = '_blank';
*/
}

if ( dialogName == 'image' )
{
// FCKConfig.ImageDlgHideAdvanced = true
dialogDefinition.removeContents( 'advanced' );
// FCKConfig.ImageDlgHideLink = true
dialogDefinition.removeContents( 'Link' );
}

if ( dialogName == 'flash' )
{
// FCKConfig.FlashDlgHideAdvanced = true
dialogDefinition.removeContents( 'advanced' );
}

});

通过倾听CKEditor dialogDefinition事件是可以自定义对话框去除或改变标签的默认值。

============================================================================
CKEditor已建成的定制和灵活的态度。这些方面也正在考虑其最根本的方面，比如它的安装文件的位置，这也可以完全定制。

从服务器加载的文件

要创建一个网页编辑器的实例，开发人员必须包括ckeditor.js文件到它。此文件包含了编辑器的核心代码。它创建在页面编辑器，并自动加载所有必需的文件，使它们运行。以下是该普遍加载文件的列表：

    *配置文件。
    *皮肤文件，这些文件包括CSS和最终的JavaScript。
    *语言文件。
    *插件文件。
    *对话框文件。
    *等..

在标准安装，并不是所有的上述文件被加载，全部是内CKEditor安装文件夹中。其他装置也可载入其他文件夹的文件，根据配置和定制。

虽然路径和文件的编辑某些文件的名称进行自定义（如配置文件），其他相当的标准和定额。例如，英文文件将始终来自“郎”文件夹，用文件名en.js，而主要用于皮肤卡马皮肤文件来自“皮肤/卡马/ editor.css”。
了解文件载入中

默认情况下，编辑器核心代码使用CKEDITOR.getUrl函数来加载文件。这个函数编辑器转换成指向在服务器资源的相对完整的URL路径。此外，它的编辑器时间戳追加到URL查询字符串，提供反缓存功能。

例如，调用CKEDITOR.getUrl（'郎/ en.js'）返回“http://www.example.com/ckeditor/lang/en.js?t=A067”，如果使用CKEditor 3.1，安装在“ / ckeditor“文件夹中的www.example.com的网站。
操纵网址

CKEditor提供了一个简单的方法来操纵的CKEDITOR.getUrl函数的结果。这足以界定在页面全球CKEDITOR_GETURL功能。这个函数将被调用的CKEDITOR.getUrl。如果有什么是回来的，它将被用作解决网址，否则默认分辨率程序使用。

例如，下面的函数将所有的语言文件请求的PHP脚本，并传递给它的语言代码。该脚本然后可以从一个数据库中的语言文件的代码：
<script type="text/javascript">

function CKEDITOR_GETURL( resource )
{
var match = resource.match( /lang\/([a-z\-]+)\.js$/ );
if ( match )
return '/getlang.php?lang=' + match[ 1 ];
}

</script>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
在这个例子中，只有语言文件将解决我们的功能。所有其他文件将通过决议，虽然默认的过程。

请注意，CKEDITOR_GETURL函数必须加载之前ckeditor.js定义，否则将被忽略。上面的代码可以包含在ckeditor.js文件的顶部也。
用法例

有几种情况下可能受益于这个功能。在这里，我们有一个名单，其中几个：

    *点编辑器的核心文件被加载不同名称不同的目录。对于具有英语的例子文件从“/ mylangfiles / lang_en.js”的到来。
    *拥有所有编辑的文件正由一个服务器进程如从数据库中加载（服务），而不是让他们，身体安装。
    *某些服务器应用程序可能避免目录结构。例如，我们可以有英文文件重命名为“lang_en.js”和皮肤文件“skin_kama_editor.css”（用下划线代替所有斜杠）。

分享到：

现在我需要大家的帮助 | eclipse 和editplus的换行符

2010-05-13 11:52
浏览 2885
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论