How to use assign ? about contenttools HOT 2 OPEN

CT tools can't be used against nodes directly the DOM node must be converted to a ContentEdit.Node instance. Each ContentEdit.Node class has a class method of fromDOMElement which can be used to convert a DOM node to a relevant instance, e.g:

const myNode = document.getElementById('my-node');
const myEditableNode = ContentEdit.fromDOMElement(myNode)
ContentTools.Bold.apply(myEditableNode, ContentSelect.Range.query(myNode));

However, the library isn't really designed to be used in this way so I'm not sure the above would be all that useful as a general solution here.

So there's 2 approaches I might recommend - you could either use the default editor but use CSS to make it appear how you want it to, you could changes the tools in the toolbox by updating the value of ContentTools.DEFAULT_TOOLS (https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/namespace.coffee). This is a fairly simple approach and one I've used before to implement minimal page editors where more appropriate.

However, if you want full control then you need to look at the EditorApp class (https://github.com/GetmeUK/ContentTools/blob/master/src/scripts/editor.coffee) and basically implement a version of this that uses the UI you want to implement. That would be quite a big task.

If you are looking for really minimal editing features (bold, italic, link) there are libraries better suited I believe such as https://github.com/yabwe/medium-editor

from contenttools.

Thank you for your answer.
I managed to do what I wanted.
First, it seems that div Element are not allowed to be converted in editable Elements. So I added a

element to surround my text.

<button id="tag_b">B</button>
<div id="text_prompt" contenteditable="true" data-editable data-name="main-content"><p>Test test test test</p></div>

To convert my node to an editable node, I tried ContentEdit.fromDOMElement (it doesn't exist), I tried ContentEdit.Static.fromDOMElement (it's not the correct class for what I want) and it worked with ContentEdit.Text.fromDOMElement
When I tried to apply I had this error :

Uncaught TypeError: this._domElement is null

That's because I added the third line :

var myTextNode = document.getElementById('text_prompt').firstChild;
myEditableTextNode = ContentEdit.Text.fromDOMElement(myTextNode);
myEditableTextNode._domElement = myTextNode;
ContentTools.Tools.Bold.apply(myEditableTextNode, ContentSelect.Range.query($('text_prompt')), function(){});

So I think there's a bug when we create an editable element from a DOM element.

from contenttools.