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