SoFunction
Updated on 2025-03-09

Perfect interpretation of ueditor component (cdn) in vue

vue uses ueditor component (cdn)

Preface: No need to introduce the page globally or locally, use cdn directly to use ueditor as a vue component.

Please create a vue file directly and use it as a component. Copy and paste and use it directly (this article only displays the front-end code, and everyone can choose the back-end freely. It is recommended to use Alibaba Cloud Oss or Qiniu Cloud object storage for image resources)

component component code:

<template>
    <script : name="content" type="text/plain" :style="ueditorStyle"></script>
</template>
<script>
export default {
    name: 'Editor',
    props: {
        ueditorPath: {
            // The path to UEditor code            type: String,
            default: '............',//cdn address        },
        ueditorConfig: {
            // UEditor configuration item            type: Object,
            default: function() {
                return {
                    toolbars:[['source', 'bold', 'italic', 'underline', 'removeformat', 'forecolor', 'backcolor', 'paragraph', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'simpleupload']],
                    serverUrl: '............',//Save routes in the background                };
            }
        },
        ueditorStyle: {
        	type: Object,
        	default: function() {
                return {
                }
            }
        },
    },
    data() {
        return {
            // To avoid trouble, each editor instance uses a different id            randomId: 'editor_' + (() * 100000000000000000),
            instance: null,
            // scriptTagStatus -> 0: The code is not loaded, 1: Two code dependencies have loaded one, 2: Both code dependencies have been loaded            scriptTagStatus: 0
        };
    },
    created() {
        if ( !== undefined) {
            // If the global object exists, it means that the editor code has been initialized and the editor will be loaded directly             = 2;
            ();
        } else {
            // If the global object does not exist, it means that the editor code has not been loaded yet and the editor code needs to be loaded.            ();
        }
        (this)
    },
    beforeDestroy() {
        // When the component is destroyed, the UEditor instance must be destroyed        if ( !== null && ) {
            ();
        }
    },
    methods: {
        insertScriptTag() {
            let editorScriptTag = ('editorScriptTag');
            let configScriptTag = ('configScriptTag');
 
            // If this tag does not exist, a related code tag is generated to load the code            if (editorScriptTag === null) {
                configScriptTag = ('script');
                 = 'text/javascript';
                 =  + '';
                 = 'configScriptTag';
 
                editorScriptTag = ('script');
                 = 'text/javascript';
                 =  + '';
                 = 'editorScriptTag';
                let s = ('head')[0];
                (configScriptTag);
                (editorScriptTag);
            }
 
            // Initialize the editor after waiting for the code to load            if () {
                ++;
            } else {
                ('load', () => {
                    ++;
                     = true;
                    ();
                });
            }
 
            if () {
                ++;
            } else {
                ('load', () => {
                    ++;
                     = true;
                    ();
                });
            }
 
            ();
        },
        initEditor() {
            // When scriptTagStatus is 2, it means that both js files that must be imported have been introduced and loaded.            if ( === 2 &&  === null) {
                // Vue executes DOM updates asynchronously, so that when the code is executed here, the script tag in template may not be actually created yet                // So, we can only initialize the UEditor in nextTick                this.$nextTick(() => {
                     = (, );
                    //Bind event. After UEditor initialization is completed, the editor instance will be handed over through the customized ready event.                    ('ready', () => {
                        this.$emit('ready', );
                    });
                });
            }
        }
    }
};
</script>
 
<style>
	.edui-editor {
    	line-height: normal;
	}
</style>

On the page

import Editor from 'Your component path/'

Use code:

<!--htmlFragment -->
<el-form-item label="Price Description" prop="description" :error="">
     <editor @ready="editorReady" :ueditorStyle="ueditorStyle">            
     </editor>
</el-form-item>
 
<!-- scriptFragment -->
 
