这篇文章用来说明 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. npm run build 打包后,如何运行在本地查看效果(Nginx服务)

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

  2. dockerfile语法规则

    编写Dockerfile 在前面的章节,我们学习了通过docker命令来下载镜像,运行镜像,在容器中部署自己的程序,最后将容器提交到自己的镜像中.但是,这并不是Docker推荐的镜像构建方式.在这一章 ...

  3. 初学web前端

    菜鸟刚入门,说说最近学习的心得吧. 首先我学前端主要是因为前端可以看到一些东西,比较有趣 好玩.相比其他语言更简单一些 ,但是却没有那么枯燥. 刚刚开始学习前端肯定就是html+css了.我是混着学的 ...

  4. C# 操作数据库常用的 SqlDbHelper

    原博客园转载于   https://www.cnblogs.com/felix-wang/p/6742785.html using System; using System.Collections.G ...

  5. js 回调

    function getTittleLableData(callback) { $.ajax({ type : 'POST', url : ctx + '/feeInf/getDataValue', ...

  6. 考研计算机复试(广东工业大学C语言复试2018笔试题)(精华题选)

    1.obj文件是:(二进制文件) 2.函数func(float x){printf("%f",x+x);}的类型是() A.void B.int类型 C.无法确定 3.若有定义:i ...

  7. EFCore Owned Entity Types,彩蛋乎?鸡肋乎?之彩蛋篇

    EFCore Owned Entity Types的定义 EFCore Owned Entity Types的文档在这里:https://docs.microsoft.com/zh-cn/ef/cor ...

  8. 转:LRU算法

    LRU是Least Recently Used的缩写,即最近最少使用页面置换算法,是为虚拟页式存储管理服务的,是根据页面调入内存后的使用情况进行决策了.由于无法预测各页面将来的使用情况,只能利用“最近 ...

  9. mysql5.7.20 windows 解压缩版安装

    1.下载 文件下载路径:https://dev.mysql.com/downloads/mysql/ 2.配置文件 在解压的文件夹内新建my.ini文件,并加入以下内容: [mysql] # 设置my ...

  10. MyLog

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;us ...