This article is recorded in the development of background management projects, encountered some problems, and solutions. The project is developed using Vue. Currently, THE UI is iView and the rich text is tinyMCE

Because I used to be a pure Java back-end developer, the company needs to write front-end code as well as back-end code, so my front-end knowledge is very scattered, even small, if you have some basic questions, please do not be surprised and abuse, thank you!

Because this article was written in the middle of the development project, it does not include all the issues that were developed during the development of the project.

If my experience can help you, I will be very happy, let us progress together!

In addition, until the end of the project, as long as there are problems in the process of project update, will continue to update…

The project is no longer being carried out. If there is still a need to do related work, please update it again

1. Problems encountered by Vue itself

1.1 abnormal

1.1.1 Error Computed property “****” was assigned to but it has no setter.

  • Cause: The value is defined by computed, but you need to set a new value for this property during the process to report this exception.
  • Solution: Use data to define variables, use watch to perform logical assignment, or use ‘deep’watch for complex objects
  •   props:{
  	parentDemo: {type:String.defalut:""}},data() {
  	return {
      	demo:this.parentDemo; }},watch: {
  	parentDemo: {handler(value) {
          	this.demo = value;
          },
          deep:true}}Copy the code
  • Reason for removing the original solution: Using the original method, if two components interact, the child component can change the value of the parent component, and the parent cannot subgroup the value (as in the following case) :
  model: {
    prop: "data".event: "changeDetail"
  },
  props: {
    data: {
      type: String.default: () = > ""}},watch: {
  	childData(newValue){
    	this.$emit("changeDetail",newValue)
    }
  },
  data () {
    return {
    	childData:this.data
    }
  }
Copy the code
  • The new solution is to define variables using computed and define corresponding GET and set methods:
  model: {
    prop: "data".event: "changeDetail"
  },
  props: {
    data: {
      type: String.default: () = > ""}},computed: {
    childData: {
      get () {
        return this.data; ChildData (){return this.data}
      },
      set (value) {
        this.$emit("changeDetail", value) // Use set to control the parent component}}},Copy the code

Error in callback for watcher “addForm”: “TypeError: Cannot read property ‘call’ of undefined”

  • Cause: The watch function is incorrectly written or incomplete
  • Check whether the watch function is complete and accurate. Handler missed the last ‘r’.

2. Problems encountered by iView

3. TinyMce problems

3.1 Installation of tinyMce

3.1.1 Reference articles

  • Tinymce. Ax – z.c n/integration…
  • Github.com/lpreterite/…
  • www.sumoli.com/w2/art/1?ar… (Very comprehensive installation using configuration article, most of the problems are solved in this article, the following problems encountered solutions, is also through the handling of the relevant content of this article)

3.1.2 Installation to Use process

3.1.2.1 installation
  1. Yarn add @tinymce/ TinYMce-vue-s or NPM i@tinymce/TinYMce-vue-s
  2. Yarn add TINymCE-s or NPM I tinymce-s
  3. Copy the entire node_modules/tinymce directory to public/
  4. (If language package is not required, this step is ignored) to the official website address: www.tiny.cloud/get-tiny/la…
3.1.2.2 use
  1. Introduce in components that need to use rich text:
import tinymceEditor from "@tinymce/tinymce-vue"
Copy the code
  1. Reference in components:
components:{
	"tinymce-editor":tinymceEditor;
}
Copy the code
  1. Define a tinymce configuration variable in data:
init: {
        base_url: '/tinymce'.// Specify the local tinymce directory
        language: "zh_CN".language_url: '/tinymce/langs/zh_CN.js'.height: 430.// The height of the text box
        plugins:"link lists image code table wordcount".// The function bar corresponding to the text box
        toolbar:"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat".// The toolbar corresponding to the text box
        branding: false.images_upload_handler:(blobInfo, success,failure) = > {
          try {
            success(this.uploadImage(blobInfo.blob()));
            this.$Message.success("Uploading image successfully");
          } catch (e) {
            this.$Message.error(e);
            failure("Uploading picture failed"); }}// How to upload pictures in the corresponding text box
     },
Copy the code
  1. Place the component in its location:
<div>
    <tinymce-editor :init="init" v-model="form.content"></tinymce-editor>
</div>
Copy the code
  1. Upload method:
uploadImage (file) {
      return new Promise((resolve, reject) = > {
      	// to validate additional parameters
        let valid = this.validatorUploadData();
        if (valid === true) {
        // encapsulates the axios upload interface, where URL is the back-end upload address, file is the uploaded image, and otherParams is the additional parameter to carry
          apiUtils.singleUpload(this.uploadUrl, file, this.otherParams).then(res= > {
            if (res.ret) {
              resolve(res.data);
            } else {
              reject(new Error(res.errMsg))
            }
          })
        } else {
          reject(new Error(valid))
        }
      })
    }
Copy the code

3.2 Problems encountered

3.2.1 After installation according to the third article, the system still prompts “NPM i@tinymce/tinymce-vuE-s” when running;

  • Reason: Didn’t understand the sentence: “You need to copy resources from the tinymce package under node_modules to the project so that they can be accessed locally.”
  • Solution: Copy all files from node_modules/tinymce to public/ as prompted in article 2. Later, we learned that the general rich text box needs to do related operations.

3.2.2 Block key Prompt of @tinymce/tinymce-vue

  • Cause: @tinymce/tinymce-vue need to use key, otherwise will appear prompt;
  • Solution: Add the following styles via global CSS (/deep/ penetration is recommended)
// Hide tinymce alert.tox .tox-notifications-container .tox-notification {
  display: none;
}
Copy the code

3.2.3 Full-screen Preview

  • Reason: Since the newly added function is used in the popover, the window is only fixed in the size of the popover during preview, hoping to increase the full-screen preview effect
  • Solution: Tinymce plugin Preview modified to add full-screen buttons

3.2.4 Image self-adaptation

  • Tinymce upload component will automatically load the width and height of the picture after uploading or using the existing picture link. If the width of the editing area is smaller than the picture area, the horizontal strip will appear, which is not only not intuitive, but also very difficult to use. If you need to manually enter width and height at this point, it is very troublesome (for multiple image editing), so you want to use a default value for the style
  • Through simple modification of the corresponding JS, fixed values are used. Width :100% and height: Auto are used as default values. After modification, neither editing box nor preview will produce horizontal bars due to the size of the picture. Of course, if you want to know the size of the original image, it needs to be further modified, because there is no need for this at present, I will not go further (to study, please refer to the var makeItems = function (info) object related definition).
var imageSize = function (editor) {
      return function (url) {
        return getImageSize(editor.documentBaseURI.toAbsolute(url)).then(function (dimensions) {
          return {
            width: String(dimensions.width), // Width: '100%',
            height: String(dimensions.height) // Change this to height:'auto'
          };
        });
      };
    };
    
    var defaultData = function () {
      return {
        src: ' '.alt: ' '.title: ' '.width: ' '.// Default is '100%'
        height: ' '.// Default is 'auto'
        class: ' '.style: ' '.caption: false.hspace: ' '.vspace: ' '.border: ' '.borderStyle: ' '.isDecorative: false
      };
    };
Copy the code

3.2.4 Readonly Parameter Configuration

  • According to the documentation, adding the readonly parameter to the init parameter configuration in the installation step above and assigning it to true is not valid
  • Solution: you also need to setup the setMode(‘readonly ‘) function to finally take effect
init: {
	selector: '#fetures'.readonly: true.inline: true.setup: function (editor) {
		editor.setMode("readonly")}}Copy the code