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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 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
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
Python的函数的一些高阶特性
2015/04/27 Python
Python二分法搜索算法实例分析
2015/05/11 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
交通事故私了协议书
2014/04/16 职场文书
骨干教师培训方案
2014/05/06 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
保外就医申请书范文
2015/08/06 职场文书
学生会主席任命书
2015/09/21 职场文书