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 instatic
Under the static directory, the files here will not bewebpack
Package, of course, you can also choose to put it in src)
Edit UEditor configuration file
Openueditor.config.js
, Modifywindow.UEDITOR_HOME_UR
Configuration:
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.js
There 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.vue
File, 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:
value
Is the text of the Editor
config
Is 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