2-25 wangEditor富文本编辑器
wangEditor富文本编辑器
html页中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script>
</head>
<body>
<div id="a">
</div>
<button onclick="editor.txt.html('<h1>这是标题</h1>')">设置内容</button>
<button onclick="alert(editor.txt.html())">获取内容</button>
<script>
//创建一个编辑器的实例
var editor=new wangEditor(document.getElementById('a'));
//自定义onchange事件
editor.customConfig.onchange=function(html){
console.log(html)
}
// 自定义菜单配置
editor.customConfig.menus = [ 'bold','italic', 'underline', 'strikeThrough', 'link','quote', 'emoticon','image', 'table', 'video','head', 'fontSize', 'fontName','foreColor', 'backColor', 'list', 'justify']
//调用实例下的create方法创建编辑器
editor.create()
</script>
</body>
</html>npm包的形式使用
npm i wangeditor安装完毕后，在.vue文件中进行使用
<template>
<div>
<div id="a"></div>
<button @click="editor.txt.html('<h1>这是标题</h1>')">设置内容</button>
<button @click="getHtml()">获取内容</button>
</div>
</template>
<script>
import wangEditor from 'wangeditor'
export default {
data(){
return {
//用来存放编辑器的实例
editor:undefined
}
},
methods: {
getHtml(){
alert(this.editor.txt.html())
}
},
mounted () {
//创建一个编辑器的实例
this.editor=new wangEditor(document.getElementById('a'));
//自定义onchange事件
this.editor.customConfig.onchange=function(html){
console.log(html)
}
// 自定义菜单配置
this.editor.customConfig.menus = [ 'bold','italic', 'underline', 'strikeThrough', 'link','quote', 'emoticon','image', 'table', 'video','head', 'fontSize', 'fontName','foreColor', 'backColor', 'list', 'justify']
//调用实例下的create方法创建编辑器
this.editor.create()
}
}
</script>实现与data数据相关联
编辑器->html: 编辑器数据变化时，触发onchange事件，在事件的处理函数中，我们去修改绑定的html数据值
html->编辑器：加入watch，监听html数据变化，并且发生变化后，将值通过调用编辑器的设置方法，设置到编辑器上
<template>
<div>
<div id="a"></div>
<button @click="editor.txt.html('1')">设置内容</button>
<button @click="getHtml()">获取内容</button>
<textarea v-model="html"></textarea>
</div>
</template>
<script>
import wangEditor from 'wangeditor'
export default {
data(){
return {
//用来存放编辑器的实例
editor:undefined,
html:'<h1>默认标题</h1>'
}
},
methods: {
getHtml(){
alert(this.editor.txt.html())
}
},
mounted () {
//创建一个编辑器的实例
this.editor=new wangEditor(document.getElementById('a'));
//自定义onchange事件
this.editor.customConfig.onchange=(html)=>{
console.log(html)
this.html=html
}
// 自定义菜单配置
this.editor.customConfig.menus = [ 'bold','italic', 'underline', 'strikeThrough', 'link','quote', 'emoticon','image', 'table', 'video','head', 'fontSize', 'fontName','foreColor', 'backColor', 'list', 'justify']
//调用实例下的create方法创建编辑器
this.editor.create()
this.editor.txt.html(this.html)
},
watch: {
//监听this.html
html:function(value){
console.log(value)
if(this.html!=this.editor.txt.html()){
this.editor.txt.html(value)
}
}
}
}
</script>实现组件封装
- div不要使用id，改为使用ref属性。
- 通过props接收外部传入的value值，作为html的初值，并且加上监听，如果value值变化，更新html值
- 编辑器内容修改的onchange处理函数中，通知input事件，并将内容传出去。
<template>
<div>
<!--第一点-->
<div ref="a"></div>
</div>
</template>
<script>
import wangEditor from 'wangeditor'
export default {
data(){
return {
//用来存放编辑器的实例
editor:undefined,
//第二点，作为html的初始值
html: this.value || ""
}
},
//第二点，接收传入的value
props: ['value'],
methods: {
getHtml(){
alert(this.editor.txt.html())
}
},
mounted () {
//创建一个编辑器的实例
this.editor=new wangEditor(this.$refs.a);
//自定义onchange事件
this.editor.customConfig.onchange=(html)=>{
console.log(html)
this.html=html
//第三点
this.$emit('input',html);
}
// 自定义菜单配置
this.editor.customConfig.menus = [ 'bold','italic', 'underline', 'strikeThrough', 'link','quote', 'emoticon','image', 'table', 'video','head', 'fontSize', 'fontName','foreColor', 'backColor', 'list', 'justify']
//调用实例下的create方法创建编辑器
this.editor.create()
this.editor.txt.html(this.html)
},
watch: {
//监听this.html
html:function(value){
console.log(value)
if(this.html!=this.editor.txt.html()){
this.editor.txt.html(value)
}
},
//第二点，监听props传入的value值变化
value:function(value){
this.html=value;
}
}
}
</script>使用：
<template>
<div>
<textarea v-model="a"></textarea>
<wangEditor v-model="a"></wangEditor>
<wangEditor :value="a" @input="a=$event"></wangEditor>
</div>
</template>
<script>
import wangEditor from './common/wangEditor'
export default {
components: {
wangEditor
},
data(){
return {
a:'<h1>a</h1>',
b:'',
c:''
}
}
}
</script>简化一下，去掉html，直接通过传入的value值去改变输入框内容
<template>
<div>
<div ref="a"></div>
</div>
</template>
<script>
import wangEditor from 'wangeditor'
export default {
data(){
return {
//用来存放编辑器的实例
editor:undefined
}
},
props: ['value'],
mounted () {
//创建一个编辑器的实例
this.editor=new wangEditor(this.$refs.a);
//自定义onchange事件
this.editor.customConfig.onchange=(html)=>{
this.$emit('input',html);
}
// 自定义菜单配置
this.editor.customConfig.menus = [ 'bold','italic', 'underline', 'strikeThrough', 'link','quote', 'emoticon','image', 'table', 'video','head', 'fontSize', 'fontName','foreColor', 'backColor', 'list', 'justify']
//调用实例下的create方法创建编辑器
this.editor.create()
this.editor.txt.html(this.value||'')
},
watch: {
//监听props传入的value值变化
value:function(value){
if(value!=this.editor.txt.html()){
this.editor.txt.html(value)
}
}
}
}
</script>
