当前时间: 2010年07月29日, 21:08 你好, 欢迎光临! (登录注册)


发表回复 
 
主题评价:
  • 0 次(票) - 平均星级: 0
  • 1
  • 2
  • 3
  • 4
  • 5
所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
2009年04月27日, 22:51 (这个帖子最后修改于: 2010年04月15日 15:51 by admin.)
所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
是的,最新发布的开源的所见即所得编辑器“TinyMCE”已经支持BBCode了,不需要启用HTML权限 - 安全风险。

文档: http://wiki.moxiecode.com/index.php/Tiny...on_Example (英文)

你不需要编辑任何 mybb 或者 tinyMCE 的文件。
你可以使用主题“A”来启用 tinyMCE,然后用主题“B”来代表原来默认的主题。
只需要将 tinyMCE 的文件上传到相应的位置,然后修改相应的模板就可以了。

本教程英文原创作者:Claudio (AgliOEoliO) - http://www.agleoeoleo.org
本教程由MyBB中文站翻译整理
原文链接: http://community.mybboard.net/thread-44328.html
本文可以随意转载,但请注明出处:
http://www.mybbchina.net
所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]

安装说明
1.下载 TinyMCE 2.3.1.1 稳定版,点击这里进入下载页面(英文)
2.解压,将jscripts目录下的“tiny_mce”目录上传到你的论坛根目录下的jscripts目录下,就像这样“www.yoursite.com/forum/jscripts/tiny_mce/
3.下载中文语言包,解压,将langs,plugins,themes三个目录上传到tiny_mce目录下覆盖,就像这样“www.yoursite.com/forum/jscripts/tiny_mce/
4.按照下面所述修改模板。
注意:本站并没有安装此编辑器,这也是为什么我推荐各位将自己的模板备份好,然后将默认模板复制一份作为测试的原因。
强烈建议,请先在一个没有正式发布的论坛上做测试。

暂时没有演示,只有截图供大家欣赏。这是最基本的功能,那些按钮和功能,你可以随意添加修改,非常方便。
   
好,看完截图,就跟着我来修改模板吧:
登陆后台 - 主题和风格 - 模板
1.编辑帖子 模板 - editpost
2.发表回复 模板 - newreply
3.发表主题 模板 - newthread
在以上模板中查找:
PHP 代码:
<script type="text/javascript" src="jscripts/post.js?ver=1400"></script>
</head> 
替换为:
PHP 代码:
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
<!-- // --><![CDATA[
    tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
    language : "zh",
    plugins : "bbcode,safari,paste,searchreplace",
    theme_advanced_buttons1 : "search,replace,|,code,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2 : "image,charmap,|,link,unlink,|,removeformat,cleanup,newdocument,|,undo,redo,|,pas​tetext,|,help",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
    entity_encoding : "raw",
    add_unload_trigger : false,
    remove_linebreaks : false
});
// ]]>
</script>
</head> 
同时查找这个并删除:
代码:
{$codebuttons}

4.用户控制面板 模板 - usercp_editsig
查找:
PHP 代码:
{$headerinclude}
</
head
替换为:
PHP 代码:
{$headerinclude}
<
script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
<!-- // --><![CDATA[
    tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
    language : "zh",
    plugins : "bbcode,safari,paste,searchreplace",
    theme_advanced_buttons1 : "search,replace,|,code,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2 : "image,charmap,|,link,unlink,|,removeformat,cleanup,newdocument,|,undo,redo,|,pas​tetext,|,help",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
    entity_encoding : "raw",
    add_unload_trigger : false,
    remove_linebreaks : false
});
// ]]>
</script>
</head> 
同时查找并删除:
代码:
{$codebuttons}

5.短信 模板 - private_send
查找:
PHP 代码:
<script type="text/javascript" src="jscripts/usercp.js?ver=1400"></script>
</head> 
替换为:
PHP 代码:
<script type="text/javascript" src="jscripts/usercp.js?ver=1400"></script>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
<!-- // --><![CDATA[
    tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
    language : "zh",
    plugins : "bbcode,safari,paste,searchreplace",
    theme_advanced_buttons1 : "search,replace,|,code,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2 : "image,charmap,|,link,unlink,|,removeformat,cleanup,newdocument,|,undo,redo,|,pas​tetext,|,help",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
    entity_encoding : "raw",
    add_unload_trigger : false,
    remove_linebreaks : false
});
// ]]>
</script>
</head> 
同时查找并删除:
代码:
{$codebuttons}

一切结束,这只是最基本的,其中的变量可以自定义,以符合你的需求。
比如:
代码:
    language : "zh",  //语言代码
    theme : "advanced",  //主题,你可以下载新的主题或者自己制作,默认主题只有simple和advanced
你可以访问这里
http://wiki.moxiecode.com/index.php/Tiny...on_options
http://tinymce.moxiecode.com/examples/full.php
获取进一步信息

功能:
1.BBCode支持 - 不需要解析HTML代码。
2.“搜索和替换”功能可以查找并修复错误的代码。
3.自定义BBCode可以使用“编辑HTML源代码”窗口手动写入。
4.多重引用,我测试这么久以来都是正常的。
5.兼容IE7, Opera 9.5, Safari 3.1 和 Firefox 3。

