How to upload files using the component rich text editor in iview's background template iview admin?

I use the background template of iview admin, but I just don"t understand how to upload pictures.

searched a lot but couldn"t find a solution.

related codes

<style lang="less">
    @import "../../../../styles/loading.less";
</style>

<template>
    <div>
        <Card shadow>
            <textarea class="tinymce-textarea" id="tinymceEditer"></textarea>
        </Card>
        <Spin fix v-if="spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>...</div>
        </Spin>
    </div>
</template>

<script>
import tinymce from "tinymce";

export default {
    name: "text-editor",
    data () {
        return {
            spinShow: true
        };
    },
    methods: {
        init () {
            this.$nextTick(() => {
                let vm = this;
                let height = document.body.offsetHeight - 100;
                tinymce.init({
                    selector: "-sharptinymceEditer",
                    branding: false,
                    elementpath: true,
                    height: height,
                    language: "zh_CN.GB2312",
                    // menubar: "edit insert view format table tools",
                    plugins: [
                        "advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools",
                        "searchreplace visualblocks visualchars code fullpage",
                        "insertdatetime media nonbreaking save table contextmenu directionality",
                        "emoticons paste textcolor colorpicker textpattern imagetools codesample"
                    ],
                    toolbar1: " newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample",
                    autosave_interval: "20s",
                    image_advtab: true,
                    table_default_styles: {
                        width: "100%",
                        borderCollapse: "collapse"
                    },
                    setup: function (editor) {
                        editor.on("init", function (e) {
                            vm.spinShow = false;
                            if (localStorage.editorContent) {
                                tinymce.get("tinymceEditer").setContent(localStorage.editorContent);
                            }
                        });
                        editor.on("keydown", function (e) {
                            localStorage.editorContent = tinymce.get("tinymceEditer").getContent();
                        });
                    }
                });
            });
        }
    },
    mounted () {
        this.init();
    },
    destroyed () {
        tinymce.get("tinymceEditer").destroy();
    }
};
</script>

<style lang="less" scoped>

</style>

clipboard.png

clipboard.png

Click to insert a picture. There are only these two cases, so how to achieve local upload?

Mar.28,2021

clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png


there is no picture upload here, just let you enter a link to the picture

Menu