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>

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>   <p>    <mt-button @click="geteditor()" type="danger">获取</mt-button>    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>   </p>  </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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Canvas如何做出3D动态的Chart图表

WebGL怎样操作json与echarts图表

以上就是vue项目中如何使用ueditor的详细内容，更多内容请关注技术你好其它相关文章！