关于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', "插入的文本") // 插入文本
        },
    }
}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