Vue2.0 integrates the UEditor Rich Text Editor method, vue2.0ueditor

Vue2.0 integrates the UEditor Rich Text Editor method, vue2.0ueditor

In the 'project of vue, we met the need to use the Rich Text editor. on github, we saw many editor plug-ins encapsulated by vue, A lot of support for Image Upload and video upload is not very good, and the UEditor is finally used.

There are many such articles on the Internet. I have made some explorations, handwritten code, summary, and typographical work to form this article.

Download the UEditor source code.

First, go to the official website to download the UEditor source code. Download the corresponding version (PHP, Asp,. Net, Jsp) based on your background language ).

Http://ueditor.baidu.com/website/download.html

After the download, place the resource/static/ue/Static directory. The document structure is as follows:

(I put UEditor instaticUnder the static directory, the files here will not bewebpackPackage, of course, you can also choose to put it in src)

Edit UEditor configuration file

Openueditor.config.js, Modifywindow.UEDITOR_HOME_URConfiguration:

Window. UEDITOR_HOME_URL = "/static/UE/"; // specify the var URL of the root directory of the editor resource file = window. UEDITOR_HOME_URL | getUEBasePath ();

ueditor.config.jsThere are many configurations in the file. You can perform some initialization global configurations here, such as the default width and height of the Editor:

, InitialFrameWidth: 1000 // initialize the editor width. The default value is 1000. initialFrameHeight: 320 // initialize the editor height. The default value is 320.

Other parameter configurations are listed in detail in this file, or refer to the official documentation http://fex.baidu.com/ueditor/

Integrate the editor into the system

Open the/src/main. js file and insert the following code:

//ueditorimport '../static/UE/ueditor.config.js'import '../static/UE/ueditor.all.min.js'import '../static/UE/lang/zh-cn/zh-cn.js'import '../static/UE/ueditor.parse.min.js'

Develop public component UE. vue

In/src/components/Create under directoryUE.vueFile, as our editor component file.

The following code provides simple functions. You can use this component as needed.

<template>  <div>    <script type="text/plain"></script>  </div></template><script>  export default {    name: 'ue',    data () {      return {        editor: null      }    },    props: {      value: '',      config: {}    },    mounted () {      this.editor = window.UE.getEditor('editor', this.config);      this.editor.addListener('ready', () => {        this.editor.setContent(this.value)      })    },    methods: {      getUEContent () {        return this.editor.getContent()      }    },    destroyed () {      this.editor.destroy()    }  }</script>

The component exposes two interfaces:

• valueIs the text of the Editor
• configIs the configuration parameter of the editor.

Use this component on other pages

Create a page that requires UEditor, and then use the encapsulated UE. vue component in the page:

<Template> <div> <Uediter: value = "ueditor. value ": config =" ueditor. config "ref =" ue "> </Uediter> <button @ click =" returnContent "> show editor content </el-button> <div >{{ dat. content }}</div> </template> <script> import Uediter from '@/components/UE. vue '; export default {data () {return {dat: {content: ''}, ueditor: {value: 'default editor text', config: {initialFrameWidth: 800, initialFrameHeight: 320 }}}, methods: {returnContent () {this. dat. content = this. $ refs. ue. getUEContent () }}, components: {Uediter },}</script>

The effect is as follows:

What's more: configuration required by the server

After the preceding content is configured, the console may encounter an error in the format returned by the background configuration item. The upload function will not work properly! "Error,
When uploading images or videos in the editor, an error is returned because the server request interface is not configured. In ueditor. config. js, configure serverUrl:

// The uniform request interface path of the server, serverUrl: 'http: // 172.16.254.49: 83/File/uedit' // address to which your backend must go