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

问题

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/

回答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

来源：https://stackoverflow.com/questions/37370944/how-do-i-use-contenttools-to-edit-html-with-a-buttons-links

标签

wysiwyg