飞云小侠的个人博客

欢迎你到这里来

« 让FallingLeavers的图片动态更换 | Main | 开始进行JavaScud开源平台的开发工作 »

Lifetype:使用TinyMCE插入语法着色的代码
2006/04/26,21:48
简单说一下如何在tinymce编辑器里加上语法加亮功能,方便粘代码.

首先,要把Html编辑器替换为TinyMCE,这就不废话了,搜索一下会发现很多文章.感谢他们的工作. 推荐lss的blog: http://blog.nlhs.tyc.edu.tw/category/2/15


如果你想升级到最新的TinyMCE,也可以顺便升级一下.不过最新的tinymce和 2.0.1有一些变化,特别是插件机制,所以还要更新insertresoucrce插件到最新的代码.

然后修复一个bug,见这里 http://forum.lifetype.org.tw/index.php?topic=2237.0 ,修复的文章在 http://scud.blog.javascud.org/post/27.htm .

安装geshi,安装TinyMCE的这个插件:
http://sourceforge.net/tracker/index.php?func=detail&aid=1409990&group_id=103281&atid=738747

注意这个插件也是老版本的了,如果要使用TinyMce也要更新一些代码,不过很简单啦

这个插件在IE下工作有问题,参考那个帖子里面的回复,都改为timeout的方式.当然也能改成其他方式,例如普通的form提交方式,不用担心网速过慢的问题了.

引用:

If you want to make it work correctly, you have two
possibilities :
    - remove lines 23 to 28 il file insertcode.js (but the
popup does not close automaticly now)
    - remove the test line 23 and in all case call the
function setTimeout(function(){tinyMCEPopup.close
();},1000); .You can increase the timeout (in my case I
had to set the timeout over 10000).

 

配置此插件的config.php,设置geshi的路径,支持的语言类型,如果新增了语言类型,还要修改提供的css.

修改lifetype的css或者在模板中引入insertcode.css,用于浏览blog时相应的代码语法加亮生效.

在tinymce的配置中加入insertcode.css的引用,或者直接把insertcode.css的内容复制到tinymce的css中,这样编辑文章的时候也能直接看到效果.

然后在tinymce_plog.js中加入insertcode插件和图标按钮,这样才能在编辑器中插入代码.

ok,可以工作了.

这篇文章只是提供一个思路,没有实际的操作步骤,因为改起来步骤非常多,此文仅供参考吧.

示例图:

插入代码的图

technorati tags: , ,

最新回复

你能不能寫一個完整的安裝方式呀，看不懂你這篇在寫什麼

Comment Icon Posted by: Orz at 2006/12/19, 18:27

TinyMCE怎么赋初始值啊!!!!
它的setContent方法是不是啊
可惜我没有用成功啊
我已经从数据库拿到值了tinyMCE.setContent('');
希望大虾帮忙啊

Comment Icon Posted by: vn at 2006/10/10, 15:05
 
Support by JavaScud