vue项目中使用ueditor的实例讲解


Posted in Javascript onMarch 05, 2018

以vue-cli生成的项目为例

1.static文件夹下先放入ueditor文件

2.index.html添加如下代码

<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.all.min.js"></script>

3.webpack.base.conf.js添加如下配置

externals: {
  'UE': 'UE',
 },

4.index.html中添加

<script type="text/javascript">
 window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路径设定为UEditor所放的位置
</script>

5.editor组件

<template>
 <div>
  <mt-button @click="geteditor()" type="danger">获取</mt-button>
  <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
 </div>
</template>
<script>
const UE = require('UE');// eslint-disable-line
export default {
 name: 'editorView',
 data: () => (
  {
   editor: null,
  }
 ),
 methods: {
  geteditor() {
   console.log(this.editor.getContent());
  },
 },
 mounted() {
  this.editor = UE.getEditor('editor');
 },
 destroyed() {
  this.editor.destroy();
 },
};
</script>
<style>
</style>

以上这篇vue项目中使用ueditor的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
vue项目实战总结篇
Feb 11 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
快速处理vue渲染前的显示问题
Mar 05 #Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 #Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 #Javascript
AjaxUpLoad.js实现文件上传
Mar 05 #Javascript
JsChart组件使用详解
Mar 04 #Javascript
ionic2中使用自动生成器的方法
Mar 04 #Javascript
Vue.directive()的用法和实例详解
Mar 04 #Javascript
You might like
我的论坛源代码(二)
2006/10/09 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python range实例用法分享
2020/02/06 Python
python多维数组分位数的求取方式
2020/03/03 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
公司会计岗位职责
2014/02/13 职场文书
班班通项目实施方案
2014/02/25 职场文书
幼儿园新年寄语
2014/04/03 职场文书
实习单位证明范例
2014/11/17 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
Python代码实现双链表
2022/05/25 Python