首页
话题
消息
手册
我的
返回介绍

Local upload

发布于 2019-05-06 字数5222 浏览 879 评论 0

We’ve supported local file picking and image uploading for quite some time already. However making these features functional required some effort on the user’s side, while not being immediately obvious, at the same time. Some effort is still required, but we decided to supplement the feature with an intuitive UI.

Once images_upload_url is defined in the config, an Upload tab appears in the Image Dialog.

Upload tab

So a setup like this displays a friendly UI simplifying image upload either by picking it up or by dropping it in, directly from the desktop:

TinyMCE HTML JS Edit on CodePen


<textarea id="local-upload">
    Click the 'Insert/Edit Image' button, then click the 'Upload' tab. Alternatively, drag and drop an image here.
</textarea>



tinymce.init({
  selector: 'textarea#local-upload',
  plugins: 'image code',
  toolbar: 'undo redo | image code',

  /* without images_upload_url set, Upload tab won't show up*/
  images_upload_url: 'postAcceptor.php',

  /* we override default upload handler to simulate successful upload*/
  images_upload_handler: function (blobInfo, success, failure) {
    setTimeout(function () {
      /* no matter what you upload, we will turn it into TinyMCE logo :)*/
      success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
    }, 2000);
  }
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { tinymce.init({ selector: ‘textarea#local-upload’, plugins: ‘image code’, toolbar: ‘undo redo | image code’, /* without images_upload_url set, Upload tab won’t show up*/ images_upload_url: ‘postAcceptor.php’, /* we override default upload handler to simulate successful upload*/ images_upload_handler: function (blobInfo, success, failure) { setTimeout(function () { /* no matter what you upload, we will turn it into TinyMCE logo :)*/ success(‘http://moxiecode.cachefly.net/tinymce/v9/images/logo.png’); }, 2000); } }); })(); (function() { /* TODO: more js, less jekyll */ var id = “local-upload”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22local-upload%22%3E%0A%20%20%20%20Click%20the%20’Insert/Edit%20Image’%20button,%20then%20click%20the%20’Upload’%20tab.%20Alternatively,%20drag%20and%20drop%20an%20image%20here.%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’textarea#local-upload’,%0A%20%20plugins:%20’image%20code’,%0A%20%20toolbar:%20’undo%20redo%20%7C%20image%20code’,%0A%0A%20%20/*%20without%20images_upload_url%20set,%20Upload%20tab%20won’t%20show%20up*/%0A%20%20images_upload_url:%20’postAcceptor.php’,%0A%0A%20%20/*%20we%20override%20default%20upload%20handler%20to%20simulate%20successful%20upload*/%0A%20%20images_upload_handler:%20function%20(blobInfo,%20success,%20failure)%20%7B%0A%20%20%20%20setTimeout(function%20()%20%7B%0A%20%20%20%20%20%20/*%20no%20matter%20what%20you%20upload,%20we%20will%20turn%20it%20into%20TinyMCE%20logo%20:)*/%0A%20%20%20%20%20%20success(‘http://moxiecode.cachefly.net/tinymce/v9/images/logo.png’);%0A%20%20%20%20%7D,%202000);%0A%20%20%7D%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_local-upload”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

All image uploading options are supported, including images_upload_handler (a way to define custom file uploader) and images_upload_credentials.

For more details check Upload Images tutorial from the General Configuration series.

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!