JS-based rich text editor disappers as soon as page loaded

Phoenix Forum Questions / Help
,
2

Perhaps try adding phx-update="ignore"
My setup for quill seems to work like this:

<div 
    id="quillEditor"
    phx-hook="quillEditor"
    phx-update="ignore"
    class="quillEditor"
  >
  </div>
<%= text_input f, :quill, [value: Jason.encode!(@changeset.data.quill), type: "hidden", id: "quillHiddenInput", phx_update: "ignore"] %>

Then my hook looks like this:

export const quillEditor = {
  mounted() {
    const input = document.getElementById('quillHiddenInput');
    const editorInstance = new Quill('#quillEditor', {});
    let initContent = JSON.parse(input.value || "{}")
    editorInstance.setContents(initContent)
    editorInstance.on('text-change', function (delta, oldDelta, source) {
      const contents = editorInstance.getContents();
      input.value = JSON.stringify(contents);
    });
  }
}
3 Likes