如何使用 contenttools 编辑带有(按钮)链接的 html? [英] How do I use contenttools to edit html with a (buttons) links?

问题描述

我使用 contenttools 脚本.

http://getcontenttools.com/demo

我有以下代码:如何编辑阅读更多"文本?

<h3>测试测试测试<p>测试测试测试测试测试测试测试测试测试</p><a href="#" class="btn btn-success btn-default">阅读更多</a></div>

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

解决方案

您可以在这里尝试几种方法，其中最简单的方法是将按钮放置在可编辑的文本标签中，例如段落，例如:

<a href="#" class="btn btn-success btn-default">阅读更多</a></p>

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

<a href="#" class="btn btn-success btn-default" data-ce-tag="text">阅读更多</a>

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

在最新版本的 ContentTools (1.2.5) 这现在是可能的，但是是实验性的.作为您如何处理此问题的简单示例:

//定义一组可与按钮一起使用的有限工具var BUTTON_TOOLS = [['align-left', 'align-center', 'align-right'],['撤销重做']];ContentEdit.Root.get().bind('focus', function (element) {var 工具；//每当一个按钮被选中时切换到该按钮的工具if (element.domElement().containsClass('btn')) {工具 = BUTTON_TOOLS;} 别的 {工具 = ContentTools.DEFAULT_TOOLS;}if (ContentTools.EditorApp.get().toolbox().tools() !== tools) {ContentTools.EditorApp.get().toolbox().tools(tools);}//限制按钮的行为，使其不能被移动、合并或移除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/内容编辑#behaviours

I using contenttools script.

http://getcontenttools.com/demo

I have following code: How can I edit "READ MORE" text?

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

解决方案

There are a couple of approaches you can try here, the simplest of which is placing the button within an editable text tag such as a paragraph, e.g:

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

Or if you'd prefer to not have the additional p element you can mark the a tag as a text element type like so:

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

Note the use of the data-ce-tag attribute here to flag that the element should be parsed as a ContentEdit.Text element.

You might also want to consider applying some restrictions to the tag in terms of how it can be edited, in the latest version of ContentTools (1.2.5) this is now possible but experimental. As a simple example of how you might approach this:

// 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);
    } 
});

Documentation for the different element behaviours is provided here: http://getcontenttools.com/api/content-edit#behaviours

这篇关于如何使用 contenttools 编辑带有(按钮)链接的 html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！