Ckeditor使用

Ckeditor demo

译文

你最想要的

• 标准配置
  
  • 以下是在下载页面standard操作提供的基本编辑器配置。(基本的样式编辑组件)
• 全部配置
  
  • 以下是在下载页面full操作选项提供的全部编辑器配置。(全部的文本样式编辑组件)
• 行内编辑
  
  • CKEditor4 引入了一个新的概念：行内编辑。这使得我们能够直接去编辑html页面，实现所见即所得。
• 控件
  
  • 控件是可定制的单位，它的内容丰富，可在CKEditor的所见即所得区域内自由重用和移动而不会破坏周围的内容。和其余的文本相比，这些组件有
    独立的风格和格式，它们甚至能够被赋予不同的用户权限。
  • 简单的盒子(BOX)样板
    
    • 下面演示了一个简单的具有标题和评论区域的组件的使用。这个预定义的单元能够被轻易的在所见即所得区域内插入、删除或者移动。观看官方
      文档以了解如何创建这样的widgets.
  • Code Snippets(代码片段)
    
    • 下面的编辑器实例是在CKEditor4.4中引进的使用代码片段控件的例子。它允许你去插入丰富的、语法高亮的代码。观看官方文档以了解如何安
      装、配置、根据你的需要定制插件。
  • 图片增强
    
    • 编辑器实例(editor instance)使用图片增强控件，控件支持创建能够被插入到编辑内容中的标题图片，也支持用“单击和拖动”来进行图片的
      动态调整。
  • 数学公式
    
    • 下面的编辑器实例演示了数学公式控件的使用。它能够在编辑文本内容中插入方程式(使用TeX)，这个控件也是第三方类库如何在CKEditor所见
      即所得区域使用的一个例子。

用户接口

• 皮肤
  
  • CKEditor Add-Ons仓库根据需求提供了不同种类的皮肤，你很容易找到适合你的皮肤，一般在这里你有几种不同的选择。
    
    • Moono(默认)
    • kama
• UI color
  
  • 你可以单击任意可用的颜色来定制你的编辑器color，任何十六进制的颜色都能使用。
• UI Languages
  
  • CKEditor用户接口是本地化的，默认下它会尝试使用搭配你的系统配置的语言。可用的语言有66中，你可以使用你当地的语言进行测试。
• Toolbar Configuration(工具条的配置)
  
  • 系统默认提供了三种配置：Simple Toolbar、Standard Toolbar、Full Toolbar,当然你可以根据自己的需要来进行配置。
• Toolbar position(工具条位置)
  
  • 将工具条移动到UI的底部是相当容易的。
• DIV based editor
  
  • 在div中的内容
    
    • 可以在CKEditor编辑区域内使用div元素，通过这种方式，文本内容将会继承包含编辑器的页面的CSS。在下面的例子中，注释、字体和颜色都
      将继承站点的设置。
• Accessibility(可接入性)
  
  • CKEditor在编辑功能上,为浏览器提供最好的可接入性。它具有几种不同的创新，而这些创新现在已经成为了市场标准，并且遵守WAI-ARIA和
    Section 508的要求。
  • 在你的编辑器里尝试一下下列的键盘特性：

>
ALT+0:展示Accessibility的帮助文档，这对具有屏幕阅读器的使用者来说正好可以学习怎样使用编辑器。
ALT+F10:将键盘焦点移动到工具条上，而当焦点在工具条中时：
ARROW-RIGHT and ARROW-LEFT：表示在工具条的一个group里面进行移动。
TAB:移动到下一个group，如果再加上SHIFT表示移动回去。
ENTER or SPACE：表示激活选中的目标。
ALT+F11:移动键盘焦点到元素的路径上。这个导航看上去正如工具条上描述的那样形象。
对话框也提供类似的键盘导航

Behavior

• Enter Key(键入关键字)
  
  • 默认下，CKEditor能够产生高质量的、具有语义强调的文本内容。也正因如此，段落标签

    才能够支持块状文本。你也能去配置编辑器以使得ENTER
    键能够产生
    

    等标签。但是这不是可取的(我们还是遵循WEB的要求)，当然在某些比赛中可能会这样做。
• Read-Only Mode(只读模式)
  
  • 你能够配置使得编辑器处于只读模式，这时编辑功能是不可用的，但是某些功能仍然可用。
• TAB key focus(TAB键焦点)
  
  • 利用TAB键进行导航：CKEditor通过点击TAB或者SHIFT+TAB在页面的不同区域内进行跳转，正如我们平常操作的那样。

Data Control(数据控制)

• 先进的文本过滤功能
  
  • 这个例子展示了CKEditor4.1的文本过滤功能是如何进行工作的。所有的CKEditor实例在开始载入文本时是相同的，然而第二个实例因为可用的功能
    较少，所以不是所有的HTML内容都是可编辑的，比如该实例移除了图片和头部。先进的文本过滤器在粘贴时也能工作，你可以试一下将Standard instance
    中的文本粘贴到Basic instance中去，你会发现文本仍然被过滤了。
• 输出XHTML 1.1
  
  • 产生XHTML1.1兼容输出：这个例子展示了CKEditor通过配置可以输出有效的XHTML代码。过时的元素或者属性size\face，将会被XHTML
    的兼容代码替换掉。
• Flash输出
  
  • 本例子展示了当CKEditor加载内部的flash时仍然能够正常工作。
• 整页编辑
  
  • 本例子展示了怎样去配置CKEditor以为了编辑全部的HTML页(从到) //点击sorce即源码按钮即可实现
• BBCode
  
  • BBCode plugin demo:这是一个CKEditor专门的自定义数据处理器用来产生BBCode而不是HTML，请注意编辑器在这里不仅接受BBCode的输出也接
    受输入。
  • 数据处理是CKEditor的一个强大的特点。通过创建插件，可以使得CKEditor去透明地处理不同的数据格式，比如BBCode，Wiki format，Markdown等。