UEditor自定义图片上传

使用UEditor上传图片时，会出现如下情况，需要后端配置，所以我在这里通过iview自定义的封装了个图片上传

参考链接：http://fex.baidu.com/ueditor/#dev-developer

1.模板封装

//html
<template>
    <div class="editor-wrapper">
        <vue-ueditor-wrap v-model="editorHtmlData" :config = myConfig   @beforeInit="addCustomButtom"></vue-ueditor-wrap>
        <Modal title="图片上传"
                v-model="dialogVisible"
                width="500px">
            <div class="image-upload-panel">
                <div class="image-item"
                    v-for="(item,index) in imageList"
                    :key="index">
                    <img :src="item.url">
                    <Icon type="md-close" class="image-del"  @click="delImage(index)"/>
                </div>
                <Upload
                    ref="upload"
                    :show-upload-list="false"
                    :on-success="imageUploadSuccess"
                    :format="['jpg','jpeg','png']"
                    multiple
                    type="drag"
                    :action="图片上传地址"
                    style="display: inline-block;width:58px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                    </div>
                </Upload>
            </div>
            <span slot="footer" class="dialog-footer">
                <Button  @click="()=>{this.dialogVisible=false}">取 消</Button>
                <Button  type="primary" @click="insertImage">确 定</Button>
            </span>
        </Modal>
    </div>
</template>

//js
<script>
import VueUeditorWrap from 'vue-ueditor-wrap' 
export default {
    props:{
        editorData:{
            type:String,
            required:true
        }
    },
    components:{
        VueUeditorWrap
    },
    data(){
        return{
            dialogVisible: false,
            imageList: [],
            editorHandler: null,
            editorHtmlData:this.editorData,
            myConfig: { 
                toolbars: [[  //定制工具栏图标
                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'emotion', 'map', 'insertcode', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', '|',
                    'print', 'preview',
                ]],
                autoHeightEnabled: false,// 编辑器不自动被内容撑高
                initialFrameHeight: 600, // 初始容器高度
                initialFrameWidth: '100%',// 初始容器宽度
                serverUrl:'',
                UEDITOR_HOME_URL: '/UEditor/',
                maximumWords:'100000000'
            }
        }
    },
    watch:{
        editorData (newValue) {
            this.editorHtmlData = newValue
        },
        editorHtmlData (newValue) {
            this.$emit("on-change",newValue)
        }
    },
    methods:{
        //删除图片
        delImage (index) {
            let imageList = this.imageList;
            imageList.splice(index, 1);
        },
        //图片上传成功
        imageUploadSuccess (response, file) {
            let imageList = this.imageList;
            let item = response.result[0];
            imageList.push(item);
            this.imageList = imageList;
        },
        insertImage () {
            let imageList = this.imageList;
            let imageHtml = "";
            (imageList || []).map(item => {
                imageHtml = imageHtml + "<p><img src=\"" + item.url + "\"/></p>";
            })
            if (imageHtml != "") {
                this.editorHandler.execCommand('inserthtml', imageHtml);
            }
            this.dialogVisible = false;
        },
        addCustomButtom (editorId) {
            let _this = this;
            window.UE.registerUI('test-button', function (editor, uiName) {
                // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
                editor.registerCommand(uiName, {
                    execCommand: () => {
                        _this.imageList = [];
                        _this.dialogVisible = true;
                        _this.editorHandler = editor;
                    }
                })
                // 创建一个 button
                var btn = new window.UE.ui.Button({
                    // 按钮的名字
                    name: uiName,
                    // 提示
                    title: '图片上传',
                    // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
                    cssRules: "background-position: -380px 0;",
                    // 点击时执行的命令
                    onclick: function () {
                        // 这里可以不用执行命令，做你自己的操作也可
                        editor.execCommand(uiName)
                    }
                })

                // 当点到编辑内容上时，按钮要做的状态反射
                editor.addListener('selectionchange', function () {
                var state = editor.queryCommandState(uiName)
                    if (state === -1) {
                        btn.setDisabled(true)
                        btn.setChecked(false)
                    } else {
                        btn.setDisabled(false)
                        btn.setChecked(state)
                    }
                })
                // 因为你是添加 button，所以需要返回这个 button
                return btn
            }, 46 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
        }
    }
}
</script>

//css
<style scoped>
.image-item {
    float: left;
    width: 150px;
    height: auto;
    background: #ddd;
    margin-right: 10px;
    border-radius: 6px;
    position: relative;
}
.image-item img {
    max-width: 150px;
    border-radius: 6px;
}
.image-del {
    position: absolute;
    top: 0px;
    right: 0px;
    color: red;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}
</style>

2.模板使用

<template>
	<u-editor :editorData ="content" @on-change="handleChange"/>
</template>
<script>
import UEditor from '@/views/my-components/UEditor'
export default {
    components:{UEditor},
    data(){
    	return {
    		content:''
    	}
    },
    methods:{
    	handleChange (value) {
            this.systemForm.content = value
        },
    }
}
</script>

这样就实现了，一起来看下效果吧~~~