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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • goland 2021.3.1激活破解方法「建议收藏」

    goland 2021.3.1激活破解方法,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
    845
  • 基于LM331的电压-频率转换电路详细介绍[通俗易懂]

    基于LM331的电压-频率转换电路详细介绍[通俗易懂]目录1.LM331简介2.引脚分布与功能3.LM331的功能框图4.V/F转换的工作原理5.LM331的V/F转换电路1.LM331简介LM331是由美国NS公司(已被TI公司收购)生产的高精度频率-电压转换芯片,可以用于AD转换、频率-电压转换、电压-频率转换和转速测量等。当用作频率-电压转换时输出频率与输入电压成正比例关系,线性失真最大为0.01%。动态范围广,最大可达100dB;温度稳定性高,温度系数为±50ppm/℃;工作范围广(1Hz-100kHz);外.

    2022年5月27日
    55
  • Docker安装Rabbitmq3.8.7[通俗易懂]

    Docker安装Rabbitmq3.8.7[通俗易懂]Docker环境下安装Rabbitmq一、简介什么是rabbitmq:RabbitMQ是一套开源(MPL)的消息队列服务软件,是由LShift提供的一个AdvancedMessageQueuingProtocol(AMQP)的开源实现,由以高性能、健壮以及可伸缩性出名的Erlang写成。官网地址:https://www.rabbitmq.com/二、环境准备LInux环境:Centos7Docker版本:17.12.0-ce预装MQ版本:3.8.7SS

    2022年5月23日
    37
  • JVM(四)—一道面试题搞懂JVM类加载机制

    JVM(四)—一道面试题搞懂JVM类加载机制有这样一道面试题:classSingleton{privatestaticSingletonsingleton=newSingleton();publicstaticintvalue1;publicstaticintvalue2=0;privateSingleton(){value1++;…

    2022年5月24日
    31
  • 最全QQ盗号手法分析,全面防御QQ盗号[通俗易懂]

    最全QQ盗号手法分析,全面防御QQ盗号[通俗易懂]你的QQ是否被盗过号,或者你身边的朋友、同学是否有过被盗号的经历。如今的安全机制真的没有效吗?盗号真的这么简单吗?本期将彻底解决这一问题。本期是上一期的姊妹篇,建议先看上一期,这样对于攻击者的手法才有更好的理解:传送门常见的盗号手法1、诱导链接以及二维码  这种情况在QQ群里面见的多。通常是发送一些具有诱惑性的链接诱导你去点击。也可能会是一些二维码,如下图。为了做这期,能更好的了解其盗号的手段,我把凡是我看到的盗号链接都点了个遍,那些恶意二维码我也扫了个遍。这是我在了解其原理并做了相应的安全措施.

    2022年7月26日
    12
  • PHPStorm 快捷键大全(Win/Linux/Mac)

    PHPStorm 快捷键大全(Win/Linux/Mac)

    2022年2月8日
    50

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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