已知的bug/限制:
1.在所见即所得的编辑框内使用的样式是 TinyMCE 的皮肤和插件,所以 引用/代码 显示的和实际在帖子中的效果不符合。(在“编辑HTML源代码”中可以看到它们)。
2.表情无法在弹出窗口中使用,也无法显示在所见即所得编辑框内,预览的时候一切正常。我的解决办法:在“get more”链接使用 target=_blank 链接到“misc.php?action=smilies”。
3.在有此编辑器存在的页面的头部要加载140kb+的文件(jscripts/tiny_mce/tiny_mce.js),如果使用gzip版本,可能会小一些。但是浏览器会缓存它,所以这不会让人太头疼。
4.多重引用正常,但是 用户/反向链接 不正常。
5.文字大小,就像这样:
代码:
[size= x-small]测试文字[/size]
提交之后,这个字体不会改变大小,所以你需要将那个=后面多余的空格去掉,就像这样:
代码:
[size=x-small]测试文字[/size]

Tips:
1.TinyMCE 已经支持多国语言和RTL(right to left,从右往左的文字)。
2.可以下载自己想要的语言。
3.这里有一个gzip文件用来缓存tineMCE,名叫“Compressor”,查看我使用的代码,里面使用了gzip功能,也使用了语言功能:
PHP 代码:
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce_gzip.js"></script>
<script type="text/javascript">
<!-- // --><![CDATA[
tinyMCE_GZ.init({
    plugins : 'bbcode,safari,paste,searchreplace',
    themes : 'advanced',
    languages : 'zh',
    disk_cache : true,
    debug : false
});
// ]]>
</script>

<script type="text/javascript">
<!-- // --><![CDATA[
    tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
        language : "zh",
    plugins : "bbcode,safari,paste,searchreplace",
    theme_advanced_buttons1 : "search,replace,|,code,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2 : "image,charmap,|,link,unlink,|,removeformat,cleanup,newdocument,|,undo,redo,|,pas​tetext,|,help",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "center",
    theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
    entity_encoding : "raw",
        width : "600",
        height : "480",
    add_unload_trigger : false,
        cleanup_serializer : 'xml',
    remove_linebreaks : false
});
// ]]>
</script> 
如果你要使用gzip功能,请下载相应的文件并上传至正确的路径,然后使用这个代码分别替换上面的基本的代码。
赞扬
所有功劳归功于TinyMCE和MyBB。这使我花10分钟就可以用上这么好的两个软件,不需要修改任何文件。

谢谢Evilito (HotEditor 1.2.x updates) 和 SaeedGh (Anelectron wysiwyg for 1.4.x),他们贡献了同样的整合教程,我曾经受益匪浅。

任何关于如何更好的整合 TineMCE 的tips(引用反向链接,正确的预览引用和代码,整合表情,等等)将会受到非常多的关注。我的英语很差,希望这篇教程足够清楚明白的帮助到大家。

译者注:我的英语也很差,翻译的不太好,看不懂的可以去看英文原文,上面有原文链接。
查找这个用户的全部帖子
引用并回复
2009年04月28日, 07:57
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
赶紧支持,admin大哥工作效率真是高啊
查找这个用户的全部帖子
引用并回复
2009年04月28日, 11:52
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
希望对你们有帮助,之前也有很多朋友在问,能不能直接复制粘贴图片啊,链接啊,能不能不要自己排版之类的,这篇教程应该可以帮助不少人吧。
也要感谢你提供的这篇原帖哦,我只是翻译一下而已,呵呵
查找这个用户的全部帖子
引用并回复
2009年06月13日, 21:29 (这个帖子最后修改于: 2009年06月13日 21:30 by countrys.)
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
小弟愚笨,按照ADMIN的方法没有修改成功...能不能弄个详细点的教程呀.或者直接把编好的文件打个包呀,现在就是感觉MYBB的编辑不是很方便呀...
问题我选了用TINYMCE编辑器后...直接就是出错图标,一个红叉...我所有的代码都改好了呀.郁闷
查找这个用户的全部帖子
引用并回复
2009年06月13日, 23:07
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
俄。。这个已经很详细了啊,你要仔细一点哦,因为这个设计到修改模版,所以,基本没有文件需要打包,另外,感觉tinymce已经是安装最方便的编辑器了。

在下一版本,我会考虑将tinymce编辑器整合在中文资源包中。谢谢您的支持。
查找这个用户的全部帖子
引用并回复
2009年06月14日, 13:44
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
谢谢管理员的答复.辛苦你了,哈哈~~~我又重新做了一次...还是不成功..唉..
查找这个用户的全部帖子
引用并回复
2009年06月14日, 23:51 (这个帖子最后修改于: 2009年06月14日 23:51 by admin.)
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
晕,大笑 pm我你的qq,我帮你看看到底是怎么回事。
查找这个用户的全部帖子
引用并回复
2009年06月15日, 10:12
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
已经PM你了....帮帮我吧.唉....没文化真可怕,哈哈~~~
查找这个用户的全部帖子
引用并回复
2009年06月16日, 11:43
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
在老大的帮助下总算是知道问题在哪了,不能点右键复制代码,要用快捷方式,还有在复制代码的时候最底层还有一行不要复制.要不代码会编译出错的,哈哈~~~
查找这个用户的全部帖子
引用并回复
2009年06月16日, 12:06
RE: 所见即所得 BBCode 编辑器: 整合 TinyMCE 3.2.1.1 到 Mybb 1.4 [教程]
呵呵,我基本都是ctrl+c,ctrl+v的,很少用到鼠标右键,
不过我感觉可能mybb和ie6还是有点兼容问题?大笑
查找这个用户的全部帖子
引用并回复
发表回复 


论坛跳转:


联系我们 | MyBB中文站 | 回到顶部 | 回到正文区 | 精简(归档)模式 | RSS 聚合