vue3.0 + ueditor

The company has a demand, need to be sending mail template (rich text template for better scalability it)

 

About rich text, and also find some nice vue of support, but did not Baidu fully functional

 

Anyway, this system is also used their own people, it does not matter the color value

 

About vue2.0 + ueditor may need to see the original: https://juejin.im/post/5c6e78f95188252f30483be3

Note: I made reference to this feature of vue3.0 + ueditor

Step One: Download Ueditor related static files

 

While downloading, do not let little hands idle, installationvue-ueditor-wrap

i-Vue npm ueditor-wrap -D

 

Step two: Modify ueditor and the introduction of the project

Downloaded ueditor package, after decompression, is the name with a version number, in order to looks simple, it could have changed the name to look pleasing to the eye, such as UEditor

 

The public file and extract the complete successfully completed the name change of UEditor files directly throw our project

 

Note: This project is for the vue-cli3.0 speaking, the allocation of time and vue-cli2.0 slightly different

vue3.0, there is no static document, but there is public, it will all put public in UEditor

 

The third step: enter vue project configuration

To this point, we have been successful 50%

 

Now comes the climax oh

 

The vue-ueditor-wrap the introduction of a component or page you want to use in

 

1、import VueUeditorWrap from 'vue-ueditor-wrap'

Do not forget to register components

2、components: {

  VueUeditorWrap

}

 

Page calls:

3、<vue-ueditor-wrap v-model="value" :config="myConfig"></vue-ueditor-wrap>

 

to call config CI vue-ueditor-wrap, independent arranged separately provided in the page

data () {
  return {
    value: 'This is a case I call vue-ueditor-wrap of'
    myConfig: {
      // Editor does not automatically content stays high
      autoHeightEnabled: false,
      // initial container height
      initialFrameHeight: 240,
      // The initial width of the container
      initialFrameWidth: '100%',
      // upload the file interface (I uploaded this address is temporary interface functions built for the convenience of our experience files, do not use in a production environment !!!)
      serverUrl: 'http://35.201.165.105:8000/controller.php',
      // resource file storage path UEditor, if you are using a vue-cli-generated project, usually do not need to set this option, vue-ueditor-wrap automatically handles common case, if you need a special configuration, refer to the FAQ below 2
      UEDITOR_HOME_URL: '/UEditor/'
    }
  }
}

　　

UEditor also modify the configuration file ueditor.config.jsinUEDITOR_HOME_URL

 

 

 

Here, if no incurable diseases appear, open the page, there is no doubt you should be able to see the rich text blingbling friends

 

Image upload feature needs with back-end configuration, we have not to this point, continue to wait again more

If you have any further questions, your own Baidu ha ha ha