vue plug-in implements v-model function

Recently, I am developing my own rich text editor plug-in. I have encountered many problems in development. Among them, I think the better problem is to implement two-way binding in the plug-in you define. It's like the function of v-model in input.

v-model syntax:

In vue, we implement the two-way binding code of the form is generally written like this:

<input type="text" v-model="value" style="line-height: 30px;">
data () {
 return {
 value: '222'
 }
}

In this way, the value of value and the value in the input box can be bidirectionally bound.

In fact, v-model is just a syntactic sugar, and its real implementation is like this:

<input type="text" :value="value" @input="value=$">

The above code is divided into several steps:

1. Bind the value of the input box to the variable. This is a one-way binding, which means that changing the value of the variable can change the value of the input box, but changing the value of the input box cannot change the value of the variable.

2. Listen to the input event (the input input box has this event, and the event is automatically triggered when the content is input), and when the input content is input, the value of the variable will be changed in one direction.

Custom editor two-way binding

This is how to write a plug-in: content is a two-way bound value. height refers to the height of the editor.

<editor v-model="content" :height="editorHeight"></editor>

How to write plugin vue:

<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText"></div>

When setting the contenteditable property in the div, set the div to an editable input box. v-html is the input method that unidirectionally binds the variable contentHtml value to the editor. The input method obtains the editor's content and returns it to the parent element:

 changeText () {
  const htmlString = this.$
  this.$emit('input', htmlString)
 },

Other questions:

This alone cannot solve the problem. When you enter the editor, you will jump to the beginning position every time you enter: How to solve it? Let's not talk about the code:

props: {
 value: {
  type: String,
  default: ''
 },
 height: {
  type: String,
  default: 'auto'
 }
 },
data () {
 return {
  // Editor content  contentHtml:  ||  === 0 ?  : '&lt;div&gt;&lt;br&gt;&lt;/div&gt;',
  // Is it being compiled  isLocked: true,
  // Cursor position  lastEditRange: null
 }
 },
 watch: {
 value (val) {
  if (!) {
   = ;
  }
 }
 }

After writing this, you should be confused. What's the use of writing this way: because there are still some codes:

 &lt;div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText" @focus="focusEditor" @blur="blurEditor"&gt;&lt;/div&gt;
 // The editor loses focus blurEditor (event) {
   = false
 },
 // The editor gets focus focusEditor (event) {
   = true
 },

There are two methods to add to the plug-in to determine whether the editor is editing the content. If the value bound by the parent component is being edited, it will not be allowed to re-render the child component, so that the content in the editor will not be re-assigned, so that the cursor will not run to the front every time.

Let me summarize it in a small way:

•v-bind can only implement one-way binding
• v-model (input event triggered by v-bind+) realizes two-way binding

Summarize

The above is the vue plug-in that the editor introduced to you to implement the v-model function. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!