MyBB中文社区

页数: 1 2

是的，最新发布的开源的所见即所得编辑器“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.按照下面所述修改模板。
注意：本站并没有安装此编辑器，这也是为什么我推荐各位将自己的模板备份好，然后将默认模板复制一份作为测试的原因。
强烈建议，请先在一个没有正式发布的论坛上做测试。

暂时没有演示，只有截图供大家欣赏。这是最基本的功能，那些按钮和功能，你可以随意添加修改，非常方便。
[attachment=145]
好，看完截图，就跟着我来修改模板吧：
登陆后台 - 主题和风格 - 模板
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（引用反向链接，正确的预览引用和代码，整合表情，等等）将会受到非常多的关注。我的英语很差，希望这篇教程足够清楚明白的帮助到大家。

译者注：我的英语也很差，翻译的不太好，看不懂的可以去看英文原文，上面有原文链接。

赶紧支持，admin大哥工作效率真是高啊

希望对你们有帮助，之前也有很多朋友在问，能不能直接复制粘贴图片啊，链接啊，能不能不要自己排版之类的，这篇教程应该可以帮助不少人吧。
也要感谢你提供的这篇原帖哦，我只是翻译一下而已，呵呵

小弟愚笨,按照ADMIN的方法没有修改成功...能不能弄个详细点的教程呀.或者直接把编好的文件打个包呀,现在就是感觉MYBB的编辑不是很方便呀...
问题我选了用TINYMCE编辑器后...直接就是出错图标,一个红叉...我所有的代码都改好了呀.郁闷

俄。。这个已经很详细了啊，你要仔细一点哦，因为这个设计到修改模版，所以，基本没有文件需要打包，另外，感觉tinymce已经是安装最方便的编辑器了。

在下一版本，我会考虑将tinymce编辑器整合在中文资源包中。谢谢您的支持。

谢谢管理员的答复.辛苦你了,哈哈~~~我又重新做了一次...还是不成功..唉..

晕，

pm我你的qq，我帮你看看到底是怎么回事。

已经PM你了....帮帮我吧.唉....没文化真可怕,哈哈~~~

在老大的帮助下总算是知道问题在哪了,不能点右键复制代码,要用快捷方式,还有在复制代码的时候最底层还有一行不要复制.要不代码会编译出错的,哈哈~~~

呵呵，我基本都是ctrl+c，ctrl+v的，很少用到鼠标右键，
不过我感觉可能mybb和ie6还是有点兼容问题？

页数: 1 2

admin

qlan

admin

countrys

admin

countrys

admin

countrys

countrys

admin