Take a note of the problems encountered with the Tinymce rich text editor native to the VUE-CLI2.0 project and the solutions

I didn’t buy tinymce rich text editor service, but I used it online and it would be annoying. After configuring the domain name, it would also come out, so I plan to use it locally again, including plugins (uploading files)

1. The local environment

   Vue-cli2.0, Node version 10.17.0, package tool gulpCopy the code

2. Download the Tinymce installation package

   npm i tinymce --save-dev
   Copy the code

3. In the node_modules dependency packagetinymceFile under the skins directory tostaticUnder the directory

4. The local use

   // in the required project files
       import tinymce from "tinymce/tinymce";
       import "tinymce/themes/silver/theme";
       import Editor from "@tinymce/tinymce-vue";
       
   / / configuration
       editConfig: {
           height: 440.// Rich text height
           language_url: lanuage, / / Chinese package
           language: "zh_CN"./ / Chinese
           skin_url: ".. /.. /.. /.. /.. /static/tinymce/skins/ui/oxide". Skin_url = skin_URL = skin_URL = skin_URL = skin_URL Specify the directory according to the specified CSS file below. (Different versions of Tinymce may vary.) The language package path can be specified directly. After the software is deployed to the test or formal environment, the file cannot be found. My solution is to passimportImport the required files into the project (gulp does not know how to package, so it does not modify the package configuration)Copy the code

5. Upload files, videos, pictures and other functions

       / / picture
       images_upload_handler: (blobInfo, success, failure) = >{},/ / file
       file_picker_callback: (callback, value, meta) = > {
          if (meta.filetype === "file") {
            callback("https://www.baidu.com/img/bd_logo1.png", {
              text: "My text"}); }if (meta.filetype === "image") {
            let input = document.createElement("input"); // Create a hidden input
            input.setAttribute("type"."file");
            input.setAttribute("accept".".png,.jpg,jpeg,.gif");
            let that = this;
            input.onchange = function () {};// Trigger the click
            input.click();
          }
          if (meta.filetype === "media") {
            let input = document.createElement("input"); // Create a hidden input
            input.setAttribute("type"."file");
            input.setAttribute("accept".".mp4");
            let that = this;
            input.onchange = function () {};// Trigger the click
            input.click();
          }
   Copy the code

6. Front-end small white, just learning records, I hope to help you (do not like spray ！！！！！！！！！！)