Tui.editor: Question : how to save ?

Created on 12 Jan 2018 · 6Comments · Source: nhn/tui.editor

Hi !

Not an issue but a question : I've not yet installed tui.editor and I'm really interested too try it but ... how can we save the content on the server ?

I'm actually using Simple MDE, we can attach on the toolbar a "save" button, retrieve the content of the

and send it to the server with Ajax f.i.

Can we does something like that with tui.editor ? Can you provide tips or documentation ?

Many thanks !!!

Christophe

Question

Source

cavo789

Most helpful comment

I hope this helps you out:

const Editor = TuiEditor.factory({
      el: this.el,
      height: 'auto',
      initialValue: determineValue(this.props),
      initialEditType: 'wysiwyg',
      events: {
        change: this.onChange,
        focus: () => onFocus(),
        blur: () => onBlur(),
      },
})

then for example in your onChange method, youd do this:

    const value = Editor.getMarkdown();

    const value = Editor.getHtml();

michaelryancaputo on 13 Jan 2018

👍8 ❤3

All 6 comments

It just replaces a form-element or div etc. You can save your data like you prefer doing it with other input elements

skerbis on 12 Jan 2018

👍1

Thanks for the very fast answer.

So, to take a real example, on the demo page (https://nhnent.github.io/tui.editor/), I click on the "Features" div, type something and see in the DOM inspector that the change is done in the div with class "te-editor" like :

<div class="te-editor" style="position: relative;">
    <div contenteditable="true">
        <h1>
            <div>
                <span class="colour" style="color:rgb(75, 148, 229)">Features MY CHANGES</span>
            </div>
        </h1>

Should I foresee a .onChange() js function on that DOM elem to retrieve the change ? (how can I very quickly remove the "

" and only retrieve the editor's content).

Thanks

cavo789 on 12 Jan 2018

I hope this helps you out:

const Editor = TuiEditor.factory({
      el: this.el,
      height: 'auto',
      initialValue: determineValue(this.props),
      initialEditType: 'wysiwyg',
      events: {
        change: this.onChange,
        focus: () => onFocus(),
        blur: () => onBlur(),
      },
})

then for example in your onChange method, youd do this: