By using ueditor in vue project (detailed tutorial)-JS Tutorial-php.cn

By using ueditor in vue project (detailed tutorial)

亚连

Release： 2018-06-01 14:43:15

Original

3336 people have browsed it

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>

Copy after login

3.webpack.base.conf.jsAdd the following configuration

externals: {
  &#39;UE&#39;: &#39;UE&#39;,
 },

Copy after login

4.index.html Add

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

Copy after login

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>

Copy after login

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

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!