效果:
这个编辑器有个好处就是形成的富文本样式都是行内样式,不用担心样式丢失(除了表格样式),网页粘贴过来的内容能保存大部分样式,粘贴word文档除了图片不行,其他大部分样式基本保留
<template>
<div>
<div id="editor"></div>
<hr />
效果预览(v-html)
<div class="html" v-html="text1"></div>
<hr />
富文本的 HTML内容 <br />
<textarea id="text1" v-model="text1" style="height: 200px"></textarea>
<hr />
</div>
</template>
<script>
import E from "wangeditor";
export default {
data() {
return {
text1: "",
editor: undefined,
};
},
computed: {},
mounted() {
this.editor = new E("#editor");
// 设置编辑区域高度为 300px
this.editor.config.height = 500;
// 编辑器 z-index 默认为 10000,可以自行调整。
this.editor.config.zIndex = 20;
// 可以修改 placeholder 的提示文字。
this.editor.config.placeholder = "请输入正文";
// 取消自动 focus
this.editor.config.focus = false;
// *****************************************************
this.editor.config.menus = [
"head",
"bold",
"fontSize",
"fontName",
"italic",
"underline",
"strikeThrough",
"indent",
"lineHeight",
"foreColor",
"backColor",
"link",
"list",
"todo",
"justify",
"quote",
"emoticon",
"image",
"video",
"table",
"code", // 插入代码
"splitLine",
"undo",
"redo",
];
// *****************************************************
// 配置颜色(文字颜色、背景色)
this.editor.config.colors = [
"#000000",
"#eeece0",
"#1c487f",
"#4d80bf",
"#ffffff",
"#FF0000",
"#00FF00",
" #0000FF",
"#FF00FF",
"#FFFF00",
"#70DB93",
"#5C3317",
];
// *****************************************************
// 配置字体
this.editor.config.fontNames = [
// 字符串形式
"仿宋",
"黑体",
"楷体",
"标楷体",
"华文仿宋",
"华文楷体",
"宋体",
"微软雅黑",
"Arial",
"Tahoma",
"Verdana",
"Times New Roman",
"Courier New",
];
// *****************************************************
// 设置字号,只能改变 name字段
this.editor.config.fontSizes = {
"x-small": { name: "14px", value: "1" },
small: { name: "16px", value: "2" },
normal: { name: "18px", value: "3" },
large: { name: "20px", value: "4" },
"x-large": { name: "22px", value: "5" },
"xx-large": { name: "24px", value: "6" },
"xxx-large": { name: "26px", value: "7" },
};
// 配置行高
this.editor.config.lineHeights = [
"1",
"1.25",
"1.5",
"1.75",
"2",
"2.5",
"3",
];
// *****************************************************
// 插入网络图片的回调
this.editor.config.linkImgCallback = function (src, alt, href) {};
// *********************粘贴********************************
// 关闭粘贴样式的过滤
this.editor.config.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
this.editor.config.pasteIgnoreImg = false;
let sss = false;
// 显示在textarea中
this.editor.config.onchange = (html) => {
// 可以在这进行父子组件的传值;
this.text1 = html;
};
// *************************上传图片****************************
this.editor.config.showLinkImg = true; //上传网络图片
this.editor.config.uploadImgShowBase64 = true; //base64 保存图片
// 限制图片大小和类型
this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
// // 如果不希望限制类型,可将其设为空数组:
this.editor.config.uploadImgAccept = [];
this.editor.config.uploadImgMaxLength = 3; // 一次最多上传 5 个图片
// ***********************创建富文本***************
this.editor.create();
},
};
</script>
<style scoped>
#editor {
width: 870px;
}
#text1 {
width: 900px;
}
.html {
width: 670px;
margin-left: 200px;
}
.wrap {
width: 870px;
min-height: 300px;
line-height: 300px;
background-color: rgb(75, 73, 73);
color: #fff;
text-align: center;
}
/* 修改富文本字号 */
font[size="1"] {
font-size: 14px;
}
font[size="2"] {
font-size: 16px;
}
font[size="3"] {
font-size: 18px;
}
font[size="4"] {
font-size: 20px;
}
font[size="5"] {
font-size: 22px;
}
font[size="6"] {
font-size: 24px;
}
font[size="7"] {
font-size: 26px;
}
/* 表格样式 */
/* table 样式 必须加 否则表格没有样式 */
.html >>> table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
margin: 10px 0;
line-height: 1.5;
}
.html >>> table td,
.html >>> table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
min-height: 30px;
height: 30px;
}
.html >>> table th {
border-bottom: 2px solid #ccc;
text-align: center;
background-color: #f1f1f1;
}
</style>