`

ckeditor 部分文档

jQuery浏览器HTMLJavaScriptCSS 
阅读更多
CKEditor 3.x - Developer's Guide

1. 下载安装
2. 导入
    2.1 直接导入
    2.2 与jquery整合
3. 配置
    3.1 配置设置
        3.1.1 在页面配置 (升级方便)
        3.1.2 在config.js中修改 (升级不方便)   
        3.1.3 使用扩展配置文件
        3.1.4 使用默认配置(config.js被修改了的情况下) 
    3.2 工具条
    3.3 样式
    3.4 输出格式
    3.5 模板
    3.6 拼写检查
    3.7 文件浏览/上传
4. 自定义
    4.1 对话框
    4.2 插件
    4.3 皮肤
5. 高级任务   
1. 下载安装
    http://ckeditor.com/
    解压到网站根目录即可
    访问 http://<your site>/<CKEditor 安装路径>/_samples/index.html测试
2. 导入
    2.1 直接导入
    head 中
    
<head>
	...
	<script type="text/javascript" src="${ctx}/ckeditor/ckeditor.js"></script>
</head>

    页面
    
		<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
		<script type="text/javascript">
			CKEDITOR.replace( 'editor1' );
			var editor_data = CKEDITOR.instances.editor1.getData();
		</script>
        取得.设置数据
		<input type="button" value="取得" onclick="alert(CKEDITOR.instances.editor1.getData())"/>
		<input type="button" value="设置" onclick="CKEDITOR.instances.editor1.setData('123')"/>

   
    2.2 与 jquery 整合
    
<head>
	...
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/ckeditor/adapters/jquery.js"></script>	
</head>


    
		<textarea name="editor2" class="editor">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
		<script type="text/javascript">
			$( 'textarea.editor' ).ckeditor();
		</script>
		取得.设置数据
		<input type="button" value="取得" onclick="alert($( 'textarea.editor' ).val())"/>
		<input type="button" value="设置" onclick="$( 'textarea.editor' ).val( 'my new content' )"/>


3. 配置
3.1 配置修改  Setting Configurations
    3.1 在页面配置 (升级方便)
    
CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

    3.2 在config.js中修改
    这个文件原本是空的,在其中加入需要的配置就可以了
    
CKEDITOR.editorConfig = function( config )
{
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

    3.3 使用扩展配置文件
    
CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

    3.4 使用默认配置(config.js被修改了的情况下)
    
CKEDITOR.replace( 'editor1',
    {
        customConfig : ''
    });


3.2. 工具条配置
    配置文件中配置一个自己需要的
    
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'
    });


3.3 样式
3.3.1样式定义
样式定义是一个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' } }
]);


    上面的定义可以放在使用编辑器的页面,也可以放到一个扩展文件中,只在需要的时候载入.(见下面)

    然后让编辑器使用刚注册的样式. 可以在config.js中这样写 
config.stylesCombo_stylesSet = 'my_styles';

    3.3.2 使用外部样式定义js文件
    可以把上面的定义放到一个外部的JS文件中.这样更好因为它只在打开样式选择框时才会被加载,提高了页面载入效率.
    默认的style文件是压缩过的 "plugins/stylescombo/styles/default.js", 没压缩版本在"_source/plugins/stylescombo/styles/default.js".
    样式定义文件可以保存在任何地方,用以下方法引用
    
config.stylesCombo_stylesSet = 'my_styles:/styles.js';

OR

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

    3.3.3 Style Rules
    3.3.4 Style Types
3.4 输出格式

    CKEditor 提供一强大的输出格式系统,开发者可以完全控制后成的html.它可以控制到每个tag.

    3.4.1 The HTML Writer
    从技术上来说, "写"最终输出是CKEDITOR.htmlWriter 类执行的一个任务, 由CKEDITOR.htmlDataProcessor 类调用. 因此可以用writer属性得到当前的writer实例 : <editorInstance>.dataProcessor.writer
    设置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
    });

    3.4.2 设置writer规则
    因为writer是每个编辑器实例的一个属性, 并且依赖writer插件,修改它的最好的方式是监听"instanceReady"事件.
    下面是示例:
    
CKEDITOR.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
                    });
            }
        }
    });


    另一方法是用CKEDITOR对象, 这样所有的编辑器实例会被修改
    
CKEDITOR.on( 'instanceReady', function( ev )
    {
        // Out self closing tags the HTML4 way, like <br>.
        ev.editor.dataProcessor.writer.selfClosingEnd = '>';
    });

分享到：
| spring security
评论
1 楼 kakalun 2011-05-06  
楼主是个好人！
发表评论

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

相关推荐

    CKEditor 3.6.2中文文档

    ### CKEditor 3.6.2中文文档知识点详解 #### 一、CKEditor简介 - **定义**: CKEditor（原名FCKeditor）是一款专为网页设计的开放源代码所见即所得的文字编辑器。这款编辑器的目标在于轻量化的设计理念，让用户无需...

    非常全面的CKEditor插件开发文档

    3. **插件结构**：典型的CKEditor插件结构通常包括以下部分： - `plugin.js`：插件的主要实现文件，包含插件的基本信息（如名称、版本）和主要功能代码。 - `lang/`：存放插件的语言文件，支持多语言环境。 - `...

    CKEditor 4 开发人员指南(中文)

    CKEDITOR.replace方法通常被放置在标记后的页面源代码的任意位置，也可以放在部分。 ### 配置CKEditor 4 CKEditor允许开发者通过配置文件来定制编辑器的行为和外观。配置文件通常包括oooconfig.js、contents.css和...

    ckeditor 4.1 两端对齐按钮支持中文两端对齐补丁

    在"ckeditor.js"文件中，我们需要找到与两端对齐按钮相关的代码段，通常是定义按钮的配置或事件处理部分。然后，在这里插入"inter-ideograph"样式，确保当用户点击两端对齐按钮时，该样式会被应用到选中的中文文本上...

    CKEditor4配置与开发详细中文说明文档

    CKEditor4是一款广泛使用的网页内容编辑器，它能够将一个简单的文本域变为一个功能丰富的编辑器，提供...CKEditor官方提供详尽的开发手册和API文档，用户可以通过这些文档学习和了解CKEditor更多的高级功能和配置选项。

    ckeditor的demo代码

    这通常通过在页面的`&lt;head&gt;`部分引用CKEditor的JavaScript库来完成，例如： ```html &lt;script src="ckeditor/ckeditor.js"&gt; ``` 接下来，CKEditor需要一个容器元素来显示编辑器界面，通常是通过`&lt;textarea&gt;`标签...

    ckeditor数学公式编辑器

    在Web教育、科研或技术文档编写中，数学公式是常见且重要的组成部分。传统的HTML和CSS并不支持复杂的数学公式展示，这就需要借助像LaTeX这样的专业排版语言。然而，对于非LaTeX熟练的用户来说，直接输入LaTeX代码...

    最新c#整合ckeditor+ckfinder示例

    用户可以通过CKFinder浏览服务器上的文件和文件夹，选择图片或文档，并将它们插入到CKEditor的内容中。CKFinder支持多种文件类型，包括图像、文档、视频等，为用户提供了一种直观的方式来管理和使用服务器资源。 在...

    ckeditor配置(详细)

    ### CKEditor配置详解 CKEditor是一款广泛应用于网页开发中的富文本编辑器，它提供了丰富的文本编辑功能，如格式化文本、插入...这些配置选项仅仅是CKEditor强大功能的一部分，更详细的配置和功能可以参考官方文档。

    CKEditor二次开发手册 超详细哦!

    源代码主要分为两部分：核心功能位于`ckeditor_source\core`目录，包括DOM操作、事件处理、初始化脚本等；其他功能如格式化、复制粘贴、图片和链接等则以插件形式存在于`ckeditor_source\plugins`目录下的各个文件夹...

    ckeditor_4.15.1_812ea7723937_C++_ckeditor_

    文件上传是CKEditor的一个强大特性，允许用户在编辑器内直接上传图片、文档等文件，并将其嵌入到文本内容中。这个功能对于内容创建者来说非常实用，因为它简化了内容制作流程，提高了生产力。 在CKEditor中实现文件...

    springmc ckeditor ckfinder三者整合

    它可以方便地集成到CKEditor中，允许用户上传图片、文档和其他文件，并在编辑器内直接插入这些资源。CKFinder提供了文件浏览、上传、下载、删除等操作，支持多种文件类型，并且可以配置权限控制，确保文件的安全性。...

    ckeditor控件

    在`ckeditor.rar`这个压缩包中，包含的文件很可能是CKEditor的源码、示例、文档以及可能的配置文件。解压后，开发者通常会找到以下几部分： 1. **源码文件**：包含 CKEditor 的 JavaScript 和 CSS 文件，用于在网页...

    ckeditor及配置方法

    将`ckeditor.js`引用到你的HTML页面中，通常放在`&lt;head&gt;`部分： ```html &lt;script src="path/to/ckeditor/ckeditor.js"&gt; ``` 然后，为需要转换成编辑器的文本区域添加`id`，并调用CKEditor初始化函数： ```html ...

    ckeditor-java-core-3.5.3

    在Java环境下，可以创建Java插件与CKEditor的JavaScript部分进行通信，实现更复杂的业务逻辑。 6. **版本兼容性** 版本号"3.5.3"表明这是CKEditor的一个较旧版本，发布于2011年。虽然它可能缺少一些较新版本中的...

    ckeditor4.1.1

    在下载的压缩包"ckeditor"中，通常包含了CKEditor的核心文件、样例、文档以及可能的示例插件。开发者可以通过这些资源快速了解如何在自己的网站上部署和配置CKEditor 4.1.1。为了实现自定义功能或扩展编辑器，开发者...

    ckeditor 3 自定义控件

    在给定的部分内容中，我们可以看到创建了一个名为 `CKeditor` 的自定义控件类，继承自 `WebControl` 类，并实现了 `INamingContainer` 接口。此类还包含了一些注释信息，如作者、创建时间等。 ```csharp [Default...

Magicbox
Global site tag (gtag.js) - Google Analytics