TinyMCE 5 集成 elFinder 文件管理器

admin 前端 2019年9月13日 23:34 查看816次

TinyMCE 5 添加很多新功能,UI也漂亮,所以马上升级,再为它集成 elFinder 文件管理器,一般的需求已经够用

html:

                    <div class="form-group">
                        <label asp-for="Body" class="control-label"></label>
                        <div style="flex: 2">
                            <textarea asp-for="Body"></textarea>
                        </div>
                        <span asp-validation-for="Body" class="text-danger"></span>
                    </div>

 

tinymce.init({
            selector: '#Body',  // change this value according to your HTML
            height: 400,
            language: 'zh_CN',

            convert_urls: false,
            extended_valid_elements: 'span',
            image_advtab: true,

            //picture manager
            file_picker_callback: singleEelFinder.elFinderBrowser,
            images_upload_handler: singleEelFinder.ImagesUploadHandler,
            plugins: 'print preview fullpage code importcss  searchreplace autolink autosave save directionality  visualblocks visualchars fullscreen image link media  template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists  wordcount   imagetools textpattern noneditable help    charmap   quickbars  emoticons',

              toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
              autosave_ask_before_unload: true,
              autosave_interval: "30s",
              autosave_prefix: "{path}{query}-{id}-",
              autosave_restore_when_empty: false,
            autosave_retention: "2m",

          image_advtab: true,
                    importcss_append: true,
             image_caption: true,
          templates: [
                { title: '新表格', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
            { title: '文章样式', description: 'A cure for writers block', content: 'Once upon a time...' },
            { title: '列表样式', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
          ]


        });

调用Elfinder:

 


var singleEelFinder = {
    percent: 70,
    baseUrl: "/tools/elfinder/default",
    selectActionFunction: null,
    elFinderCallback: function (fileUrl) {
        this.selectActionFunction(fileUrl);
    },
    open: function () {
        var w = 800,
            h = 600; // default sizes
        if (window.screen) {
            w = window.screen.width * this.percent / 100;
            h = window.screen.height * this.percent / 100;
        }
        var x = screen.width / 2 - w / 2;
        var y = screen.height / 2 - h / 2;

        window.open(this.baseUrl, "_blank", 'height=' + h + ',width=' + w + ',left=' + x + ',top=' + y);
    },
    elFinderBrowser: function (callback, value, meta) {

        tinyMCE.activeEditor.windowManager.openUrl({
            url: "/tools/elfinder/ForTinyMCE5",
            title: '文件管理器',
            width: 1100,
            height: 600

        });

        window.addEventListener('message', function (event) {
            var data = event.data;
            callback(data.content);

        });

        return false;
    },
    ImagesUploadHandler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/Tools/TinyMCE/TinymceUpload');

        xhr.onload = function () {
            var json;

            if (xhr.status !== 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }

            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location !== 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }

            success(json.location);
        };


        var description = '';

        jQuery(tinymce.activeEditor.dom.getRoot()).find('img').not('.loaded-before').each(
            function () {
                description = $(this).attr("alt");
                $(this).addClass('loaded-before');
            });

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        formData.append('description', description); //found now))

        xhr.send(formData);
    }
};