Download UEditor from the official website

UEditor making address The backend usesjavaSo we’re using thetautf8 jspVersion.

Configuring Rich Text

Once the download is complete, unpack the package,jspThe folder andindex.htmlThe file isdemoYou can delete it.Static directory (publicFolder)ueditorFolder to decompress the content into.

Download vue-ueditor-wrap for easy use and integration with Baidu rich text; Vue-ueditor-wrap is a VUE component that “wraps” the UEditor. It supports v-model binding of rich text editor content, making uEditor as easy to use as an Input box.

npm install vue-ueditor-wrap
Copy the code

Create a new editor.vue file under the project Components folder

<template>
  <vue-ueditor-wrap :config="myConfig" v-model="copyContent" :editor-id="editorId"></vue-ueditor-wrap>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap';

export default {
  name: 'Editor'.components: {
    VueUeditorWrap
  },
  data() {
    return {
      editorId: `editor-The ${new Date().getTime()}`.// Unique id to prevent editor caching
      copyContent: ' '
    };
  },
  props: {
    // Rich text height
    initialFrameHeight: {
      type: Number.default() {
        return 400; }},// Rich text content
    content: {
      type: String.default: ' '
    },
    // Whether the rich text is read-only
    readonly: {type:Boolean.default:false}},computed: {
    myConfig() {
      return {
        // If the upload function is required, ask the backend partner for the server interface address. Otherwise, the upload cannot be performed. The upload function requires the backend cooperation.
        serverUrl: ' '.// The path where your UEditor resources are stored relative to the packed index.html(use history mode for routing)
        UEDITOR_HOME_URL: './ueditor/'.// The editor is not automatically inflated by the content
        autoHeightEnabled: false.// Initial container height
        initialFrameHeight: this.initialFrameHeight,
        // The initial container width
        initialFrameWidth: '100%'.// Turn off auto save
        enableAutoSave: true.// Whether to enable the element path, default is true display
        elementPathEnabled: false.// Whether to enable word count
        wordCount: false.zIndex:2999.readonly: this.readonly }; }},model: {
    prop: 'content'.event: 'change'
  },
  watch: {
    copyContent(val) {
      let me = this;
      me.$emit('change', val);
    },
    content: {immediate:true.handler(val){
        let me = this; me.copyContent = val; }}}};</script>
Copy the code

Using rich text

<template>
	<Editor initialFrameHeight='300' v-model="introduce" />
<template>
<script>
  import Editor from 'components/editor';
  export default {
  	components: { Editor },
    data() {
    	return {
      	introduce: ' '}}}</script>
Copy the code

Bonus: Modify toolbars row height

If you need to change the height of the toolbar tool linefindpublic->ueditor->themes->css->ueditor.cssFile, search.edui-default .edui-toolbar .edui-combox .edui-combox-bodyand.edui-default .edui-toolbarStyle, append at the end line-height: initialCan.