vue-ueditor-wrap 使用总结
关于vue-ueditor-wrap的使用,网上有大量的介绍,这里也会简单阐述一下。此次发稿,主要是因为项目中遇到一个问题,就是如何在vue-ueditor-wrap内容光标位置插入文本内容,网上查了很多资料,没有找到完全正确的。网上有些关于ueditor光标位置插入文本的方法,但是并不适用于vue-ueditor-wrap,其实原理是一样的,不过获取实例需要做一下改变。1. 安装npm i vu
关于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', "插入的文本") // 插入文本
},
}
}
更多推荐
所有评论(0)