本文针对的是iview-admin中使用wangEditor,iview-admin中已经有封装好的wangEditor组件,
只需要调用即可(仅为自己做记录)。
1.HTML代码
<FormItem label="详情:" prop="content" >
<editor ref="myEditor" v-model="formValidate.content" @send="send" ></editor >
</FormItem >
//@send 是动态获取输入内容,更新到formValidate.content中。
2.JS代码
<script >
//引用文件
import Editor from '@/components/editor/editor.vue'
export default {
components: {
Editor
},
watch: {
rowData (val) {
// 如果是编辑功能,数据库读取的内容赋值给文本编辑器
// escape2Html 是因为我读取出来的数据文本编辑器无法解析HTML标签,我只能用这个方法转换
// 如果有大神知道在哪里设置,请给我留言
this.$nextTick(() => {
this.$refs.myEditor.editor.txt.html(escape2Html(val.content))
})
}
},
methods: {
send (val) {
// 输出 @send 你就可以知道你写进去的内容有没有生效
// console.log(val)
// console.log(this.$refs.myEditor.editor);
},
}
}
// 这个方法是解析 HTML 标签的,我是编辑功能,数据库读取的数据 是html标签,没有转成html样式
function escape2Html (str) {
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {return arrEntities[t];});
}