怎么说呢,最近在做公司的官网,文章管理这一块需要用到富文本编辑器,自己试了几个市面上比较火的编辑器感觉效果都不是太理想,最后感觉这个wangEditor还不错,就参照着官网和百度上的资料自己写了一个组件。
这是效果图
话不多说上代码
子组件的代码 这里重要的都加了注解
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align:left"></div>
</div>
</template>
<script>
import E from 'wangeditor'
import {uploadfwb} from "@/api/website/testfwb";
export default {
name: 'editorElem',
data () {
return {
editor: null,
editorContent: ''
}
},
props: ['catchData', 'content'], // 接收父组件的方法
watch: {
content () {
if(!this.content){ //这是为了解决输入时光标乱跳
this.editor.txt.html(this.content);
}
}
},
mounted () {
this.editor = new E(this.$refs.editorElem)
this.editor.customConfig.onchange = (html) => {
this.editorContent = html
this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
}
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.customUploadImg = function(files, insert) {
var formData = new FormData();
for(var i = 0;i < files.length;i ++) {
formData.append("fwbfiles", files[i]);
}
uploadfwb(formData).then(response => {
for(var j=0;j<response.data.length;j++){
insert(process.env.VUE_APP_BASE_API + response.data[j]);
}
});
};
this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024; // 将图片大小限制为 3M
this.editor.customConfig.uploadImgMaxLength = 8; // 限制一次最多上传 5 张图片
this.editor.create() // 创建富文本实例
this.editor.txt.html(this.content);
}
}
</script>
<style lang="scss" rel="stylesheet/scss">
.w-e-text-container{
height: 700px !important;/*!important是重点,因为原div是行内样式设置的高度300px*/
}
</style>
父组件的代码
import editor from "./../testfwb/index";
<editor :catchData="catchData" :content="form.content"/>
data() {
return {
form: {
content: ''
}
};
},
methods: {
catchData(content) {
/*console.log( content)*/
this.form.content = content;
}
}
关于图片上传我是用的对我来说最方便的办法,实现了多图上传,这个博客主要写前后台数据同步,重点不在图片上传,写的不好大家多多指教
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/188085.html