Two-way bind the Wysiwyg Editor

Topic: Two-way bind the Wysiwyg Editor

phopkins@atomsoftware.com.au free asked 4 years ago

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 commented 4 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 free commented 4 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.

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

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

<pre class="prettyprint"><code><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>

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>
</code></pre>

Please insert min. 20 characters.

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 free commented 4 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 commented 4 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

phopkins@atomsoftware.com.au

92Support score
12Questions 3Answers 0Snippets