鍍金池/ 問答/HTML/ 怎么用iview的后臺模板iview admin中的組件富文本編輯器上傳文件昵?

怎么用iview的后臺模板iview admin中的組件富文本編輯器上傳文件昵?

我是使用的iview admin的后臺模板,就是弄不懂它的上傳圖片的方式?

搜了很多都找不到方法解決。。。

相關(guān)代碼

<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: '#tinymceEditer',
                    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

點擊插入圖片,只有這兩種情況,那怎么實現(xiàn)本地上傳的昵?

回答
編輯回答
葬愛

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

2018年1月18日 17:27
編輯回答
笨尐豬

這里沒有圖片上傳啊,只是讓你輸入一個圖片的鏈接吧

2017年3月17日 11:06