How to use ueditor custom upload button in vue

This time I will show you how to use the ueditor custom upload button in vue. What are the precautions for using the ueditor custom upload button in vue. The following is a practical case, let's take a look.

Due to the upload address problem, it is necessary to customize the upload button. The effect is as shown in the figure

Since there is no dom operation in the page, I thought of using vue to customize it. Define event binding $emit and $on to pass the click event to ueditor.

The first step is to add a custom button to ueditor:

1. Open ueditor.all.js and find btnCmds, which is probably at line 27854, as shown below. Add a custom button name to the array. , what I wrote is "love"

ueditor.all.js

2, add events to the button

still in ueditor. Find the commands directive in the all.js file to extend the event for the button just defined, as follows:

Add events to the button

The event I bound here is It has been defined in vue. Use $emit to bind it, and then monitor it on the page. bus is a custom vue instance, because the entire project is used in combination with vue.

3. Add an icon to the button

Open themes/default/css/ueditor.css. Just add it below the file, as follows:

.edui-default .edui-toolbar .edui-for-love .edui-icon {
  background: url(../images/video.png) no-repeat 50% 50%;
}

Here.edui The love after -for-love is the name of the button I just defined. Since all my buttons have rewritten styles, they are all covered;

Add icons to buttons

4. The page listens for click events

The content here is the basis of vue. You can read the document yourself. It is simply as follows

First give The page defines an element to add a binding event

and then listens to the click event passed by ueditor showUpload

in methods Define the showUpload event (it doesn’t matter if the name is repeated here)

In this way, the custom upload button has been completed.

The following is an example of using ueditor in a vue project

Take the project generated by vue-cli as an example

1. First put the ueditor file in the static folder

2.index.html and add 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.js add 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('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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Vue implementation of PopupWindow component usage steps analysis

vue jquery lodash top suspension fixed function implementation when sliding Detailed explanation

The above is the detailed content of How to use ueditor custom upload button in vue. For more information, please follow other related articles on the PHP Chinese website!