Tui.editor: Using tui editor in form textarea and using html/markdown in form submission

[aarangara]

Version

1.0.4

Test Environment

Firefox Developer Edition 59.0b13 (64-bit), macOS High Seirra 10.13.3

Current Behavior

More of a question then a bug. I recently tried using tui editor for a textarea inside a form and it doesn't work/render. It renders the editor fine when using it with a div. I won't be able to submit the data from the div (rendered as tui editor) as it doens't become part of the form element and nothing is submitted to the backend code.

Expected Behavior

I want to use tui editor as part of html form where the user's data entered in the editor can be submitted to the backend code.

[Gravitana]

I have the same problem

[kyuwoo-choi]

You have several ways to do that.

The editor has getValue() for Markdown text and getHtml() for HTML text.

One way I can think of is

1. you retrieve the text you like using getValue or getHtml
2. store the text to textarea in a form on submit event.

<form id="form" action="...">
  <div id="editor"></div>    
  <textarea id="article" style="display:none"></textarea>
  <input type="submit" />
</form>

var form = document.getElementById('form');
var textarea = document.getElementById('article');
var editorElement = document.getElementById('editor');
var editor = new tui.Editor({
  ...
  el: editorElement,
  ...
});
form.addEventListener('submit', function() {
  ...
  textarea.value = editor.getValue();
  ...
});

I'm closing this.
you are free to reopen it if you have further question or suggestion about this.

[landall]

You have several ways to do that.

The editor has getValue() for Markdown text and getHtml() for HTML text.

One way I can think of is

1. you retrieve the text you like using getValue or getHtml
2. store the text to textarea in a form on submit event.

<form id="form" action="...">
  <div id="editor"></div>    
  <textarea id="article" style="display:none"></textarea>
  <input type="submit" />
</form>

var form = document.getElementById('form');
var textarea = document.getElementById('article');
var editorElement = document.getElementById('editor');
var editor = new tui.Editor({
  ...
  el: editorElement,
  ...
});
form.addEventListener('submit', function() {
  ...
  textarea.value = editor.getValue();
  ...
});

I'm closing this.
you are free to reopen it if you have further question or suggestion about this.

I think listening to the change of tuieditor and copy value to a hidden input field may be more flexible.