vue-ueditor-wrap 使用总结

关于vue-ueditor-wrap的使用，网上有大量的介绍，这里也会简单阐述一下。此次发稿，主要是因为项目中遇到一个问题，就是如何在vue-ueditor-wrap内容光标位置插入文本内容，网上查了很多资料，没有找到完全正确的。网上有些关于ueditor光标位置插入文本的方法，但是并不适用于vue-ueditor-wrap，其实原理是一样的，不过获取实例需要做一下改变。

1. 安装

npm i vue-ueditor-wrap 
# 或者 
yarn add vue-ueditor-wrap

2. udeitor下载

官方下载地址：http://ueditor.baidu.com/website/download.html

选择utf8前端代码，具体选择jsp、net、php，需要根据项目实际情况判断，若项目存在图片上传等需要后台执行操作的功能，则需要与后台商议确定合适的包，不然，选哪一种都可以。

3. 解压拷贝至相应文件夹

vue-cli3 放在public 的static下

若是2.x的，则放置在static下面

4.修改 ueditor 文件中的 ueditor.config.js 配置

1 window.UEDITOR_HOME_URL = '/ueditor/'

同理，如果是2.x, 则修改为：
2 window.UEDITOR_HOME_URL = '/static/ueditor/',

5. 光标位置插入文本

注意：只有@ready时候获取到的实例才有focus，execCommand的方法，通过ref，或者window.UE，是都获取不到的，第二种是全局的ueditor，不能指向当前的组件，通过打印出来的uid可以直观地看到。

<template>
    <div>
        <vue-ueditor-wrap @ready="ready" ref="editor" v-model="msg" :config="config"></vue-ueditor-wrap>
        <el-button @click='insertParam'></el-button>
    </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
    components: {
        VueUeditorWrap,
    },
    data: function() {
        return {
     	      msg: '',
            editor: {},
            config: {
                serverUrl: "",
                UEDITOR_HOME_URL: '/static/ueditor/',
                readonly : false,
                initialFrameHeight: 350,
                autoFloatEnabled: false,
                maximumWords:5000,
                toolbars: [[
                    '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'paragraph', 'fontfamily', 'fontsize', '|',
                    'indent', '|', 'source',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink', '|',
                ]]
            },
        };
    },
    methods: {
        ready(instance) {
            this.editor = instance // 保存vue-ueditor-wrap实例
        },
        
        insertParam(param) {
            this.editor.focus() // 获取光标位置
            this.editor.execCommand('inserthtml', "插入的文本") // 插入文本
        },
    }
}