如何使用contenttools通过（按钮）链接编辑html？

我使用的是contenttools脚本。如何使用contenttools通过（按钮）链接编辑html？

我有以下代码：如何修改 “更多” 的文本？

<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/

来源

2016-05-22 andreydruz

有几个办法可以试试在这里，这是最简单的是将可编辑的文本标签中的按钮，如段落，例如：

<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

来源

2016-05-28 10:42:38

如何使用contenttools通过（按钮）链接编辑html？

回答

相关问题