Two-way bind the Wysiwyg Editor


Topic: Two-way bind the Wysiwyg Editor

Hi,

How do you two-way bind the Wysiwyg Editor to the model in Vue?

There is nothing in the documentation that says how you get data in and out of it... please update the documentation so that it is clear how to use this plugin.

Thank you.


Magdalena Dembna staff premium commented 5 years ago

Unfortunately, the intended usage is to copy output from </> tab. But it's actually a very good suggestion - I will add it to our idea board. Kind regards, Magalena


phopkins@atomsoftware.com.au commented 5 years ago

Thank you Magdalena. So could you please provide the code for the recommended usage of copying the output from the tab to the model and back again.

Regards,

Paul.


Magdalena Dembna staff premium answered 5 years ago

This copying from </> was meant for UI user, but you can try to get innerHTML of the editor's second child:

<template>
  <div id="app">
    <div class="container">
      <HelloWorld msg="MDB WYSIWYG" />
      <mdb-wysiwyg ref="editor">
        <p style="text-align: center;">
          <img
            src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
            class="img-fluid"
          />
        </p>
        <h1 style="text-align: center;">MDBootstrap</h1>
        <p style="text-align: center;">WYSIWYG Editor</p>
        <p style="text-align: center;">
          <a
            href="https://mdbootstrap.com"
            target="_blank"
            contenteditable="false"
            style="font-size: 1rem; text-align: left;"
          >MDBootstrap.com</a>&nbsp;© 2019
        </p>
        <p style="text-align: left;">
          <b>Features:</b>
        </p>
        <ul>
          <li>Changing block type</li>
          <li>Text formatting (bold, italic, strikethrough, underline)</li>
          <li>Setting text color</li>
          <li>Text aligning</li>
          <li>Inserting links</li>
          <li>Inserting pictures</li>
          <li>Creating a list (bulled or numbered)</li>
        </ul>
        <p>
          <b>Options:</b>
        </p>
        <ul>
          <li>Translations</li>
          <li>Using your own color palette</li>
          <li>Disabling/enabling tooltips</li>
        </ul>
      </mdb-wysiwyg>
    </div>
  </div>
</template>

<script>
import mdbWysiwyg from 'mdb-wysiwyg'
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    mdbWysiwyg,
    HelloWorld
  },
  methods: {
    getText() {
      let [,text] = this.$refs.editor.$children;
      text = text.$el.innerHTML;
      return text;
    }
  },
  mounted() {
    console.log(this.getText());
  }

}
</script>

phopkins@atomsoftware.com.au commented 5 years ago

Thank you Magdalena, unfortunately the above code doesn't demonstrate how to two-way bind the control to the model, it only demonstrates how to extract the text from the control on load.

All of the Angular, React, and Vue data-centric controls, as pretty as they are, provide very little benefit to their user if they can't be easily bound to their corresponding model.

Could you please work on ensuring that all the data-centric controls can be bound to a model as a priority.

Thank you,


Magdalena Dembna staff premium commented 5 years ago

I am aware of that - unfortunately, for now, this component doesn't provide a better way to do this. I added a task for us to work on this. Kind regards, Magdalena


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.3
  • Device: Desktop PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No