Use tinymce rich text editor vue, a dialog box to resolve tinymce in low-level problems

1, the installation

npm install tinymce -S

2, to the node_modules \ tinymce inside the file folder comprising tinymce copy all static folder, as FIG.

 

 

3, tinymce default interface is in English, but also need to download a Chinese language pack zh_CN.js

https://www.tiny.cloud/get-tiny/language-packages/

In the new folder tinymce langs folder, the language pack downloaded into the folder below langs FIG.

 

 

 4, the introduction tinymce in main.js

 

 

 

 

 

 5, the components folder New Editor.vue file

 

 

 Editor.vue:

<template>
  <div class="SEditor">
    <textarea class="my_editor" id="Editor" v-model="Editortext"></textarea>
  </div>
</template>

<script>
    export default {
        props: {
            EditorTexts: ''
        },
        data() {
            return {
                Editortext: '' ,
            }
        },
        computed: {

        },
        watch: {
            EditorTexts: function (newVal, oldVal) {
                console.log(newVal)
                this.Editortext= newVal
                tinyMCE.activeEditor.setContent(newVal)
            }
        },
        mounted() {
            this.tinymce();
        },
        beforeDestroy() {
            this.$tinymce.remove()
        },
        methods: {
            tinymce() {
                let _this = this;
                _this.$tinymce.baseURL = '/static/tinymce'
                _this.$tinymce.init({
                    selector: "#Editor",
                    language_url: ' ../../../../static/tinymce/langs/zh_CN.js ' , // set Chinese 
                    Language: ' zh_CN ' ,
                    plugins: [ // configure the plug: can be free to choose their own, but if it is to upload local images and image imagetools is necessary 
                        ' advlist AutoLink Link Lists charmap preview image HR Anchor pagebreak ' ,
                    ],
                    // tool box, also can easily configure your own 
                    Toolbar: ' InsertFile Use the undo redo | styleSelect | Bold Italic | AlignLeft AlignCenter AlignRight alignjustify | bullist numlist outdent indent | Image Link | the ForeColor the BackColor ' ,
                    image_advtab: true,
                    image_dimensions: true,
                    width:'97%',
                    height: 380,
                    table_default_styles: {
                        width: '100%',
                        borderCollapse: 'collapse'
                    },
                    image_title: to false , // is turned on to select the image title set, here provided no 
                    automatic_uploads: to true ,
                     // Image Upload asynchronous handler 
                    images_upload_handler: (blobInfo, Success, failure) => {
                         var formData;
                        formdat A =  new formdat A ();
                        formData.append ( ' File ' , blobInfo.blob ());
                         // formData.append ( 'Group', 'Editor'); 
                        // . _this $ requestPost this is what I call the background image upload interfaces 
                        const img_file = blobInfo.blob ()
                        console.log(blobInfo.blob())
                        _this.$requestPost({
                            url: "/baseapi/files?group=editor",
                            params: formData,
                        }, data => {
                            Success ( ' API ' + data.url)
                             // url address must be spliced correctly, otherwise the picture will not be displayed in rich text box 
                        }, ERR => {
                            failure ( ' upload failed ' )
                        })
                    },
                    init_instance_callback: function(editor) {
                        editor.on ( ' keyUp ' , () => {
                             // get content rich text editor inside 
                            _this.Editortext = editor.getContent ();
                             // editor.setContent (_this.Editortext)

                        });
                    },
                    Setup: (Editor) => {
                         // throws 'on-ready' event hook 
                        editor.on (
                             ' the init ' , () => {
                                 // the console.log (_this.Editortext) 
                                // the console.log (_this. EditorTexts) 
                                // the props value assigned Editortext data monitored in 
                                _this.Editortext = _this.EditorTexts
                                editor.setContent(_this.Editortext)
                            }
                        )
                        // Throws 'input' hook event, the synchronization data value 
                        editor.on (
                             ' INPUT Change Use the undo the redo ' , () => {
                                _this.$emit('input', editor.getContent())
                            }
                        )
                    }
                    }). the then (Resolve => {
                     // Initialization rich text editor contents inside 
                    Resolve [ 0 ] .setContent (_this.Editortext)

                });
            },

        }
    }
</script>

<style>

</style>

6, where it is needed to introduce the component

 

 

 

 

 

 7, in the dialog box to resolve tinymce low level of problem? ? ?

The method is simple, find F: \ hzyy-htnew \ static \ tinymce \ skins \ ui \ oxide following skin.min.css file, the z-index unified behind inside five plus zero

Reference links: tinymce Chinese document  https://www.cnblogs.com/jvziking/p/12028275.html

Rich text editor tinymce get the text content of text and settings: https://blog.csdn.net/u012679583/article/details/50505842

Initialization: https://segmentfault.com/a/1190000012791569

The main reference: https://blog.csdn.net/vipsongtaohong/article/details/89553271