tinyMCE实现远程图片上传并使用的配置

tinyMCE实现远程图片上传并使用的配置

最近Vue后台项目开发中,使用tinyMCE作为富文本编辑器。作为富文本编辑器,免不了要跟图片打交道,所以好好研究了一下文档,发现tinyMCE已经实现了远程上传图片并调用的功能(在看文档之前,已经有google过相关信息,秉持着喜欢原滋原味的功能,所以还是去啃一下文档),配置还是挺简单的,直接附上配置:

ps: 本文发布时,使用的是tinyMCE 4.7.4版本

tinymce.init({
    selector: '#tinymceEditer',
    branding: false,
    elementpath: false,
    height: height,
    language: 'zh_CN.GB2312',
    menubar: 'edit insert view format table tools',
    plugins: [ //image跟imagetools为开启图片上传的插件功能
        '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'
    },
    image_title: false, // 是否开启图片标题设置的选择,这里设置否
    automatic_uploads: true, //开启点击图片上传时,自动进行远程上传操作
    images_upload_handler: (blobInfo, success, failure) => { // 图片异步上传处理函数
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/api/handler-upload-img.su?method=country-img');

        xhr.onload = function () {
            var json;

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

            json = JSON.parse(xhr.responseText);
            // console.log(json);
            json.location = util.baseURL + json.data.filename; //在该位置,如果您的后端人员返回的字段已经包含json.location信息,则该处可以省略
            if (!json || typeof json.location !== 'string') {
            failure('Invalid JSON: ' + xhr.responseText);
                return;
            }

            success(json.location);
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());

            xhr.send(formData);
    },
    images_upload_base_path: util.baseURL, // 图片上传的基本路径
    images_upload_url: util.apis.upload_img + '?method=country-img', // 图片上传的具体地址,该选项一定需要设置,才会出现图片上传选项

以上是本人使用时的简单配置,如有不当之处或者有更好的做法,感谢指正!!!欢迎交流!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 说到马良这个名字,你一定立刻想起了马良神笔的故事,不过呢,我今天想向大家安利的,不是马良的神笔,而是马良的《坦白书...
    可乐宝宝阅读 715评论 0 4
  • 寂寂无闻的街道上, 踽踽独行的你。 头顶一抹月光, 看你重游旧地。 手抚过熟悉的墙壁, 发出扣人心弦的声音。 往日...
    桢逝茗阅读 321评论 0 3
  • 虽然,每天忙得焦头烂额,但班级的晨诵,从开学到现在,没有一日落下。每天早晨,打卡,跑着进教学楼,开门,读《...
    呵妈阅读 215评论 0 1