ckeditor 部分文档

最新推荐文章于 2024-08-22 17:56:33 发布

qinglangee

最新推荐文章于 2024-08-22 17:56:33 发布

阅读量186

点赞数

分类专栏： FCKEDITOR和TINYMCE 文章标签： jQuery 浏览器 HTML JavaScript CSS ViewUI

本文链接：https://blog.csdn.net/qinglangee/article/details/83733732

版权

FCKEDITOR和TINYMCE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[url=http://docs.cksource.com/CKEditor_3.x/Developers_Guide]CKEditor 3.x - Developer's Guide[/url]

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"><p>Initial value.</p></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"><p>Initial value.</p></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 配置修改 [url=http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations]Setting Configurations[/url]
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 = '>';
    });