vue项目中使用ueditor

vue项目中使用ueditor

 

以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>
  • 1
  • 2

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

externals: {
    'UE': 'UE', },
  • 1
  • 2
  • 3

4.index.html中添加

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

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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113764.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 菜鸟的Hadoop快速入门「建议收藏」

    菜鸟的Hadoop快速入门「建议收藏」一、相关概念1、大数据大数据是一门概念,也是一门技术,是以Hadoop为代表的大数据平台框架上进行各种数据分析的技术。大数据包括了以Hadoop和Spark为代表的基础大数据框架,还包括实时数据处理,离线数据处理,数据分析,数据挖掘和用机器算法进行预测分析等技术。2、HadoopHadoop是一个开源的大数据框架,是一个分布式计算的解决方案。Hadoop的两个核心解决了数据存储问题(H…

  • Java 的JSON、XML转换方法——目录索引(转)[通俗易懂]

    Java 的JSON、XML转换方法——目录索引(转)[通俗易懂]Java 的JSON、XML转换方法——目录索引(转)

  • date和localdatetime转换_localDate

    date和localdatetime转换_localDateLocalDateTime是jdk8的新增的类,还有LocalDate,LocalTime;我们可能用到类里面的一些方法,例如传入的时间和当前时间做比较,就需要将Date转为LocalDate或其他两个,Date转换为LocalDateDatedate=newDate();LocalDatelocalDate=date.toInstant().atZone(ZoneId.systemDefault()) //设置当前系统时区.toLocalDat

  • 什么是跨域?如何解决跨域问题?

    什么是跨域?如何解决跨域问题?什么是跨域?浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域域名:主域名不同http://www.baidu.com/index.html–&amp;gt;http://www.sina.com/test.js子域名不同http://www.666.baidu.com/index.html–&amp;gt;http://www.555.baidu.co…

  • 详解正则表达式实现二代身份证号码验证[通俗易懂]

    详解正则表达式实现二代身份证号码验证[通俗易懂]二代身份证号码:1-6位:表示行政区划的代码。1、2位,所在省(直辖市,自治区)代码;3、4位,所在地级市(自治州)代码;5、6位,所在区(县,自治县,县级市)的代码;7-14位:表示出生年、月、日15-16位:所在地派出所代码17位:性别。奇数(1、3、5、7、9)男性,偶数(2、4、6、8、0)女性18位:校验位,存在十一个值:0,1,2,3,4,5,6,7,8,9,X,其值…

  • element 输入框点击事件_ElementUI的input事件问题

    element 输入框点击事件_ElementUI的input事件问题最近用ElementUI的el-input组件,然后发现一个问题,就是我在输入框后,加一个icon的button,然后我希望这个输入框可以触发两个事件,第一个是,输入完,按键盘回车键的事件,第二个是,输入完,点icon的button的click事件。然后翻阅文档,发现可以给input加@change事件,这样按回车可以搜索,然后可以把icon的button写成slot的方式然后给button加@c…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号