tinymce怎么上传附件,就像javaeye这样
发布网友
发布时间:2022-04-22 04:13
我来回答
共1个回答
热心网友
时间:2023-11-28 17:27
tinymce好像并不支持图片上传,所以如果需要图片上传可以使用kindeditor等编辑器.国内的百度编辑器也蛮好用的.
下面是我个人的解决办法,也许你能从网上找到更好的.这里就做个参考吧.因为我这个方案你直接拿过去是用不了的.
解决的思路是:在image控件上做文章.添加一个上传按钮,把上传回传的url贴到image控件的地址框里.
我以前是这么处理的.
找到/tinymce/plugins/image/plugin.min.js
打开.修改如下代码:
var y = [{
name : "src",
type : "filepicker",
filetype : "image",
label : "Source",
autofocus : !0,
onchange : r
}, {//这部分是我自己加入进去的.
name : "Pic",
type : "button",
value : "Pic",
text : "Pic",
onclick : function() {//主要处理好这部分事件.刚好我里面有一个KindEditor,我就调用KindEditor来处理了.你也可以自己手动的写一个.
// 获取src控件
var src = s.find("#src");
// 从全局作用域获取editor,
// 这里省略了KindEditor的初始化,也省略了事件的点击,直接打开KE控件
editor.loadPlugin('smimage', function() {
editor.plugin.imageDialog({
imageUrl : $(e.target)
.parent()
.prevAll("input[type=text]")
.val(),
clickFn : function(url, title,
width, height, border,
align) {
// 将服务器返回的url放到src控件中
src.value(url);
// 隐藏KindEditor上传控件
editor.hideDialog();
/**
* 是否上传成功才会执行clickFn方法。
*
*/
// FIXME 确实是否可以这样
// $("#saveBgPhoto").trigger("click");
}
});
});
// });
// });
}
}, h, {
所以,实现起来比较麻烦.主要是onclick事件里面要处理好上传的步骤.
至于为什么我既然用了KindEditror还用TinyMce,这就是没有考虑周全的问题.
editor.loadPlugin('smimage', function() {
editor.plugin.imageDialog({
imageUrl : $(e.target)
.parent()
.prevAll("input[type=text]")
.val(),
clickFn : function(url, title,
width, height, border,
align) {
// 将服务器返回的url放到src控件中
src.value(url);
// 隐藏KindEditor上传控件
editor.hideDialog();
/**
* 是否上传成功才会执行clickFn方法。
*
*/
// FIXME 确实是否可以这样
// $("#saveBgPhoto").trigger("click");
}
});
});
这一部分代码用来处理具体的上传过程.你可以自己实现一个,然后调用
// 将服务器返回的url放到src控件中
src.value(url);
这部分代码,把服务端回传的url放入到image控件的地址框上去.
另外,需要设置好tinymce的启动参数.
tinymce.init({
selector : "#" + editorId,
theme : "modern",
language : "zh_CN",/* 需要下面这个语言包 */
/* language_url : "/tinymce/langs/zh_CN.js", */
/** plugins: [moxiemanager wordcount]不要这个插件
* moxiemanager 需要购买,wordcount不能统计中文
* */
plugins : [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor "],
toolbar1 : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2 : "print preview media | forecolor backcolor emoticons",
image_advtab : true,
/**
* (如果插入的图片的路径是相对路径的话)自动转换插入的图片的路径,设置为false就不会自动转换了,替代的是绝对的路径。
* @type Boolean
*/
convert_urls : false,
templates : [{
title : 'Test template 1',
content : 'Test 1'
}, {
title : 'Test template 2',
content : 'Test 2'
}],
setup : function(editor) {
editor.on('show', onShow);
editor.on('hide', onHidden);
editor.on('change', onChange);
}
});
在plugins里面要包含image控件.convert_urls最好设成false以便于使用绝对路径
最后建议,可以的话选择其它的富文本编辑器吧.