Rich text editors are often used when doing background management projects. Here I recommend you to use First step installation
The second step is to use it in the project html
<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
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:
|
<<: Zabbix implements monitoring of multiple mysql processes
>>: Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps
<br />When uploading on some websites, a [Se...
Website link: http://strml.net/ By Samuel Reed Ti...
Table of contents 1. innodb_buffer_pool_size 2. i...
It is a very common requirement to set the horizo...
Preface "High Performance MySQL" mentio...
1. Implementation principle of scrolling The scro...
MySql is a data source we use frequently. It is v...
glibc is the libc library released by gnu, that i...
The cause is that the process opens a number of f...
1. What problems did we encounter? In standard SQ...
Table of contents What is the slow query log? How...
Table of contents 1. Introduction to v-slot 2. An...
Table of contents 1. First install echarts in the...
Table of contents 1. Conditional access attribute...
The default scroll bar style in Windows is ugly, ...