如何使用 contenttools 编辑带有（按钮）链接的 html？

Question

我使用 contenttools 脚本。

我有以下代码：如何编辑 "READ MORE" 文本？

<div data-name="main-content-1" data-editable="" class="home3-box1">
<h3>
    Test test test
</h3>
<p>
    Test test test Test test test Test test test
</p>
<a href="#" class="btn btn-success btn-default">READ MORE</a></div>

https://jsfiddle.net/0x15nshk/1/

Answer 1

您可以在此处尝试多种方法，其中最简单的方法是将按钮放置在可编辑的文本标记（例如段落）中，例如：

<p>
    <a href="#" class="btn btn-success btn-default">READ MORE</a> 
</p>

或者如果您不希望有额外的 p 元素，您可以将 a 标记标记为文本元素类型，如下所示：

<a href="#" class="btn btn-success btn-default" data-ce-tag="text">READ MORE</a>

请注意此处使用 data-ce-tag 属性来标记该元素应被解析为 ContentEdit.Text 元素。

您可能还想考虑在标签的编辑方式方面对标签施加一些限制，在最新版本的 ContentTools (1.2.5) 中，这现在是可行的，但仍处于试验阶段。作为您可能如何处理此问题的简单示例：

// Define a limited set of tools that can be used with buttons
var BUTTON_TOOLS = [
    ['align-left', 'align-center', 'align-right'], 
    ['undo', 'redo']
    ];

ContentEdit.Root.get().bind('focus', function (element) {
    var tools;

    // Whenever a button is selected switch to the button only tools
    if (element.domElement().containsClass('btn')) {
        tools = BUTTON_TOOLS;
    } else {
        tools = ContentTools.DEFAULT_TOOLS;
    }

    if (ContentTools.EditorApp.get().toolbox().tools() !== tools) {
        ContentTools.EditorApp.get().toolbox().tools(tools);
    }

    // Limit the behaviour of the button so it can't be moved, merged or removed
    if (element.domElement().classList.contains('btn')) {
        element.can('drag', false);
        element.can('drop', false);
        element.can('remove', false);
        element.can('merge', false);
    } 
});

此处提供了不同元素行为的文档：http://getcontenttools.com/api/content-edit#behaviours

如何使用 contenttools 编辑带有（按钮）链接的 html？

How do I use contenttools to edit html with a (buttons) links?

wysiwyg