10
tinyMCE的具有插入圖像按鈕，但如何處理它的功能 請給一些代碼上傳圖像到TinyMCE的
A
回答
3
Din't嘗試iManager中卻發現tinyFCK好，易於配置賦予的CKEditor的文件管理器與TinyMCE的
1.Download TinyFCK
2.replace filemanger夾集成在tinyFCK與UR CKEditor的文件管理的文件夾
3.code：
-
tinyMCE.init({
theme : "advanced",
file_browser_callback : "fileBrowserCallBack",
});
function fileBrowserCallBack(field_name, url, type, win) {
var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
var enableAutoTypeSelection = true;
var cType;
tinyfck_field = field_name;
tinyfck = win;
switch (type) {
case "image":
cType = "Image";
break;
case "flash":
cType = "Flash";
break;
case "file":
cType = "File";
break;
}
if (enableAutoTypeSelection && cType) {
connector += "?Type=" + cType;
}
window.open(connector, "tinyfck", "modal,width=600,height=400");
}
4
8
!!!!享用!!!這裏是溶液直接從本地計算機
<textarea name="content"></textarea> <title>Local image loading in to tinymce</title> <br/> <b>Image size should be lessthan 500kb</b>
JAVA腳本代碼加載
`
tinymce.init({
selector: "textarea",
toolbar: "mybutton",
setup: function(editor) {
editor.addButton('mybutton', {
text:"IMAGE",
icon: false,
onclick: function(e) {
console.log($(e.target));
if($(e.target).prop("tagName") == 'BUTTON'){
console.log($(e.target).parent().parent().find('input').attr('id'));
if($(e.target).parent().parent().find('input').attr('id') != 'tinymce-uploader') {
$(e.target).parent().parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
}
$('#tinymce-uploader').trigger('click');
$('#tinymce-uploader').change(function(){
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('tinymce-uploader');
if (!input) {
write("Um, couldn't find the imgfile element.");
} else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = new Image();
img.src = fr.result;
editor.insertContent('<img src="'+img.src+'"/>');
}
});
}
if($(e.target).prop("tagName") == 'DIV'){
if($(e.target).parent().find('input').attr('id') != 'tinymce-uploader') {
console.log($(e.target).parent().find('input').attr('id'));
$(e.target).parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
}
$('#tinymce-uploader').trigger('click');
$('#tinymce-uploader').change(function(){
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('tinymce-uploader');
if (!input) {
write("Um, couldn't find the imgfile element.");
} else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = new Image();
img.src = fr.result;
editor.insertContent('<img src="'+img.src+'"/>');
}
});
}
if($(e.target).prop("tagName") == 'I'){
console.log($(e.target).parent().parent().parent().find('input').attr('id')); if($(e.target).parent().parent().parent().find('input').attr('id') != 'tinymce-uploader') { $(e.target).parent().parent().parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
}
$('#tinymce-uploader').trigger('click');
$('#tinymce-uploader').change(function(){
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('tinymce-uploader');
if (!input) {
write("Um, couldn't find the imgfile element.");
} else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = new Image();
img.src = fr.result;
editor.insertContent('<img src="'+img.src+'"/>');
}
});
}
}
});
}
});
`
19
我已經提高了@pavanastechie寫的代碼，但我最終改寫了很多。這裏有一個版本是短得多，這可能具有價值的一些人
tinymce.init({
toolbar : "imageupload",
setup: function(editor) {
var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
$(editor.getElement()).parent().append(inp);
inp.on("change",function(){
var input = inp.get(0);
var file = input.files[0];
var fr = new FileReader();
fr.onload = function() {
var img = new Image();
img.src = fr.result;
editor.insertContent('<img src="'+img.src+'"/>');
inp.val('');
}
fr.readAsDataURL(file);
});
editor.addButton('imageupload', {
text:"IMAGE",
icon: false,
onclick: function(e) {
inp.trigger('click');
}
});
}
});
注：這依賴於jQuery的，沒有它不會起作用。此外，它假定瀏覽器支持window.FileReader，並且不檢查它。
+0
感謝張貼此。幫助我一噸！ – 2016-07-26 20:24:53
+0
非常感謝，但我可以知道如何指定我想要上傳圖像的路徑 – 2016-11-28 11:36:11
+0
圖像保存在內部，而不是作爲一個單獨的文件。像'
' –
2016-11-28 14:45:07
8
我用pavanastechie的和克里斯·李爾公司的解決方案，它完美地爲我工作，並希望分享建立在他們的一個完整的例子，該圖像上傳到服務器，並使用由服務器提供回URL嵌入圖像：
tinymce.init({
toolbar: 'imageupload',
setup: function(editor) {
initImageUpload(editor);
}
});
function initImageUpload(editor) {
// create input and insert in the DOM
var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
$(editor.getElement()).parent().append(inp);
// add the image upload button to the editor toolbar
editor.addButton('imageupload', {
text: '',
icon: 'image',
onclick: function(e) { // when toolbar button is clicked, open file select modal
inp.trigger('click');
}
});
// when a file is selected, upload it to the server
inp.on("change", function(e){
uploadFile($(this), editor);
});
}
function uploadFile(inp, editor) {
var input = inp.get(0);
var data = new FormData();
data.append('image[file]', input.files[0]);
$.ajax({
url: '/admin/images',
type: 'POST',
data: data,
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success: function(data, textStatus, jqXHR) {
editor.insertContent('<img class="content-img" src="' + data.url + '"/>');
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.responseText) {
errors = JSON.parse(jqXHR.responseText).errors
alert('Error uploading image: ' + errors.join(", ") + '. Make sure the file is an image and has extension jpg/jpeg/png.');
}
}
});
}
0
基於@Chris Lear的回答，我重新修改了腳本，以便它支持多個文件上傳到服務器，並且在發佈內容之後以及在使用一些php腳本更新表之前刪除了預覽數據圖像
tinymce.init({
selector: 'textarea',
setup: function(editor) {
var n = 0;
var form = $('#form_id'); // your form id
editor.addButton('imageupload', {
text:"IMAGE",
icon: false,
onclick: function(e) {
$(form).append('<input id="tinymce-uploader_'+n+'" class="tinymce-uploader" type="file" name="pic['+n+']" mutliple accept="image/*" style="display: none;">');
$('#tinymce-uploader_'+n).trigger('click');
n++;
$('.tinymce-uploader').on("change",function(){
var input = $(this).get(0);
var file = input.files[0];
var filename = file.name;
var fr = new FileReader();
fr.onload = function() {
var img = new Image();
img.src = fr.result;
editor.insertContent('<img data-name="'+filename+'" src="'+img.src+'"/>');
}
fr.readAsDataURL(file);
});
}
});
},
在php裏面上傳php文件：
function data2src($content, $img_path ='') {
preg_match('/data\-name="([^"]+)/i',$content, $data_name);
$tmp = preg_replace('/src=["]data([^"]+)["]/i', '', $content);
$content = preg_replace('/data\-name\=\"/i', 'src="'.$img_path, $tmp);
return $content;
}
相關問題
- 1. TinyMCE的圖像上傳器
- 2. 圖像上傳到tinymce的asp.net mvc
- 3. 插入/上傳圖像到tinyMCE 4.X
- 4. 將圖片上傳到tinyMCE
- 5. TinyMCE圖像上傳覆蓋images_upload_handler
- 6. TinyMCE圖像上傳器和路徑
- 7. 使用TinyMCE上傳圖像和文件
- 8. 在TinyMCE中自定義圖像上傳
- 9. 如何使用TinyMCE上傳圖像？
- 10. TinyMCE的＆JustBoil.ME圖片上傳
- 11. TinyMCE的：在圖片上傳
- 12. Tinymce編輯器啓用圖像上傳和媒體上傳
- 13. 從本地上傳圖片到TinyMCE？
- 14. 用tinyMce上傳圖片
- 15. Angular 4 - TinyMCE圖片上傳
- 16. TinyMCE - 如何上傳圖片
- 17. TinyMCE的獲取圖像_description與file_picker_callback和圖片上傳
- 18. 將uploadify上傳到tinymce textarea
- 19. TinyMCE的上傳NS_ERROR_FAILURE
- 20. 在TinyMCE插件上傳我使用的插件圖像
- 21. tinymce（IMCE）的Drupal圖像上傳模塊 - 權限
- 22. 找不到在CodeIgniter中配置任何TinyMCE圖像上傳插件的方法
- 23. 將圖像上傳到Dropbox
- 24. 將圖像上傳到localStorage
- 25. Rails上傳圖像到Cloudinary
- 26. 將圖像上傳到S3
- 27. 將圖像上傳到Twitter
- 28. 將圖像上傳到Azure
- 29. 圖像不上傳到webservice
- 30. TinyMCE圖像上傳和插入沒有畫廊
你需要購買imagemanager組件來啓用這個功能。 – Lazarus 2010-10-06 11:39:01
任何免費選項 – 2010-10-06 11:58:11