zoukankan      html  css  js  c++  java
  • 富文本框TinyMCE上传本地图片基本配置

    注意:上传本地图片是TinyMCE 4.3才新引入的功能,所以该配置只适合4.3及其以上

    <!doctype html>
    <html>
    <head>
    <script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=自己申请的KEY'></script>
    <script>
      tinymce.init({
        selector: 'textarea#mytextarea',//意思是将TinyMCE插件放入‘textarea’ID为mytextarea的标签里
        plugins: [ //配置插件:可自己随意选择,但如果是上传本地图片image和imagetools是必要的
          'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
          'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
          'save table contextmenu directionality emoticons template paste imagetools textcolor'
        ],
    //工具框,也可自己随意配置
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',       
        image_advtab: true,
        table_default_styles: {
             '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', 'FileAction_updateFile');//第一个参数是请求方式,第二个参数是请求地址,我这里配置的是struts的action,如果是其他(PHP等)的可这样配置:xxx.php
     
            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);
            };
     
            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            xhr.send(formData);
        }
      });
      </script>
    </head>
    <body>
    <center>
    <br>
      <form method="post" action="">
        <textarea id="mytextarea" name="test"></textarea>
        <input type="submit" value="提交">
      </form>
    </center>
    </body>
    </html>
  • 相关阅读:
    差分约束
    关系运算图。。。(差分约束)
    克鲁斯卡尔算法+并查集
    整体代换(数学)
    魔性の分块 | | jzoj1243 | | 线段树の暴力
    论人品 | | noip1015模拟考
    hash 表 | | jzoj 1335 | | 脑残+手残 | | 集合的关系
    凸轮大总结
    Floyd | | jzoj[1218] | | [Usaco2009 Dec]Toll 过路费 | | BZOJ 1774 | | 我也不知道该怎么写
    topsort | | jzoj[1226] | | NOIP2003神经网络
  • 原文地址:https://www.cnblogs.com/mr-hu2009/p/10000027.html
Copyright © 2011-2022 走看看