silverstripe - 如何在 Silverstripe 编辑器中添加自定义按钮？

Question

我希望能够让用户在 silverstripe 的内容编辑器中添加样式按钮。他们需要能够编辑按钮内的文本，还需要能够将其链接到另一个页面或网站。我相信您可以使用短代码来做到这一点，或者可能在 tiny_mce 编辑器上有一个按钮会更好？

HTML:

<a href="http://www.need-to-be-editable.com">
    <div class="ribbon">
        <strong class="ribbon-content"><h1>Need to be editable</h1></strong>
    </div>
</a>

JSFIDDLE - HTML & CSS for button

Answer 1

首先，HTML 不是语义的 - 您在 block 元素周围有内联元素，除非此按钮将启动一个新部分，否则您不应该使用 H1 标签。

理想情况下，您可以将链接标记简化为如下所示:

<a href="http://www.need-to-be-editable.com" class="ribbon">
    Editable text
</a>

然后您可以轻松地将“ribbon”类应用到编辑器中的链接，链接可以位于 P、H1、H2 或任何适合上下文的位置。查看this module如果您选择这种方法，请获取有关驯服编辑器的一些技巧。

如果您需要更复杂的标记并包含多个元素，那么短代码可能是更好的选择。 Shortcodable是一个方便的模块，用于改善 CMS 中短代码的编辑体验。