创建代码块<code> or <pre> in CKEditor</pre></code>

时间:2010-05-28 17:57:38

标签: plugins ckeditor

是否有允许用户创建<code/><pre/>块的插件?

如果我传入一些包含<code> </code>块的html,则会显示内容,但没有任何视觉指示它与任何其他文本不同。这不方便,但我似乎无法找到一种方式,用户可以选择他们想要按字面意思显示的代码块,然后单击按钮来指示。

我仍然是CKEditor的新手,但我知道Telerik有一个pretty graceful implementation。 (只需单击标题为“格式代码块”的右上方工具栏按钮)。

这个编辑器支持吗?他们的添加此功能的插件是什么?

2 个答案:

答案 0 :(得分:1)

至于pre-elements,wwalc有这个插件:http://ckeditor.com/addon/insertpre

它也可以在GitHub中使用:https://github.com/wwalc/insertpre

唯一的问题是它暂时没有更新 - 它官方只支持CKE到版本4.1 - 因此至少可能存在一些ACF问题。您可以使用代码 pre 等关键字在http://ckeditor.com/addons/plugins/all搜索备选方案,这将始终显示最新结果。

答案 1 :(得分:1)

对于代码块,您还可以使用Text Formats功能 - 默认情况下,它可以在标准和完整预设中使用,但您也可以add it to your custom build

启用“格式”插件后,它会将格式下拉列表添加到工具栏中。检查格式化文本格式 - 它使用<pre>标记包装活动文本块。请注意,它在块级别上工作,因此您甚至不需要执行任何文本选择。但是,这也意味着它不适合内联格式化。

您还可以通过调整config.format_pre定义,为格式化格式添加一些自定义样式。有关默认实现和自定义格式定义的演示,请参阅Applying Block-Level Text Formats示例(向下滚动示例页面以获取两个解决方案的完整源代码)。

对于内联代码格式,Styles drop-down list包含内联计算机代码样式,该样式包含带有<code>标记的文本选择。同样,您可以(实际上应该)customize the styling应用此功能。

此外,对于某些真正花哨的代码格式,请参阅可选的Code Snippet插件。它允许您将带有语法突出显示的代码片段插入编辑器中。这些片段看起来很棒(你也可以选择你喜欢的主题),因为它们是作为小部件实现的,它们具有CKEditor widgets的所有优点:代码片段被视为编辑器中的单个实体,你可以选择它作为一个整体,删除,通过拖放等方式更改其位置。有关详细信息和示例,请参阅documentationsample