富文本框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: {
        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', '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>
复制代码

 

posted @   86727515  阅读(10318)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae