vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點(diǎn)的方法
在做后臺(tái)管理項(xiàng)目時(shí)常常會(huì)用到富文本編輯器,在這里推薦大家使用wangEditor
,非常好用
第一步安裝
npm i wangeditor --save
第二步在項(xiàng)目中使用
html
頁(yè)面中的編輯、添加布局在最下面
<div id="div1"> <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p> </div> <el-button type="primary" @click="createData()">創(chuàng)建需求</el-button> <el-button size="mini" @click="createData(index, row, true)">編輯</el-button>
import E from 'wangeditor' // 引入插件 const editor = null // 或者 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') // 自定義菜單配置 editor.config.menus = [ 'head', // 標(biāo)題 'bold', // 粗體 'fontSize', // 字號(hào) 'fontName', // 字體 'italic', // 斜體 'underline', // 下劃線 'strikeThrough', // 刪除線 'foreColor', // 文字顏色 'backColor', // 背景顏色 'link', // 插入鏈接 'list', // 列表 'justify', // 對(duì)齊方式 'quote', // 引用 'image', // 插入圖片 'table', // 表格 'code', // 插入代碼 'undo', // 撤銷(xiāo) 'redo' // 重復(fù) ] editor.config.onchange = (html) => { // 編輯器里的內(nèi)容 console.log(html, '內(nèi)容') this.dialogForm.description = html // 賦值給自己在data中定義的值 } editor.config.customUploadImg = (files, insert) => { // 富文本里的上傳圖片 const param = new FormData() param.append('file', files[0]) requireManage.updateOther(param).then((res) => { // 上傳圖片接口 if (res.data) { insert(res.data[0]) } }) } editor.create() // 創(chuàng)建使用富文本 }, createData( row, edit) { // 新建或者編輯回顯 this.dialogVisible = true this.$nextTick(() => { // 使用 this.$nextTick 獲取焦點(diǎn) this.$refs['dialogForm'].resetFields() this.initEditor() // 調(diào)用上面寫(xiě)的方法 editor.txt.html('') // 清空富文本的內(nèi)容 if (edit) { // 如果是編輯進(jìn)行下一步 this.dialogForm = JSON.parse(JSON.stringify(row)) // 回顯的數(shù)據(jù) this.dialogForm.id = row.id editor.txt.html(this.dialogForm.description) // 向富文本中插入回顯的數(shù)據(jù) } }) }, }
看下面的圖片
本來(lái)是獲取到焦點(diǎn)的,但是我在截圖的時(shí)候焦點(diǎn)是不在的,你在圖片中看不到焦點(diǎn)
html
<el-row> <el-dialog top="50px" :title="titleType == 1 ? '添加問(wèn)題' : '編輯問(wèn)題'" :visible.sync="dialogVisible" width="50%" @close="closeDialog"> <div> <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" label-width="100px"> <el-form-item label="部門(mén)" prop="departmentId"> <el-select v-model="dialogForm.departmentId" placeholder="請(qǐng)選擇部門(mén)"> <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="選擇系統(tǒng)" prop="systemConfigId"> <el-select v-model="dialogForm.systemConfigId" placeholder="請(qǐng)選擇系統(tǒng)"> <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="標(biāo)題" prop="title"> <el-input v-model="dialogForm.title" /> </el-form-item> <el-form-item label="描述" prop="description"> <div id="description" style="width: 100%" /> </el-form-item> <el-form-item label="優(yōu)先級(jí)別" prop="priorityLevel"> <el-select v-model="dialogForm.priorityLevel" placeholder="請(qǐng)選擇優(yōu)先級(jí)別"> <el-option label="高" :value="3" /> <el-option label="中" :value="2" /> <el-option label="低" :value="1" /> </el-select> </el-form-item> <el-form-item label="上傳附件"> <el-upload action="/fms/api/productDev/updateOther" > <el-button size="small" type="primary">點(diǎn)擊上傳</el-button> </el-upload> </el-form-item> </el-form> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary">提交</el-button> </span> </el-dialog> </el-row>
到此這篇關(guān)于vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點(diǎn)的文章就介紹到這了,更多相關(guān)vue wangEditor使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Avue實(shí)現(xiàn)動(dòng)態(tài)查詢與數(shù)據(jù)展示的示例代碼
- vue中輕量級(jí)模糊查詢fuse.js使用方法步驟
- vue中el表單的簡(jiǎn)單查詢方法
- 5種vue模糊查詢的方法總結(jié)
- vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢)
- Vue前端如何實(shí)現(xiàn)與后端進(jìn)行數(shù)據(jù)交互
- vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
- 詳解vue與后端數(shù)據(jù)交互(ajax):vue-resource
- Vue?3?表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程
相關(guān)文章
Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串
這篇文章主要介紹了Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串,需要的朋友可以參考下2018-10-10Vue3配置vite.config.js解決跨域問(wèn)題的方法
跨域一般出現(xiàn)在開(kāi)發(fā)階段,由于線上環(huán)境前端代碼被打包成了靜態(tài)資源,因而不會(huì)出現(xiàn)跨域問(wèn)題,這篇文章主要給大家介紹了關(guān)于Vue3配置vite.config.js解決跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2024-07-07vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
工作中遇到需要根據(jù)單元格某個(gè)屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關(guān)于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問(wèn)題
這篇文章主要介紹了vue前后端分離如何解決每次請(qǐng)求session都會(huì)變的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08