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)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Java 12 / JDK 12 正式发布

    Java 12 / JDK 12 正式发布Java 12 / JDK 12 正式发布

    2022年4月21日
  • java swing图形化界面_javagui界面设计

    java swing图形化界面_javagui界面设计JavaSwingGUI图形界面窗口开发基础教程,本教程将系统性地详细介绍Swing开发中常用的一些组件、布局管理器等相关知识技术,并且每章节都将通过代码实例展示实际应用。Swing是Java为图形界面应用开发提供的一组工具包,是Java基础类的一部分。Swing包含了构建图形界面(GUI)的各种组件,如:窗口、标签、按钮、文本框等。Swing提供了许多比AWT更好的屏幕显示元素,使用纯Java实现,能够更好的兼容跨平台运行。JavaSwing图形界面开发目录

    2022年8月23日
  • python图像识别与提取_图像分类python

    python图像识别与提取_图像分类python前面一篇文章介绍了图像增强知识,从而改善图像质量,增强图像识别效果,核心内容分为直方图均衡化、局部直方图均衡化和自动色彩均衡三部分。这篇文章将详细讲解图像分类知识,包括常见的图像分类算法,并介绍Python环境下的贝叶斯图像分类算法、基于KNN算法的图像分类和基于神经网络算法的图像分类等案例。万字长文整理,希望对您有所帮助。同时,该部分知识均为作者查阅资料撰写总结,并且开设成了收费专栏,为小宝赚点奶粉钱,感谢您的抬爱。当然如果您是在读学生或经济拮据,可以私聊我给你每篇文章开白名单,或者转发原文给你,更希望

    2022年10月14日
  • threadlocal底层实现_ioc的底层实现原理

    threadlocal底层实现_ioc的底层实现原理ThreadLocal作用:提供线程内的局部变量,不同的线程之间不会相互干扰,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或组件之间一些公共变量传递的复杂性。package com.mupack;public class App{ private String content; public void setContent(String content) { this.content = content; } public Stri

    2022年8月8日
  • 分页存储过程(转)

    分页存储过程(转)

    2021年8月6日
  • JS中JSONArray转JSONObject

    JS中JSONArray转JSONObjectJS中JSONArray转JSONObject其实很简单,代码如下://JSONArrayvardata=nowArrayDatalength.data;//JSONArray转换JSONStringvardataString=JSON.stringify(data);//字符串截取(裁掉"[]")vardataObject=dataString….

    2022年5月2日

发表回复

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

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