【问题标题】:Creating Code Blocks <code> or <pre> in CKEditor在 CKEditor 中创建代码块 <code> 或 <pre>
【发布时间】:2010-05-28 17:57:37
【问题描述】:

是否有插件允许用户创建&lt;code/&gt;&lt;pre/&gt; 块?

如果我传入一些包含 &lt;code&gt; &lt;/code&gt; 块的 html,则会显示内容,但没有视觉指示它与任何其他文本不同。这很不方便,但我似乎无法找到一种方法,让用户可以选择他们键入并希望按字面意思显示的代码块,然后单击一个按钮来表明这一点。

我对 CKEditor 还是很陌生,但我知道 Telerik 有一个 pretty graceful implementation。 (只需单击标题为“格式化代码块”的右上角工具栏按钮)。

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

【问题讨论】:

    标签: plugins ckeditor


    【解决方案1】:

    至于前置元素,wwalc 有这个插件:http://ckeditor.com/addon/insertpre

    它也可以在 GitHub 上找到:https://github.com/wwalc/insertpre

    唯一的问题是它已经有一段时间没有更新了——它官方只支持 CKE 到 4.1 版本——所以至少可能存在一些 ACF 问题。您可以在 http://ckeditor.com/addons/plugins/all 使用 codepre 等关键字搜索替代方案,这将始终显示最新的结果。

    【讨论】:

      【解决方案2】:

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

      启用 Format 插件后,它会将 Format 下拉列表添加到您的工具栏。检查 Formatted 文本格式 - 它使用 &lt;pre&gt; 标签包裹活动文本块。请注意,它适用于块级,因此您甚至不需要执行任何文本选择。但是,这也意味着它不适合内联格式。

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

      对于内联代码格式,Styles drop-down list 包含内联 计算机代码 样式,该样式使用 &lt;code&gt; 标记包装文本选择。同样,您可以(并且实际上应该)使用此功能应用的customize the styling

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-06-04
        • 1970-01-01
        • 1970-01-01
        • 2021-02-16
        • 1970-01-01
        • 2019-02-03
        • 2021-01-11
        相关资源
        最近更新 更多