因为项目中有富文本编辑器的原因,在网上搜了下wangeditor,觉得还挺方便的,页面简洁,干净,就选择了用它来编写,看了下官网,也介绍了大致的配置,下面就来介绍它在vue 中怎么使用
<template>
<div id="editor-container">
<div class="editor-header">
<!--菜单栏-->
<div ref="toolbar" class="toolbar"></div>
<div class="editor-other">
<slot name="other"></slot>
</div>
</div>
<!--编辑区域-->
<div ref="edit" :style="`height: ${height}px;`" class="text"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editorElem',
data () {
return {
editor: null,
editorContent: ''
}
},
props: ['catchData', 'content', 'height', 'networkPic'], // 接收父组件的方法
watch: {
content() {
console.log('父组件传递过来的值',this.content)
this.editor.txt.html(this.content)
}
},
mounted() {
// 初始化编辑器的相关配置信息
this.loadEditor()
// 父组件传递过来的内容渲染到编辑器中
this.editor.txt.html(this.content);
},
methods: {
loadEditor() {
this.editor = new E(this.$refs.toolbar, this.$refs.edit)
this.editor.customConfig.onchange = (html) => {
this.editorContent = html
this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
}
this.editor.customConfig.pasteFilterStyle = false
this.editor.customConfig.uploadImgShowBase64 = true
// this.editor.customConfig.uploadImgMaxLength = 5
// this.editor.customConfig.uploadImgServer = this.$baseUrl + 'attachment/uploadFile?pathName=cadreOA'
// 上传图片时可自定义传递一些参数，例如传递验证的token,添加的参数
// this.editor.customConfig.uploadImgParams = {
// pathName: 'XXXX'
// }
//上传图片时，可自定义filename
// this.editor.customConfig.uploadFileName = 'files'
// 判断使用组件时是否需要网络图片
// if (!this.networkPic)
this.editor.customConfig.showLinkImg = false // 配置是否显示网络图片
this.editor.customConfig.menus = [ // 菜单配置
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
// 'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
// 'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'code', // 插入代码
// 'undo', // 撤销
// 'redo' // 重复
]
// this.editor.customConfig.uploadImgHooks = {
// before: function (xhr, editor, files) {
// // 图片上传之前触发
// // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// // return {
// // prevent: true,
// // msg: '放弃上传'
// // }
// },
// success: function (xhr, editor, result) {
// console.log('上传成功', xhr, editor, result)
// // 图片上传并返回结果，图片插入成功之后触发
// // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
// this.imgUrl = Object.values(result.data).toString()
// },
// fail: function (xhr, editor, result) {
// console.log('插入失败')
// // 图片上传并返回结果，但图片插入错误时触发
// // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
// },
// error: function (xhr, editor, file) {
// console.log('上传出错了' ,xhr, editor, file)
// // 图片上传出错时触发
// // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
// },
// timeout: function (xhr, editor) {
// // 图片上传超时时触发
// // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
// },
// // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
// customInsert: function (insertImg, result, editor) {
// console.log('返回', insertImg, result, editor)
// // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
// console.log(result.data[0].filePath)
// let url = result.data[0].filePath // result.data就是服务器返回的图片名字和链接
// // JSON.stringify(url) // 在这里转成JSON格式
// insertImg(url)
// // result 必须是一个 JSON 格式字符串！！！否则报错
// }
// }
this.editor.create() // 创建富文本实例
}
},
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#editor-container {
position: relative;
z-index: 1;
// padding: 10px;
width: 1240px;
display: block;
padding: 0 14px;
/deep/ .w-e-text img:hover {
box-shadow: none !important;
}
/deep/ .w-e-toolbar {
flex-wrap: wrap;
}
.editor-header {
display: flex;
justify-content: flex-start;
align-items: center;
border-top: 1px solid #EBEEF5;
/deep/ .el-input {
top: 4px;
}
}
.toolbar {
padding: 10px 0 0 0;
}
.text {
width: 100%;
min-width: 400px;
min-height: 400px;
margin-top: 10px;
background: rgb(250,250,250);
border: 1px solid rgb(235,238,245);
}
}
</style>
父组件中使用
// 通过 content 向子组件传递
<EditorBar class="editor-margin" :catchData="editorChange" :height="200" :content="EditorCon">
<formSelect slot="other" style="width: 130px" v-model="tempData" :clearable="false" :options="typeList" placeholder="模板"></formSelect>
</EditorBar>
// 定义的方法
editorChange(info) {
// 接收子组件传递过来的数据, 因为富文本中有内容,所以不用再赋值给 EditorCon,第一次我就是这么采坑的,然后果然掉进去了,出现页面回退的问题,呜呜呜.......
this.dataList.details = info
},
大致配置就这么多,还有颜色,字体,表情什么的都可以配置,样式的问题主要看项目需求,后来又加了模板的需求,所以又改了,wangeditor 中是没有模板这个概念的,那么我们怎么实现这个功能呢,听到这个需求的时候我都要考虑换富文本编辑器了,因为不知道换了其他的不知道有没有其他的问题,后来试了试,使用了solt 插槽,看到可以的那一刻,哇,真开心
<div class="editor-header">
<!--菜单栏-->
<div ref="toolbar" class="toolbar"></div>
<div class="editor-other">
<slot name="other"></slot>
</div>
</div>
<!--编辑区域-->
<div ref="edit" :style="`height: ${height}px;`" class="text"></div>
这个改过之后的布局,具体样式的话,还需要自己调试,效果如下
image
大致能用了,虽然还有点奇怪,也没有去改,其他的问题就是上传的问题了,本例采用base64的方式上传图片,很多的就是渲染页面时的样式问题,如果出现渲染页面滚动条的问题,可以修改源码样式后在打包
// 渲染页面 加了一个跟富文本编辑的类名,样式在全局中引入,这样就是把富文本或者全局的样式给修改掉了,文章最后面会把 wangeditor 的默认样式列出来(本人修改过的,可以自行修改 h 标签等等)
<div class="item-box w-e-text" v-html="infoData.details"></div>
总之大致就这么多
.w-e-toolbar,
.w-e-text-container,
.w-e-menu-panel {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.w-e-toolbar *,
.w-e-text-container *,
.w-e-menu-panel * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.w-e-clear-fix:after {
content: "";
display: table;
clear: both;
}
.w-e-toolbar .w-e-droplist {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
border: 1px solid #f1f1f1;
border-right-color: #ccc;
border-bottom-color: #ccc;
}
.w-e-toolbar .w-e-droplist .w-e-dp-title {
text-align: center;
color: #999;
line-height: 2;
border-bottom: 1px solid #f1f1f1;
font-size: 13px;
}
.w-e-toolbar .w-e-droplist ul.w-e-list {
list-style: none;
line-height: 1;
}
.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item {
color: #333;
padding: 5px 0;
}
.w-e-toolbar .w-e-droplist ul.w-e-list li.w-e-item:hover {
background-color: #f1f1f1;
}
.w-e-toolbar .w-e-droplist ul.w-e-block {
list-style: none;
text-align: left;
padding: 5px;
}
.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item {
display: inline-block;
*display: inline;
*zoom: 1;
padding: 3px 5px;
}
.w-e-toolbar .w-e-droplist ul.w-e-block li.w-e-item:hover {
background-color: #f1f1f1;
}
@font-face {
font-family: 'w-e-icon';
src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="w-e-icon-"],
[class*=" w-e-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'w-e-icon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.w-e-icon-close:before {
content: "\f00d";
}
.w-e-icon-upload2:before {
content: "\e9c6";
}
.w-e-icon-trash-o:before {
content: "\f014";
}
.w-e-icon-header:before {
content: "\f1dc";
}
.w-e-icon-pencil2:before {
content: "\e906";
}
.w-e-icon-paint-brush:before {
content: "\f1fc";
}
.w-e-icon-image:before {
content: "\e90d";
}
.w-e-icon-play:before {
content: "\e912";
}
.w-e-icon-location:before {
content: "\e947";
}
.w-e-icon-undo:before {
content: "\e965";
}
.w-e-icon-redo:before {
content: "\e966";
}
.w-e-icon-quotes-left:before {
content: "\e977";
}
.w-e-icon-list-numbered:before {
content: "\e9b9";
}
.w-e-icon-list2:before {
content: "\e9bb";
}
.w-e-icon-link:before {
content: "\e9cb";
}
.w-e-icon-happy:before {
content: "\e9df";
}
.w-e-icon-bold:before {
content: "\ea62";
}
.w-e-icon-underline:before {
content: "\ea63";
}
.w-e-icon-italic:before {
content: "\ea64";
}
.w-e-icon-strikethrough:before {
content: "\ea65";
}
.w-e-icon-table2:before {
content: "\ea71";
}
.w-e-icon-paragraph-left:before {
content: "\ea77";
}
.w-e-icon-paragraph-center:before {
content: "\ea78";
}
.w-e-icon-paragraph-right:before {
content: "\ea79";
}
.w-e-icon-terminal:before {
content: "\f120";
}
.w-e-icon-page-break:before {
content: "\ea68";
}
.w-e-icon-cancel-circle:before {
content: "\ea0d";
}
.w-e-icon-font:before {
content: "\ea5c";
}
.w-e-icon-text-heigh:before {
content: "\ea5f";
}
.w-e-toolbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 5px;
/* flex-wrap: wrap; */
/* 单个菜单 */
}
.w-e-toolbar .w-e-menu {
position: relative;
text-align: center;
padding: 5px 10px;
cursor: pointer;
}
.w-e-toolbar .w-e-menu i {
color: #999;
}
.w-e-toolbar .w-e-menu:hover i {
color: #333;
}
.w-e-toolbar .w-e-active i {
color: #1e88e5;
}
.w-e-toolbar .w-e-active:hover i {
color: #1e88e5;
}
.w-e-text-container .w-e-panel-container {
position: absolute;
top: 0;
left: 50%;
border: 1px solid #ccc;
border-top: 0;
box-shadow: 1px 1px 2px #ccc;
color: #333;
background-color: #fff;
/* 为 emotion panel 定制的样式 */
/* 上传图片的 panel 定制样式 */
}
.w-e-text-container .w-e-panel-container .w-e-panel-close {
position: absolute;
right: 0;
top: 0;
padding: 5px;
margin: 2px 5px 0 0;
cursor: pointer;
color: #999;
}
.w-e-text-container .w-e-panel-container .w-e-panel-close:hover {
color: #333;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-title {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 14px;
margin: 2px 10px 0 10px;
border-bottom: 1px solid #f1f1f1;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-item {
padding: 3px 5px;
color: #999;
cursor: pointer;
margin: 0 3px;
position: relative;
top: 1px;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-title .w-e-active {
color: #333;
border-bottom: 1px solid #333;
cursor: default;
font-weight: 700;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content {
padding: 10px 15px 10px 15px;
font-size: 16px;
/* 输入框的样式 */
/* 按钮的样式 */
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input:focus,
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus,
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content button:focus {
outline: none;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea {
width: 100%;
border: 1px solid #ccc;
padding: 5px;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content textarea:focus {
border-color: #1e88e5;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text] {
border: none;
border-bottom: 1px solid #ccc;
font-size: 14px;
height: 20px;
color: #333;
text-align: left;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].small {
width: 30px;
text-align: center;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text].block {
display: block;
width: 100%;
margin: 10px 0;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content input[type=text]:focus {
border-bottom: 2px solid #1e88e5;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button {
font-size: 14px;
color: #1e88e5;
border: none;
padding: 5px 10px;
background-color: #fff;
cursor: pointer;
border-radius: 3px;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.left {
float: left;
margin-right: 10px;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right {
float: right;
margin-left: 10px;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.gray {
color: #999;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.red {
color: #c24f4a;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button:hover {
background-color: #f1f1f1;
}
.w-e-text-container .w-e-panel-container .w-e-panel-tab-content .w-e-button-container:after {
content: "";
display: table;
clear: both;
}
.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item {
cursor: pointer;
font-size: 18px;
padding: 0 3px;
display: inline-block;
*display: inline;
*zoom: 1;
}
.w-e-text-container .w-e-panel-container .w-e-up-img-container {
text-align: center;
}
.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn {
display: inline-block;
*display: inline;
*zoom: 1;
color: #999;
cursor: pointer;
font-size: 60px;
line-height: 1;
}
.w-e-text-container .w-e-panel-container .w-e-up-img-container .w-e-up-btn:hover {
color: #333;
}
.w-e-text-container {
position: relative;
}
.w-e-text-container .w-e-progress {
position: absolute;
background-color: #1e88e5;
bottom: 0;
left: 0;
height: 1px;
}
.w-e-text {
padding: 0 10px;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.w-e-text p,
.w-e-text h1,
.w-e-text h2,
.w-e-text h3,
.w-e-text h4,
.w-e-text h5,
.w-e-text table,
.w-e-text pre {
margin: 10px 0;
line-height: 1.5;
}
.w-e-toolbar,
.w-e-text {
table{ display: table }
tr{ display:table-row }
thead{ display:table-header-group }
tbody{ display:table-row-group }
tfoot{ display:table-footer-group }
col{ display:table-column }
colgroup{ display:table-column-group }
td, th{ display: table-cell;}
caption{ display: table-caption }
th{font-weight: bolder; text-align: center }
caption{ text-align: center }
table{ border-spacing: 2px;}
thead, tbody,tfoot { vertical-align:middle }
td, th { vertical-align:inherit }
h1{ font-size:2rem; margin: .67rem 0 }
h2{ font-size:1.5rem; margin: .75rem 0 }
h3{ font-size:1.17rem; margin: .83rem 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12rem 0}
h5 { font-size:.83rem; margin: 1.5rem 0 }
h6{ font-size:.75rem; margin: 1.67rem 0 }
h1, h2, h3, h4,h5, h6, b,strong { font-weight: bolder }
}
.w-e-text ul,
.w-e-text ol {
margin: 10px 0 10px 20px;
}
.w-e-text ul {
list-style: outside;
}
.w-e-text blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
.w-e-text code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
.w-e-text pre code {
display: block;
}
.w-e-text table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.w-e-text table td,
.w-e-text table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
.w-e-text table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
.w-e-text:focus {
outline: none;
}
.w-e-text img {
cursor: pointer;
}
// .w-e-text img:hover {
// box-shadow: 0 0 5px #333;
// }
网友评论