vue 项目采用wangedit富文本编辑器始末,重点在图片上传

 

官网文档很详细,建议先看文档了解一番。

我在使用过程中主要遇到上传图片和调整编辑器高度的问题

安装:

npm install wangeditor

编写组件以便日后复用,将wangedit封装为独立组件:

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;"></div>
  </div>
</template>
<script>
    import E from 'wangeditor'
    import axios from 'axios'
    import {Loading, Message} from 'element-ui'

    export default {
        name: 'editorElem',
        data() {
            return {
                editor: null,
                editorContent: ''
            }
        },
        props: ['catchData', 'content'],    // 接收父组件的方法
        watch: {
            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.showLinkImg = false
            //粘贴来的内容过滤图片
            this.editor.customConfig.pasteIgnoreImg = true
            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.withCredentials = true
            // 将图片大小限制为 5M
            this.editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024
            //限制一次最多上传 1 张图片
            this.editor.customConfig.uploadImgMaxLength = 1
            this.editor.customConfig.customUploadImg = function (files, insert) {
                // files 是 input 中选中的文件列表
                // insert 是获取图片 url 后,插入到编辑器的方法
                // 因为file是个FormData格式的对象所以可以直接通过接口开始上传,不需要做多余操作
                //虽然文档说是FormData格式,但是我实际使用需要以下操作
                let formData = new FormData();
                formData.append('file', files[0]);
           
                let config = {
                    //添加请求头
                    headers: {"Content-Type": "multipart/form-data"},
                };
                axios
                    .post(uploadUrl, formData, config)
                    .then(res => {
                        // todo 图片上传如何存储,具体要看上传接口返回的结果
                        insert(res.data)
                    })
                    .catch(function (err) {
                        console.log(err);
                        console.log("获取信息失败");
                    });
                // insert(imgUrl)

            }
            //自定义错误提示
            this.editor.customConfig.customAlert = function (info) {
                // info 是需要提示的内容,我使用的是elementUI的提示,不多介绍
                // alert('自定义提示:' + info)
                Message.warning({
                    message: info,
                })
            }
            this.editor.create()     // 创建富文本实例
            if (!this.content) {
                // this.editor.txt.html('请编辑内容1')
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss">
  #wangeditor {
    position: sticky;
    /*设置富文本框高度*/
    .w-e-text-container{
      height: 500px !important;
    }
  }

</style>

父组件import


<EditorBar :catchData="catchData" :content="form.content"></EditorBar>

<script>
   
    import EditorBar from '../components/wangEditor/editoritem.vue'

    export default {
        components: {  
            EditorBar
        },
          data() {

            return {
                  form: {
                    content: '',
                },
            }
        },
         methods: {
            //编辑器的内容赋值
            catchData(content) {
                console.log( content)
                this.form.content = content;
        },
            .
            .
            .





 

 

 


2019年9月28日以下更新

回显后发现光标在录入一次后总跳转到最后一行,发现是组件中watch造成的修改如下

富文本组件:

watch: {
    content() {
        // console.log("没有光标则执行,有光标不执行,回显--解决输入时光标老跳到最底部", this.content, this.rangenum)
        if (null == this.rangenum) {
            // this.content.setRange(this.rangenum)
            this.editor.txt.html(this.content)
        }

    }
},

父级:

<EditorBar :catchData="catchData" :content="form.content" :rangenum="rangenum"></EditorBar>
catchData(content) {
    let currentRange = window.getSelection().getRangeAt(0);
    this.rangenum = currentRange;
    this.form.content = content;
},

 

 


以上就是本人使用wangedit的过程,编写组件时参考LaughingZhu的文章,非常感谢

©️2020 CSDN 皮肤主题: 像素格子 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值