tinymce怎么上传附件，就像javaeye这样

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以便于使用绝对路径

最后建议,可以的话选择其它的富文本编辑器吧.

你把js文件的路径改成相对路径应该可以：

src="/js/jscripts/tiny_mce/tiny_mce.js"

没记错的话，这里的第一个/代表主机根目录

改成：

src="js/jscripts/tiny_mce/tiny_mce.js"

---