Wie benutze ich contenttools, um HTML mit einem (Tasten-) Link zu bearbeiten?

Question

Ich benutze das Skript contenttools.

http://getcontenttools.com/demo

ich folgenden Code haben: Wie kann ich "MEHR" Text bearbeiten?

<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

Es gibt ein paar Ansätze können Sie hier versuchen, die einfachste davon ist die Schaltfläche in einem bearbeitbaren Text Tag wie einen Absatz platzieren, zum Beispiel:

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

Oder wenn Sie das zusätzliche Element p nicht bevorzugen, können Sie das a-Tag als Textelementtyp wie folgt markieren:

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

Beachten Sie die Verwendung des Attributs data-ce-tag, um zu kennzeichnen, dass das Element als ContentEdit.Text-Element analysiert werden soll.

Sie sollten auch überlegen, ob Sie dem Tag einige Einschränkungen in Bezug darauf auferlegen, wie es bearbeitet werden kann. In der neuesten Version von ContentTools (1.2.5) ist dies jetzt möglich, aber experimentell. Als ein einfaches Beispiel dafür, wie Sie diesen Ansatz könnten:

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

Dokumentation für die unterschiedlichen Elementverhalten ist hier zu finden: http://getcontenttools.com/api/content-edit#behaviours