vue + ueditor

关于在vue-cli3 里使用UEditor的一次简单记录

1. 准备工作

步骤1：

下载UEditor文件夹： https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads

选择其中一个即可（我选择的是utf8-php.zip）

步骤2：

将下载后的文件夹重命名为UEditor，放置在public文件夹下

步骤3：

安装 vue-editor-wrap

npm i vue-ueditor-wrap --save

2. 组件里使用方式

<template>
    <div class="ueditor">
        <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
        <button @click="submit">  提交 </button>
    </div>
</template>

<script>
    import VueUeditorWrap from "vue-ueditor-wrap";
    export default {
        name: "App",
        components: {
            VueUeditorWrap
        },
        data(){
            return  {
                msg: '',
                // 重写配置文件，覆盖系统默认配置（ueditor.config.js）
                myConfig: {
                    // 编辑器不自动被内容撑高
                    // autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 240,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 上传文件接口(测试使用，非正式)
                    serverUrl: 'http://35.201.165.105:8000/controller.php',
                    /* 资源存放地址 */
                    UEDITOR_HOME_URL: '/UEditor/',
                    tableDragable: true,
                    // 需要显示的图标工具
                    // toolbars: [["fullscreen","source","undo","redo","bold","italic","underline","fontborder","strikethrough","superscript","subscript","insertunorderedlist","insertorderedlist","justifyleft","justifycenter","justifyright","justifyjustify","removeformat","simpleupload","snapscreen","emotion","attachment"]]
                }
            }
        },
        methods: {
            submit () {
                console.log(this.delHtmlTag(this.msg))
                // console.log(this.msg)
                // const imgs = this.getImages(this.msg)
                // console.log(imgs)
            },
            //去掉所有的html标记
            delHtmlTag(str) {
                return str.replace(/<[^>]+>/g,"");
            },
            // 获取匹配图片地址
            getImages (str){
                var images = []
                //匹配图片（g表示匹配所有结果i表示区分大小写）
                var imgReg = /<img.*?(?:>|\/>)/gi;
                //匹配src属性
                var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
                var arr = str.match(imgReg);
                for (var i = 0; i < arr.length; i++) {
                    var src = arr[i].match(srcReg);
                    //获取图片地址
                    if (src[1]) {
                        // console.log('已匹配的图片地址' + (i + 1) + '：' + src[1]);
                        images.push(src[1])
                    }
                }
                return images
            },
        }
    }
</script>

<style>

</style>