出家如初,成佛有余

pligg 集成wysiwyg 编辑器tinymce

Posted in Uncategorized by chuanliang on 2007/10/13

由于在自己的个人站点上用pligg来作为网摘工具,因此希望在摘录时候能够直接能够把内容及格式保留下来,而不是单纯的文字介绍,因此用tinymce(用空再试fckeditor)来替代pligg本身的textarea,记录一下集成过程:

1、下载tinymce

http://tinymce.moxiecode.com/download.php

2、上传安装tinymce安装包

上传tinymce到服务器pligg安装目录的3rdparty下并解压

tar zxvf tinymce_2_1_2.tgz

cp -r tinymce/jscripts/tiny_mce/ .

3、启用pligg的html标识支持

在pligg的“后台管理”->“设定配置”->”Submit”中设定“HTML tags to allow”的值为如下内容:

<br><font><img><p><a><strong><ul><li><ol><u><em><span><pre><h1><h2><h3><hr><embed>

4、确认pligg采用的模板文件

查看一下templates/templates.tpl,确认使用的模板为yget

<a href = “{$my_pligg_base}/settemplate.php?template=yget“>yget</a><br/>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

5、修改pligg的模板文件pligg.tpl

修改pligg的模板文件templates/yget/pligg.tpl,在 {checkForJs} 后添加如下的内容

{if $pagename eq "submit" || $pagename eq "editlink"}
  <script language="javascript" type="text/javascript" src="{$my_pligg_base}/3rdparty/tiny_mce/tiny_mce.js"></
script>
{/if}

6、修改pligg的模板文件submit_step_2.tpl和comment_form.tpl和editlink_edit_center.tpl

修改pligg的模板文件templates/yget/submit_step_2.tpl,templates/yget/editlink_edit_center.tpl,在以上几个文件头的 {config_load file="/libs/lang.conf"} 后添加如下的内容
{literal}
    <script language="javascript" type="text/javascript">
        tinyMCE.init({
            mode : "exact",
            elements : "bodytext,summarytext",
            theme : "advanced",
            plugins : "advimage,advlink,emotions,iespell,insertdatetime,preview,media,visualchars,xhtmlxtras",
            theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,insertdate,inserttime,|,forecolor,backcolor,|,hr,removeformat,formatselect",
            theme_advanced_buttons2 : "link,unlink,image,media,|,undo,redo,cleanup,|,code,preview",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_path_location : "bottom",
            height:"350px",
            width:"550px",
            extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
            browsers : "msie,gecko,opera,safari"
        });
    </script>
{/literal}

主要注意的几个参数:

  • width及height元素:要修改tinyMCE wysiwyg的输入框大小,可以修改height和width值。
  • elements元素: elements : “bodytext,summarytext” 是指对<textarea name=”bodytext”..>和<textarea name=”summarytext” ..>这样的元素起作用;

tinymce的一些参数说明:

  • mode: textareas/specific_textareas/exact

textareas: 替换当前页的所有textarea为编辑器

specific_textareas: 不是很明白(特定的textarea??),要配合 textarea_trigger使用

exact: 替换指定ID的div或者textarea为编辑器,要配合elements使用。

  • theme: advanced/simple
    advanced: 高级模式,功能比较多一点。(默认)
    simple: 基本模式,只有基本的功能。
  • plugins: advhr/advimage/advlink/contextmenu/emotions/flash/autosave/style/layer/iespell/insertdatetime/paste/preview/print/save/noneditable/spellchecker/searchreplace/table/zoom/directionality/fullscreen/fullpage/inlinepopups/fullpage
    这些是自带的一些插件,看名字基本上都能明白它的功能。在网站上还有一些其它功能的插件,可以自己去下,放在插件目录下就可以了。
    (”-“加上可以让MCE不试图从插件目录加载这个插件,如plugins : “table,contextmenu,paste,-externalplugin”)
  • language: en/zh_cn/zh_cn_utf8……
    设置使用的语言,网站上也有的下,需要注意的是中文简体和繁体都有两种uft8的,要确定你使用的页面的编码。
    (eg:language : “en”)
  • width:
    height:
    设置编辑器的宽度和高度

具体可以参看http://wiki.moxiecode.com/index.php/TinyMCE:Index

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

7、参考资料:

http://forums.pligg.com/pligg-mods/5124-mod-tinymce-editor-story-submission-step-2-a.html

http://forums.pligg.com/pligg-mods/853-wysiwyg-editor.html

Technorati 标签:,,,

Tagged with: , , ,

一条回应

Subscribe to comments with RSS.

  1. pligg.com said, on 2009/03/08 at 23:04

    pligg 集成wysiwyg 编辑器tinymce | 出家如初,成佛有余…

    来看看这次如何…


发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: