1,第一步,当然是先下载依赖
npm i wangeditor --save
2,第二步,在vue单页面中引用
<script>
import E from "wangeditor";
</script>
3,第三步,写一个弹窗框
<template>
<div>
<el-button type="success" @click="addfrom">添加</el-button>
<el-dialog
:title="eldialog"
:visible.sync="dialogVisible"
@opened="eldialingShow"
width="50%"
:close-on-click-modal="false"
>
<div id="content"></div>
</el-dialog>
</div>
</template>
<script>
import E from "wangeditor";
export default {
data() {
return {
eldialog: "",
text: "",
dialogVisible: false,
};
},
created() {},
methods: {
// 打开弹出框
addfrom() {
// 清空之前的富文本内容
this.text = "";
// 更改弹出框的标题
this.eldialog = "编辑富文本";
// 显示富文本
this.dialogVisible = true;
},
// 弹出框显现后的回调
eldialingShow() {
this.$nextTick(() => {
});
},
},
};
</script>
至此,准备工作已完成,实际上也没剩什么了
接下来就是调用富文本的函数
随便点,起个fun1吧
// 富文本的事件
fun1() {
this.showif = true;
// 先判断富文本是添加还是修改,
// 如果this.text为空则是添加富文本内容,若是修改富文本的内容,只需要将之前的富文本内容赋给this.text即可
if (this.text == "") {
let that = this;
const editor = new E(document.getElementById("content"));
editor.config.onchange = function (newHtml) {
// that.editorContent即为最新的富文本内容
that.editorContent = newHtml;
};
editor.create();
editor.txt.html(this.text);
} else {
this.textare = this.text;
let that = this;
const editor = new E(document.getElementById("content"));
this.textare.replace(/</g, "<").replace(/>/g, ">");
editor.config.onchange = function (newHtml) {
// that.editorContent即为最新的富文本内容
that.editorContent = newHtml;
};
editor.create();
this.textare = this.escape2Html(this.textare);
editor.txt.html(this.textare);
}
},
escape2Html(str) {
str = str
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/&/g, "&")
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/&npsp;/g, " ")
.replace(/\n/g, "<br />")
.replace(/\r/g, "<br />");
return str;
},
至此,附上所有代码
<template>
<div>
<el-button type="success" @click="addfrom">添加</el-button>
<el-dialog
:title="eldialog"
:visible.sync="dialogVisible"
@opened="eldialingShow"
width="50%"
:close-on-click-modal="false"
>
<div id="content"></div>
</el-dialog>
</div>
</template>
<script>
import E from "wangeditor";
export default {
data() {
return {
eldialog: "",
text: "",
dialogVisible: false,
};
},
created() {},
methods: {
// 打开弹出框
addfrom() {
// 清空之前的富文本内容
this.text = "";
// 更改弹出框的标题
this.eldialog = "编辑富文本";
// 显示富文本
this.dialogVisible = true;
},
// 弹出框显现后的回调
eldialingShow() {
this.$nextTick(() => {
this.fun1();
});
},
// 富文本的事件
fun1() {
this.showif = true;
// 先判断富文本是添加还是修改,
// 如果this.text为空则是添加富文本内容,若是修改富文本的内容,只需要将之前的富文本内容赋给this.text即可
if (this.text == "") {
let that = this;
const editor = new E(document.getElementById("content"));
editor.config.onchange = function (newHtml) {
// that.editorContent即为最新的富文本内容
that.editorContent = newHtml;
};
editor.create();
editor.txt.html(this.text);
} else {
this.textare = this.text;
let that = this;
const editor = new E(document.getElementById("content"));
this.textare.replace(/</g, "<").replace(/>/g, ">");
editor.config.onchange = function (newHtml) {
// that.editorContent即为最新的富文本内容
that.editorContent = newHtml;
};
editor.create();
this.textare = this.escape2Html(this.textare);
editor.txt.html(this.textare);
}
},
escape2Html(str) {
str = str
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/&/g, "&")
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/&npsp;/g, " ")
.replace(/\n/g, "<br />")
.replace(/\r/g, "<br />");
return str;
},
},
};
</script>
<style lang="scss" scoped>
</style>
重要!!!! this.editorContent 即为自己编辑的富文本内容