使用ckeditor功能来设置小块文本的样式

Question

我是目前唯一的内容管理系统开发商（FreeToastHost），该系统曾用于为全球10,000多个Toastmasters公共演讲俱乐部制作免费网站。 CKEditor是我们用来使这个系统成为可能的关键开源插件之一。我们的用户通常技术水平很低，系统旨在为他们创建尽可能简单的网站。除了与CKEditor一起用于页面内容创作的完整文本区域之外，我在配置工具表单中还有许多文本输入，允许我们的用户通过系统中不同位置使用的文本“片段”进行一些样式设置。进入基本的BBCode。例如，标头中使用的俱乐部标识文本（我们的用户可以称之为“标题”）支持BBCode的输入：

---

我倾向于认为要求我们的用户输入BBCode可能看起来太技术了，而我正在寻找一种方法来使用我们已经用于这些小的，可能是样式的文本片段的CKeditor功能。理想的是一个基本的简单浮动样式工具栏，当用户点击输入时会显示该工具栏。由于这些是当前的输入，我想我可能必须将它们转换为内容可编辑的div或文本区域以与CKEditor一起使用（不希望转换），并为刚刚使用的弹出工具栏创建新的配置对于这些控件。有没有人用CKEditor做过这样的事情？什么是最好的方法？

Answer 1

您可以使用inline mode of CKEditor。

一个简单的例子：http://jsfiddle.net/jhvtz6pb/

加载CKEditor脚本和CSS样式：

<script src="http://cdn.ckeditor.com/4.4.7/standard-all/ckeditor.js"></script>
<link href="http://sdk.ckeditor.com/theme/css/sdk-inline.css" rel="stylesheet">

然后，只需将contenteditable="true"属性添加到要编辑的元素即可。