By using ueditor in vue project (detailed tutorial)

Below I will share with you an example of using ueditor in a vue project. It has a good reference value and I hope it will be helpful to everyone.

Take the project generated by vue-cli as an example

1. Put the ueditor file in the 1.static folder first

2.index.htmlAdd the following code

<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.jsAdd the following configuration

externals: {
  'UE': 'UE',
 },

4.index.html Add

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

5.editor component

<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(&#39;UE&#39;);// eslint-disable-line
export default {
 name: &#39;editorView&#39;,
 data: () => (
  {
   editor: null,
  }
 ),
 methods: {
  geteditor() {
   console.log(this.editor.getContent());
  },
 },
 mounted() {
  this.editor = UE.getEditor(&#39;editor&#39;);
 },
 destroyed() {
  this.editor.destroy();
 },
};
</script>
<style>
</style>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue implements tree menu effect

Summary of VUE key issues

p5.js introductory tutorial keyboard interaction

The above is the detailed content of By using ueditor in vue project (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!