给wordpress的编缉器添加coolcode按钮

Posted in 技术分享, 等待

Coolcode这个我想不用介绍了，一个很强大的代码高亮插件。我想很多人都在用或者用过吧。

但用起来确那么点麻烦。每次都要手动去添加代码，添加语言、行号是不是关闭这些。一个两个还好办。多了就麻烦了。下面来介绍下怎么样添加一个按钮放到WP的编缉器上。
一：找到：

  1. edButtons[edButtons.length] =
  2. new edButton('ed_code' 
  3. ,'code' 
  4. ,'<code>' 
  5. ,'</code>' 
  6. ,'c' 
  7. );

在后面添加：

  1. edButtons[edButtons.length] =
  2. new edButton('ed_coolcode' 
  3. ,'coolcode' 
  4. ,'' 
  5. ,'< \coolcode>' 
  6. //注意上面的\应替换成/
  7. ,'x' 
  8. );

二：找到：

  1. else if (button.id == 'ed_link') {
  2.         document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
  3.     }

在后面添加：

  1. else if (button.id == 'ed_coolcode') { 
  2.         document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertCoolcode(edCanvas, ' + i + ');" value="' + button.display + '" />');
  3.     }

三：在文件末尾添加：

  1. function edInsertCoolcode(myField, i, defaultLang, defaultLine) { 
  2.     if (!defaultLang) { 
  3.         defaultLang = 'php';
  4.     } 
  5.     if (!defaultLine) { 
  6.         defaultLine = 'off';
  7.     } 
  8.     if (!edCheckOpenTags(i)) { 
  9.         var codeLang = prompt('输入需要加亮的程序语言', defaultLang);
  10.         var codeLine = prompt('是否显示行号(on, off)', defaultLine);
  11.         edButtons[i].tagStart = '< ' + 'coolcode';
  12.         if (codeLang) { 
  13.             edButtons[i].tagStart = edButtons[i].tagStart + ' lang="' 
  14.                                     + codeLang + '"' 
  15.         } 
  16.         if (codeLine) { 
  17.             edButtons[i].tagStart = edButtons[i].tagStart + ' linenum="' 
  18.                                     + codeLine + '"';
  19.         } 
  20.         edButtons[i].tagStart = edButtons[i].tagStart + '>';
  21.         edInsertTag(myField, i);
  22.     } 
  23.     else { 
  24.         edInsertTag(myField, i);
  25.     } 
  26. }

行了。以后要加亮代码的时候点一下按钮，然后填上你要显示的语言、选择是不是显示行号就OK了。非常方便，赶快试试吧！~

关联阅读

16 Comments

  • 辐射鱼 says:
    2008/11/15 at 02:53

    职业撒花儿……嘎嘎，以后不怕弃用插件后引起文章的代码的改变了

    Reply
  • 摩摩诘 says:
    2008/11/15 at 07:46

    这个真不错!!省的麻烦…
    @辐射鱼 这个只是给编辑器添加按钮,禁用之后不是还是会引起文章代码改变么?

    Reply
  • EaSy says:
    2008/11/15 at 09:06

    职业占坐人，今天没抢到沙发阿，鱼自己抢阿。

    Reply
  • 等待 says:
    2008/11/15 at 12:42

    这个只是方便添加COOLCODE而已,点击按钮会弹出一个对话框.你可以输入PHP,HTML…然后会询问是不是显示行号.ON,OFF非常方便

    Reply
  • xiaorsz says:
    2008/11/15 at 14:16

    貌似没有写要修改的是哪个文件？？？？？？？？？？

    Reply
  • 等待 says:
    2008/11/15 at 15:46

    SOORY.忘了…修改quicktags.js这个文件!
    位于\wordpress\wp-includes\js目录下.

    Reply
  • 打工皇帝 says:
    2008/11/15 at 19:19

    非常不错的说。

    Reply
  • yayu says:
    2008/11/15 at 22:46

    弱弱的问问，加了代码后，是不是还要加图片呢，不然编辑器的图标怎么来？

    反正我是找了半天也没看见。。。。。

    Reply
  • aunsen says:
    2008/11/15 at 23:51

    这个比较适合经常贴代码的码字高手！

    Reply
  • 菠菜 says:
    2008/11/16 at 00:52

    不错，这样的话应用起来久方便多了。

    Reply
  • 林晨 says:
    2008/11/16 at 01:22

    不怎么使用就不改了

    Reply
  • Sivan says:
    2008/11/16 at 20:53

    有coolcode的文章每次编辑都比较麻烦，跟可视化编辑器有冲突……于是换成WP-Syntax了。

    Reply
  • 我是小白 says:
    2008/11/22 at 08:29

    不如给个2.7的和2.63的这个文件吧，懒人啊

    Reply
  • Humphrey says:
    2008/11/25 at 22:17

    加入后的提示框中文显示乱码，勉强能知道它在问啥！呵呵

    Reply

    • Leave a Reply