作者：乔山办公网日期：
返回目录：word文档
tinymce好像并不支持图片上传,所以如果需要图片上传可以使用kindeditor等编辑器.国内的百度编辑器也蛮好用的.
下面是我个人的解决办法,也许你能从网上找到更好的.这里就做个参考吧.因为我这个方案你直接拿过去是用不了的.
解决的思路是:在image控件上做文章.添加一个上传按钮,把上传回传的url贴到image控件的地址框里.
我以前是这么处理的.
找到/tinymce/plugins/image/plugin.min.js
打开.修改如下代码:
e799bee5baa6e78988e69d83333var 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以便于使用绝对路径
最后建议,可以的话选择其它的富文本编辑器吧.
以前做过类似的功能百，编辑器的内容窗体实际上是一个iframe，将iframe内页面设置为可编度辑状态，就可以通过问js控制其中的内容和格式，并得到编辑后内容的html代码。答
可以粘贴word内容，内估计是浏览器环境本身实现了对word的兼容，就像写字板之类的程容序也可以保留部分word格式一样。
例如 textarea 的id 是 txt
<textarea id=txt>
点击某个百按钮相当度于执行 push_txt 函数
函数代码如下专
function push_txt(str) {
var obj = document.getElementById("txt"); // textarea对象
obj.append(str); // 在对象末尾处属加入内容
}
解析源代码，将图片依次上传到服务器上，然后替换成网页能显示的代码即可