zoukankan      html  css  js  c++  java
  • 富文本编辑器TInyMCE,本地图片上传(Image Upload)

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor

    第一步

    下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js。

    第二步

    下载tinyMCE image upload 插件 tinymce-imageupload,解压后把该文件夹放在 tinymcejs inymceplugins目录下。

    该插件使用了jquery.iframe-post-form.js ,在试用的时候没有成功,遂换成 jquery.form.js 对插件进行改造。

    第三步

    下载jquery.form.js,在HTML页面引入jquery和该插件。

    jquery.form.js 提供了基础的文件上传表单,可以用此插件上传本地图片到服务器。然后得到图片对应的URL。

    第四步:

    在HTML页面,初始化tinyMCE:

     1 tinymce.init({
     2     selector: '#myTextArea',
     3     theme: 'modern',
     4     menubar: false,
     5      750,
     6     height: 250,
     7     autoresize_min_height: 350,
     8     imageupload_url: 'serverAddress/file/fileUpload',
     9     plugins: [
    10         "advlist autolink print preview  imageupload"
    11     ],
    12     toolbar: "insertfile undo redo | bold | print preview | imageupload",
    13     convert_urls: false,
    14     // init_instance_callback: setTinyContent
    15 });

    文件上传后的处理(tinymcepluginsimageuploadplugin.min.js)

    根据服务器的返回对应修改。大致流程:把服务器返回的路径置入<img>标签中,插入到tinyMCE编辑器中,然后即可看到上传的图片。

     1 $('#uploadImageForm').ajaxSubmit({
     2         dataType: 'json',
     3         success: function(response){
     4             if (response.url) {
     5                 var tpl = '<img src="%s" width="220" data-key="%k"/>';
     6                 var tplV = tpl.replace('%s', response.url);
     7                 tplV = tplV.replace('%k', response.key);
     8                 ed.insertContent(tplV);
     9                 ed.focus();
    10                 removeForeground();
    11                 removeBackground();
    12             } else {
    13                 showImageUploadError('上传失败,请重试!');
    14             }
    15         },
    16         error: function(){
    17             showImageUploadError('上传失败,请重试!');
    18         }
    19 });

    改造后的插件 git地址

    注意点:

    点击上传图标后,弹出的上传图片窗口,由于tinyMCE内置CSS的问题导致弹窗缩放0.1倍,问题CSS: .mce-window {transform:scale(.1)} (come from skin.min.css)

    在使用的时候重写覆盖掉就可以了:

    .mce-window {
        transform: initial !important;
    }

     SEE ALSO

  • 相关阅读:
    PHP 统计数据功能 有感
    一个高效的工作方式
    Navicat for mysql 导出sql文件 导入sql文件
    chrome浏览器,调试详解,调试js、调试php、调试ajax
    网络编程中几个地址结构与转换(in_addr,sockaddr,sockaddr_in,pcap_addr)
    TCP 协议
    tcp抓包 Wireshark 使用
    (转)linux中常用的头文件
    ubuntu安装使用kdevelop
    安卓u8800刷机
  • 原文地址:https://www.cnblogs.com/hzj680539/p/5715489.html
Copyright © 2011-2022 走看看