这篇文章用来说明 ckeditor 的所有可配置的功能,分为终端用户配置和开发者配置

1.终端用户配置

  • 用户接口 – 设置编辑器的UI和语言
  • Editor 尺寸设置 – 设置编辑器的尺寸
  • 插入内容 – 添加丰富的插入内容,图片,代码,表格,数学公式.
  • 文本样式 – 设置文本样式.
  • 文档代码编辑 –编辑文档的源代码.
  • 能力支持 – 一些可对残障人士提供帮助的工具.

2.开发者配置

  • 编辑器UI – 编辑UI.
  • 工具栏 – 自定义工具栏.
  • API 接口 – 使用 CKEditor API.
  • 输出控制 – 调整编辑器的输出通过设置html的格式.
  • 工具集 – 额外的工具,是编辑器配置和扩展更简单.

1.1 用户接口

通过配置config.uiColor (rgb 格式) 的对头部颜色进行配置。

config.uiColor = #66AB16;

通过配置config.defaultLanguage 对编辑器语言进行设置

config.defaultLanguage = 'de';

1.2 尺寸设置

1.2.1 基础尺寸设置
config.width = 500;        // 500 pixels high.
config.height = '25em'; // CSS unit (em).

通过对cofnig.height和cofnig.width设置,控制编辑器的宽高。只对经典样式的编辑器有用,对行内编辑器无效

1.2.2 高度自动增加

添加Auto-grow插件是编辑器高度跟随文章内容自适应,高度增加了用户编辑内容是离工具栏的距离就远了,看具体的项目需求吧。

通过config.extraPlugins 添加autogrow 插件,可以对autogrow 插件进行自定义配置

config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 250;// 设置编辑器最小高度
config.autoGrow_maxHeight = 600;// 设置编辑器最大的高度 在最小和最大高度之间会高度会适应内容高度

其他参数配置

config.autoGrow_onStartup = true; // 设置为true 编辑器在创建和内容高度变化的时候更新高度,如果不设置会在编辑器每次获得焦点的时候更新高度出发浏览器的重绘增加不必要的开销
config.autoGrow_bottomSpace = 50; // 文本内容距离编辑器底部的距离。
config.removePlugins = 'resize'; // 移除resize插件,设置了autogrow功能,resize功能就可以不使用,这两个都是为了解决高度问题的插件。
												

ckeditor_学习(2) 功能概览的更多相关文章

  1. lua本学习笔记功能

    Lua本学习笔记功能 1.  函数返回 指定任务的主要功能是完成,在这种情况下,函数被用作调用语句.函数可以计算并返回值,在这种情况下,作为分配值表达式语句使用. 语法: funcationfunc_ ...

  2. 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

    一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...

  3. 【WPF系列】基础学习-WPF架构概览

    引言 WPF从.net framewok3.0加入以来,经历了很多跟新.每次更新都给用户带来了新的功能或者优化性能.下面我们首先看下WPF再.netFramework中的位置,接着介绍下WPF的架构框 ...

  4. Contiki学习入门之概览

    Contiki是专为物联网领域而设计的开源操作系统,适用于联网嵌入式系统和无线传感器网络.由瑞典计算机科学学院的Adam Dunkels团队开发.它有以下几个特点. 1. 网络标准 contiki提供 ...

  5. ckeditor_学习(1) 基本使用

    ckeditor 是一款强大的web编辑器.工作需要用到记录学习和使用过程,版本是ckeditor4. 1.下载ckeditor的安装包,建议下载标准版的. j将ckeditor.js 引入页面,调用 ...

  6. BurpSuite 功能概览

    简介 写作思想:相比较具体介绍某个功能的用法.会更加侧重于介绍 Burp 提供哪些功能.这样好处是在比较复杂的测试场景,如果Burp 刚好提供对应的功能,就不用花费精力造轮子了. 而需要掌握具体操作方 ...

  7. bootstrap学习笔记--bootstrap概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  8. 【WPF系列】基础学习-WPF设计模式概览

    引言 “设计模式”这个让程序员提起来就“酷”的东东,着实让让初学设计模式的programer自我陶醉一番.太多的经历,告诉我们“凡事都要个度,要学会适可而止”,否则过犹不及.“设计模式”也一样,切莫为 ...

  9. MySQL 5.7 学习:功能性能的提升

    背景: 继上次介绍 初识 MySQL 5.6 新功能.参数完之后,刚好MySQL 5.7又GA了,在官方测试里看到,MySQL5.7在功能.性能.可用性.安全和监控上又提升了很高.现在看看和MySQL ...

随机推荐

  1. AutoLayout的坑

    本文投稿文章,作者:MangoMade(简书) AutoLayout非常强大也非常易用,可读性也很强,加上各种第三方AutoLayout库,让你布起局来犹如绷掉链子的狗!根本停不下来!以前的 1 la ...

  2. linux下sort命令详解

    1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [rocrocket@rocrocket progr ...

  3. ACCESS 查询重复记录

    In (SELECT [全称] FROM [New14] As Tmp GROUP BY [全称],[账号],[银行] HAVING Count(*)>1  And [账号] = [New14] ...

  4. egret 简单的一笔画算法,在wing中可以直接跑(以后玩这类游戏就有个作弊器了)

    /** * 在Main中创建游戏场景 * Create a game scene */ private createGameScene() { MtwGame.Instance.init(this.s ...

  5. 试试Markdown哈

    目录 一级标题 二级标题 三级标题 二级标题? 我擦了? 这什么语法.文字下面加-号,实现二级标题? 看看是几级标题 还真的是二级标题. ...... # 看来四个空格是个,嗯,默认的东西 ??中间是 ...

  6. Spring Cloud分布式微服务云架构

    分布式.微服务.云架构 JAVA语言开发.跨平台.高性能.高可用.安全.服务化.模块化.組件化.驱动式开发模式 commonservice eurekaNetflix 云端服务发现,一个基于 REST ...

  7. kafka consumer 0.8.2.1示例代码

    package test_kafka; import java.util.ArrayList; import java.util.HashMap; import java.util.List; imp ...

  8. springboot 热部署

    1 pom文件添加 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  9. admin 自定义字段颜色 并加以简单判断

    在model中class Books(models.Model): nid = models.AutoField(primary_key=True, ) title = models.CharFiel ...

  10. 第十七周翻译-SQL Server中事务日志管理的阶梯,级别5:以完全恢复模式管理日志

    SQL Server中事务日志管理的阶梯,级别5:以完全恢复模式管理日志 作者:Tony Davis,2012/01/27 翻译:赖慧芳 译文: 该系列   本文是Stairway系列的一部分:SQL ...