How to use wangEditor in vue and how to get focus by echoing data

How to use wangEditor in vue and how to get focus by echoing data

Rich text editors are often used when doing background management projects. Here I recommend you to use wangEditor , which is very easy to use.

asdfz34567

First step installation

npm i wangeditor --save

The second step is to use it in the project

html

Edit and add layout in the page are at the bottom

<div id="div1">
    <p>Welcome to <b>wangEditor</b> rich text editor</p>
</div>

<el-button type="primary" @click="createData()">Create requirement</el-button>
<el-button size="mini" @click="createData(index, row, true)">Edit</el-button>
import E from 'wangeditor' // Import plugin const editor = null
// or const editor = new E( document.getElementById('div1') )
data() {
	return {
		dialogForm: {
	        id: null,
	        departmentId: '',
	        systemConfigId: '',
	        title: '',
	        description: '',
	        priorityLevel: '',
	        fileUrl: ''
	      },
      },
},
methods: {
    initEditor() {
      if (editor) return
      editor = new E('#div1')
      // Custom menu configuration editor.config.menus = [
        'head', // title'bold', // bold'fontSize', // font size'fontName', // font'italic', // italic'underline', // underline'strikeThrough', // strikethrough'foreColor', // text color'backColor', // background color'link', // insert link'list', // list'justify', // quote'image', // insert image'table', // table'code', // insert code'undo', // undo'redo' // repeat]
      editor.config.onchange = (html) => { // Contents in the editor console.log(html, 'content')
        this.dialogForm.description = html // Assign the value defined in data}

      editor.config.customUploadImg = (files, insert) => { // Upload image in rich text const param = new FormData()
        param.append('file', files[0])
        requireManage.updateOther(param).then((res) => { // Upload image interfaceif (res.data) {
            insert(res.data[0])
          }
        })
      }
      editor.create() // Create using rich text},
    createData( row, edit) { // Create or edit the display this.dialogVisible = true
      this.$nextTick(() => { // Use this.$nextTick to get focus this.$refs['dialogForm'].resetFields()
        this.initEditor() // Call the method written above editor.txt.html('') // Clear the content of the rich text if (edit) { // If it is editing, proceed to the next step this.dialogForm = JSON.parse(JSON.stringify(row)) // Echoed data this.dialogForm.id = row.id
          editor.txt.html(this.dialogForm.description) //Insert echoed data into rich text}
      })
    },
 }

See the picture below

The focus was originally acquired, but it was not in focus when I took the screenshot, and you can't see the focus in the picture

dsfgcv12345

html

<el-row>
	<el-dialog top="50px" :title="titleType == 1 ? 'Add question' : 'Edit question'" :visible.sync="dialogVisible" width="50%" @close="closeDialog">
      <div>
        <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" label-width="100px">
          <el-form-item label="Department" prop="departmentId">
            <el-select v-model="dialogForm.departmentId" placeholder="Please select a department">
              <el-option v-for="item in requriDepart" :key="item.id" :label="item.departmentName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="Select system" prop="systemConfigId">
            <el-select v-model="dialogForm.systemConfigId" placeholder="Please select system">
              <el-option v-for="item in systemArr" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="Title" prop="title">
            <el-input v-model="dialogForm.title" />
          </el-form-item>
          <el-form-item label="Description" prop="description">
            <div id="description" style="width: 100%" />
          </el-form-item>
          <el-form-item label="Priority Level" prop="priorityLevel">
            <el-select v-model="dialogForm.priorityLevel" placeholder="Please select the priority level">
              <el-option label="High" :value="3" />
              <el-option label="中" :value="2" />
              <el-option label="Low" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="Upload attachment">
            <el-upload action="/fms/api/productDev/updateOther" >
              <el-button size="small" type="primary">Click to upload</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">Submit</el-button>
      </span>
    </el-dialog>
 </el-row>

This is the end of this article about the use of wangEditor in vue and how to get the focus by echoing data. For more relevant content on the use of vue wangEditor, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Details on how to write react in a vue project
  • Vue+element implements drop-down menu with local search function example
  • Comparison of the advantages of vue3 and vue2
  • Vue realizes dynamic progress bar effect
  • Vue implements dynamic circular percentage progress bar
  • Vue realizes the percentage bar effect
  • How to implement draggable components in Vue
  • Eight ways to implement communication in Vue

<<:  Zabbix implements monitoring of multiple mysql processes

>>:  Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps

Blog    

Recommend

Research on the Input Button Function of Type File

<br />When uploading on some websites, a [Se...

Recommend a cool interactive website made by a front-end engineer

Website link: http://strml.net/ By Samuel Reed Ti...

Detailed analysis of MySQL 8.0 memory consumption

Table of contents 1. innodb_buffer_pool_size 2. i...

Analysis of the principle of centering elements with CSS

It is a very common requirement to set the horizo...

SQL Optimization Tutorial: IN and RANGE Queries

Preface "High Performance MySQL" mentio...

Vue uses better-scroll to achieve horizontal scrolling method example

1. Implementation principle of scrolling The scro...

How to use Navicat to export and import mysql database

MySql is a data source we use frequently. It is v...

Detailed process of upgrading glibc dynamic library in centos 6.9

glibc is the libc library released by gnu, that i...

How to solve the problem of too many open files in Linux

The cause is that the process opens a number of f...

In-depth understanding of MySQL slow query log

Table of contents What is the slow query log? How...

Vue3 slot usage summary

Table of contents 1. Introduction to v-slot 2. An...

Vue+Echart bar chart realizes epidemic data statistics

Table of contents 1. First install echarts in the...

Introduction to JavaScript conditional access attributes and arrow functions

Table of contents 1. Conditional access attribute...

CSS3 custom scroll bar style::webkit-scrollbar sample code detailed explanation

The default scroll bar style in Windows is ugly, ...