import Editor from 'Your component path/'
export default {
    data(){
        return {
            ueditorStyle: {//ueditor style              width: '100%',
              height: '200px'
            },
        }
    },
    components:{
        Editor
    },
    methods:{
      editorReady (editor) {//Save ueditor content         = editor
        if (this.$ > 0) ()
        ('afterAutoSave', () => {
           = ()
        })
      },
    },
}
 
 
<!-- Note -->
(Data in the edit box)//set upueditorContents in the box，Used during editing

Guide to using ueditor for vue projects

Basic use

1. Download the resource package

Because ueditor does not have an official dependency package on npm, you need to download the file package from the official website first. What I downloaded is the jsp version

2. Introduce dependent files

Name the downloaded folder UE, put it into the project static folder, and then introduce the dependency file (I am introducing it globally here, and can also introduce it in components that can be used again);

import '../static/UE/'
import '../static/UE/'
import '../static/UE/lang/zh-cn/'
import '../static/UE/'

3. Initialize ueditor

Here I am extracting the ueditor into a component separately, so the id and configuration during initialization are passed in from the parent component. Define components:

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data () {
    return {
      editor: null
    }
  },
  props: {
    config: {
      type: Object
    },
    id: {
      type: String
    },
    content: {
      type: String
    }
  },
  mounted () {
    this._initEditor()
  },
  methods: {
    _initEditor () { // Initialization       = (,)
    },
    getUEContent () { // How to get content with tags      return ()
    }
  },
  destroyed () {
    ()
  }
</script>

4. Use components:

(1).Introduce defined components through import;

import UE from '@/components/ueditor/'

(2). Use components in the corresponding location

<el-form-item label="Article Content" prop="articleContent">
  <UE :id=id :config=config  ref="ue"></UE>
</el-form-item>

(3). Define the initialization configuration in the data of the parent component

// Initialize Ueditor configuration parameters      config: {
        initialFrameWidth: null,
        initialFrameHeight: 300
      },
      id: 'container',// Different editors must be differentid

(4). Get editor content in parent component

// Get rich text content    getEdiotrContent () {
      let content = this.$() // Call child component method       = content
    }

Usage configuration

If you need to use the image upload function, you need to correctly configure the resource path and image upload path in the resource file.

Resource loading path: window.UEDITOR_HOME_URL = "/static/UE/";

File upload path: serverUrl: background interface address

Experience of jumping

1. The development environment is used normally, but the production environment style file is not loaded, the editor cannot display normally, and the image upload function cannot be used

(1) The style file is not loaded

In the development environment, the resource path I configured is: window.UEDITOR_HOME_URL = "/static/UE/";

But when I publish to production, the style is completely messed up.

——This is because my code is not placed directly in the server root directory, but in the lower folder, so the resource file cannot be loaded correctly because the development environment and production environment need to configure different window.UEDITOR_HOME_URL. Of course, if the code is placed in the root directory, there is no need to modify it here.

(2) The image upload cannot be used

—— This is because the upload path in the development environment is used as a proxy, and the static file will not be packaged and compressed, so the request path in the production environment is wrong.

I made the following configuration for the above two questions:

  var serverApi = '';
  if (.NODE_ENV === "production" || .NODE_ENV === "productionTest") { // Production/test environment    window.UEDITOR_HOME_URL = "/newconsole/modules/static/UE/";
    serverApi = "/newconsole/static/UE/config/getConfig"
  }else { // Development environment    window.UEDITOR_HOME_URL = "/static/UE/";
    serverApi = "/api/static/UE/config/getConfig"
  }
 
  var URL = window.UEDITOR_HOME_URL || getUEBasePath();
     /**
 * Configuration item body.  Note that all configurations involving paths are not missed here.
 */
    window.UEDITOR_CONFIG = {
 
        //Add a path to the editor instance, this cannot be commented        UEDITOR_HOME_URL: URL,
        // The server requests the interface path        serverUrl: serverApi
      }

This way, you can also serve as a development environment and production environment.

2. When the editor has too much content, the editor will be stretched and extended, and the experience will be poor

This problem is relatively simple to deal with. You only need to modify autoHeightEnabled:false in the file, so that if there is too much content, a scroll bar will appear without opening the editor.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.