网站首页> 后端开发> PHP> TinyMCE实现远程图片上传并使用的配置

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

时间:2020-12-12 10:21:14 阅读:2117次 来源:互联网

TinyMCE作为富文本编辑器,免不了要跟图片打交道,所以好好研究了一下文档,发现tinyMCE已经实现了远程上传图片并调用的功能,配置还是挺简单的,直接附上配置。

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', // 图片上传的具体地址,该选项一定需要设置,才会出现图片上传选项

 

本文地址:https://www.manongw.com/article/358.html

文章来源:码农网

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了深思 PHP 数组遍历的差异(array_diff 的实现)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-27 08:54
  • 本文主要介绍了PHP safe_mode开启对于PHP系统函数有什么影响的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:48
  • 本文主要介绍了PHP重载基础知识回顾的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-10 21:33
  • 本文主要介绍了PHP dirname功能及原理实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 09:17
  • 本文主要介绍了PHP 获取13位时间戳的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-27 10:33
  • 本文主要介绍了PHP 数组转字符串,与字符串转数组的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-27 10:43
  • 本文主要介绍了PHP如何通过date() 函数格式化显示时间的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-13 15:34
  • 本文主要介绍了PHP获取类私有属性的3种方法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-10 21:47
  • 本文主要介绍了PHP延迟静态绑定使用方法实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-10 21:56
  • 本文主要介绍了php实现图片压缩处理的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-10 21:49