A constantly learning front-end rookie, welcome correction, don’t spray…

preface

First, the KB editor! The website mentions mo no more. Then have to thank a certain and so on big guy, because really checked for a long time of information, you ask me why don’t change the editor,?? (Manual question mark), I do not have the right…… , business needs, let’s do it (project is VUE-CLI4).

Test the waters

Your first choice is to go to the uEditor website and see the document

  ？？？？？？

Then go to github https://github.com/fex-team/ueditor, oh, have given up treatment

Test the waters by downloading version 1.5.0 of the readme code as taught, incorporating some ancient blogs, first main.js to introduce this, then that. The problem is, the code didn’t find these files, the face is even darker.

Oh, well, because the level is too dish, then Baidu, fortunately, find a good shade of the tree vue-ueditor-wrap, there are big guy packaging, looking at big guy code open whole.

Dry goods

  1. Install and usevue-ueditor-wrap

NPM I vue-ueditor-wrap or yarn add vue-ueditor-wrap

  1. downloadUEditorResource file

I was with the great spirit, https://github.com/HaoChuan9421/vue-ueditor-wrap-demo, directly get his UEditor folder (1.4.4.3) under static, have dmeo can reference can save a lot of effort

You can also download it from Vue-ueditor-wrap in Git

Once the download is complete, place the UEditor folder in the public folder (since I am vue-cli4, other versions should be placed in static or public depending on the situation).

  1. Import UEditor resources

In main.js

  // In order
  import '.. /public/UEditor/ueditor.config.js'
  import '.. /public/UEditor/ueditor.all.min.js'
  import '.. /public/UEditor/lang/zh-cn/zh-cn.js'
  import '.. /public/UEditor/ueditor.parse.min.js'
  // These are the files not found in version 1.5.0 mentioned above
Copy the code

It’s really important to pay attention to the path problem

Because vue-ueditor-wrap has been processed by HaoChuan9421, but I used xiu-mi UI plugin. If I don’t use vue-ueditor-wrap, it will have to be processed separately. I am lazy, so I introduced it.

  1. Modify some files in the UEditor

Add window.UEDITOR_HOME_URL = “/ ueditor /” to ueditor.config.js

Third – party/zeroclipboard/zeroclipboard modify the following section (solve an error, why not explain, many bloggers have said, such as https://segmentfault.com/a/1190000016966347).

  1. Use the editor in the page
  <vue-ueditor-wrap ref="editor" v-model="msg" :config="editorConfig" :destroy="true" />
Copy the code
  import VueUeditorWrap from 'vue-ueditor-wrap'
  components: {VueUeditorWrap},data() {
    return {
      msg: '< h2 > < img SRC = "http://img.baidu.com/hi/jx2/j_0003.gif" / > Vue + UEditor + v model two-way binding + pit than editor < / h2 >'./ / ueditor configuration
      editorConfig: {
        autoHeightEnabled: true.// Automatically change the height
        autoFloatEnabled: true.initialContent: 'Please enter content'.autoClearinitialContent: true.initialFrameWidth: '50%'.// Initialize the width
        initialFrameHeight: 200.// Initialization is high
        BaseUrl: ' '.// Upload file interface (this address is my temporary interface for you to experience the file upload function) - change to your own backend address
        serverUrl: 'http://35.201.165.105:8000/controller.php'.// UEditor directory for storing resource files
        UEDITOR_HOME_URL: '/UEditor/' // Important Important Important Important Important Important Important Important Important Important Path must be configured!!}}}Copy the code

Under normal circumstances, the editor should be displayed on the page

Of course, if you report the following error, be sure to check the path of each step above, after all, this thing, is the path is prone to problems, but nothing else

Now let’s use the Xiu Mi UI

  1. Download xiumi resources

Please refer to the documents on xiumi’s official website

Download the four resource files and place them in the UEditor folder

  1. Introduce the xiumi UI file
<link rel="stylesheet" href="./UEditor/xiumi-ue-v5.css">
Copy the code
<script type="text/javascript" charset="utf-8" src="./UEditor/xiumi-ue-dialog-v5.js"></script>
Copy the code

Again, pay attention pay attention to the path problem

  1. Modify thexiumi-ue-dialog-v5file

IframeUrl: ‘/ UEditor/xiumi – ue – dialog – v5. HTML’,

Note path……

  1. Modify theueditor.config.js

Section: [‘ class ‘, ‘style’].

At this point, the path is not an accident, should be no problem

In addition: Change the server address of picture uploading and video uploading to its own, and the background needs to cooperate with the modification (change the serverUrl in step 5).

conclusion

Pay attention to the path, calm down, focus on documents and blogs and so on