vue中wangEditor的使用及回顯數(shù)據(jù)獲取焦點的方法
在做后臺管理項目時常常會用到富文本編輯器,在這里推薦大家使用wangEditor
,非常好用
第一步安裝
npm i wangeditor --save
第二步在項目中使用
html
頁面中的編輯、添加布局在最下面
<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', // 字號 'fontName', // 字體 'italic', // 斜體 'underline', // 下劃線 'strikeThrough', // 刪除線 'foreColor', // 文字顏色 'backColor', // 背景顏色 'link', // 插入鏈接 'list', // 列表 'justify', // 對齊方式 'quote', // 引用 'image', // 插入圖片 'table', // 表格 'code', // 插入代碼 'undo', // 撤銷 '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 獲取焦點 this.$refs['dialogForm'].resetFields() this.initEditor() // 調(diào)用上面寫的方法 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ù) } }) }, }
看下面的圖片
本來是獲取到焦點的,但是我在截圖的時候焦點是不在的,你在圖片中看不到焦點
html
<el-row> <el-dialog top="50px" :title="titleType == 1 ? '添加問題' : '編輯問題'" :visible.sync="dialogVisible" width="50%" @close="closeDialog"> <div> <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" label-width="100px"> <el-form-item label="部門" prop="departmentId"> <el-select v-model="dialogForm.departmentId" placeholder="請選擇部門"> <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="請選擇系統(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)先級別" prop="priorityLevel"> <el-select v-model="dialogForm.priorityLevel" placeholder="請選擇優(yōu)先級別"> <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">點擊上傳</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ù)獲取焦點的文章就介紹到這了,更多相關(guān)vue wangEditor使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js 時間轉(zhuǎn)換代碼及時間戳轉(zhuǎn)時間字符串
這篇文章主要介紹了Vue.js 時間轉(zhuǎn)換代碼及時間戳轉(zhuǎn)時間字符串,需要的朋友可以參考下2018-10-10vue?element?ui表格相同數(shù)據(jù)合并單元格效果實例
工作中遇到需要根據(jù)單元格某個屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關(guān)于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11