Some time ago, I met a requirement to use rich text in the project. I have high requirements for rich text function, so I chose Baidu UEditor later. Since this is an older editor, there are fewer articles on the web combined with Vue. You can see from Github that the last submission was made in 19. Github address and official document address are attached here for later reference.

Here I take vuE-CLI4 as an example:

  1. Put the UEditor project downloaded from Github directly into the public folder in our own project.

  1. The installationVueUeditorWrapcomponent

Some information about this component can be viewed here

NPM I vue-ueditor-wrap # or yarn add vue-ueditor-wrapCopy the code
  1. Introduced in the project
// main.js import VueUeditorWrap from 'vue-ueditor-wrap' Vue.component('VueUeditorWrap',VueUeditorWrap) // You can also use it directly in a single file.vue (and remember to register it in components)Copy the code
  1. use
<VueUeditorWrap V -model="ueContent" :config="myConfig" /> // Config is the configuration option of the editor. More configuration items can be consulted in the official documentation. AutoHeightEnabled: true, // Initial container height initialFrameHeight: 600, // Initial container width initialFrameWidth: // UEDITOR_HOME_URL: process.env.NODE_ENV == "production"? "/material/trade/ue/" : "/ue/", imagePopup: false, imageScaleEnabled: false, elementPathEnabled: False, autoFloatEnabled: false, allowDivTransToP: false, zIndex: 1, // Maximum allowed characters maximumWords:100000},Copy the code

Here’s what it looks like when it’s configured