如何在vue引入UE Editor

1：首先在UEditor 官网下载相应的包
2：下载完成解压目录如下所示

3：在项目src 目录下创建static 文件，然后在 static 文件下创建UE 文件夹，然后将以上文件复制到UE 文件中，并修改ueditor.config.js 文件，只需要在ueditor.config.js 文件22 行加入一行代码即可

4：在项目的入口文件main.js 中引入对应得文件

5：创建 UEditor 组件

<template><div>  <script id="editor" type="text/plain"></script></div>
</template>
<script>export default {name: 'ueditor',data () {return {editor: null}},props: {value:{type:String,default:''},config:{type:Object}},mounted () {const _this = thiswindow.UE.delEditor('editor');this.editor = window.UE.getEditor('editor', this.config)   // 初始化UEthis.editor.addListener('ready', function () {               _this.editor.setContent(_this.value)                     // 载完成后，放入内容      })},methods: {getUEContent () {                                          // 获取编辑器内容方法return this.editor.getContent()},destroyed () {                                               // 销毁编辑器this.editor.destroy()}}}
</script>

6：在要使用UE Editor 的地方引入组件

 ueditor: {value: '', //编辑器默认内容config: { //设置编辑器宽高 initialFrameWidth: 1000,initialFrameHeight: 320}}

遇到的问题
组件首次加载不出来，再次刷新就能出来
解决方法
在mounted 方法中添加 window.UE.delEditor(‘editor’);

严格模式下会报错，需要修改ueditor 中的代码，给匿名函数加一个名字WK

如何在vue引入UE Editor相关推荐

如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
如何在 Vue 项目中使用 echarts 1
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
从 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript
随着应用的庞大,项目中 JavaScript 的代码也会越来越臃肿,这时候许多 JavaScript 的语言弊端就会愈发明显,而 TypeScript 的出现,就是着力于解决 JavaScript 语 ...
Vue引入并使用Element-UI组件库的两种方式
前言在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...

如何在vue引入UE Editor

如何在vue引入UE Editor相关推荐

最新文章

热门文章