<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>4's symfony blog &#187; FCKeditor</title>
	<atom:link href="http://www.foolbirds.com/t/fckeditor/feed" rel="self" type="application/rss+xml" />
	<link>http://www.foolbirds.com</link>
	<description>all about symfony</description>
	<lastBuildDate>Fri, 14 Oct 2011 12:36:02 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>在symfony中使用FCKeditor上传图片附件</title>
		<link>http://www.foolbirds.com/symfony-fckeditory-and-upload-image.html</link>
		<comments>http://www.foolbirds.com/symfony-fckeditory-and-upload-image.html#comments</comments>
		<pubDate>Wed, 11 Feb 2009 05:31:11 +0000</pubDate>
		<dc:creator>maker</dc:creator>
				<category><![CDATA[symfony]]></category>
		<category><![CDATA[FCKeditor]]></category>
		<category><![CDATA[上传]]></category>

		<guid isPermaLink="false">http://www.foolbirds.com/?p=449</guid>
		<description><![CDATA[在项目中我们经常需要使用富文本编辑器(什么是富文本?), 很多时候我们需要在我们编辑的内容中插入媒体文件, 比如图片,视频等等, 这就要涉及到富文本编辑器的上传功能, 本文主要讲解如何在symfony中使用FCKeditor和如何配置上传文件.  富文本编辑器我是更喜欢tinyMCE的, 但由于tinyMCE对上传的支持并不好, ImageManager等插件都是收费使用的, 所以不得不转向了FCKeditor. 首先我们进入FCKeditor的官方主页www.fckeditor.net下载源码包(http://www.fckeditor.net/download), 当前最新版本是2.6.4.  下载完源之后我们将压缩包解压到项目的web/js目录下, 修改要使用FCKeditory的app的config/settings.yml, 添加代码如下:  all:
&#160; .settings:
&#160;&#160;&#160; rich_text_fck_js_dir: js/fckeditor 如果不使用上传功能, 那么现在FCKeditory就可以使用了.  // app/editor/modules/test/templates/indexSuccess.php
&#60;?php use_helper('Form');?&#62;
&#60;?php echo textarea_tag('name', 'default content', array ('rich'=&#62;'fck','tool'=&#62;'Basic','size' =&#62; '30x30')) ?&#62; 访问http://test/editor_dev.php/test/index 效果如下   接下来开始配置上传图片附件, 这个功能是FCKeditor的功能, 所以要在FCKeditor进行配置. 首先编辑web/js/fckeditor/fckconfig.js var _FileBrowserLanguage&#160;&#160;&#160; = 'php' ;&#160;&#160;&#160; // asp &#124; aspx &#124; cfm [...]]]></description>
			<content:encoded><![CDATA[<p>在项目中我们经常需要使用富文本编辑器(<a href="http://baike.baidu.com/view/56075.htm">什么是富文本?</a>), 很多时候我们需要在我们编辑的内容中插入媒体文件, 比如图片,视频等等, 这就要涉及到富文本编辑器的上传功能, 本文主要讲解如何在<a href="http://www.symfony-project.com">symfony</a>中使用<a href="http://www.fckeditor.net">FCKeditor</a>和如何配置上传文件.  富文本编辑器我是更喜欢<a href="http://tinymce.moxiecode.com/">tinyMCE</a>的, 但由于<a href="http://tinymce.moxiecode.com/">tinyMCE</a>对上传的支持并不好, <a href="http://tinymce.moxiecode.com/plugins_imagemanager.php">ImageManager</a>等插件都是收费使用的, 所以不得不转向了<a href="http://www.fckeditor.net">FCKeditor</a>. 首先我们进入FCKeditor的官方主页<a href="http://www.fckeditor.net">www.fckeditor.net</a>下载源码包(<a href="http://www.fckeditor.net/download">http://www.fckeditor.net/download</a>), 当前最新版本是2.6.4.  下载完源之后我们将压缩包解压到项目的web/js目录下, 修改要使用<a href="http://www.fckeditor.net">FCKeditory</a>的app的config/settings.yml, 添加代码如下:  <code>all:<br />
&nbsp; .settings:<br />
&nbsp;&nbsp;&nbsp; rich_text_fck_js_dir: js/fckeditor</code> 如果不使用上传功能, 那么现在<a href="http://www.fckeditor.net">FCKeditory</a>就可以使用了.  <code>// app/editor/modules/test/templates/indexSuccess.php<br />
&lt;?php use_helper('Form');?&gt;<br />
&lt;?php echo textarea_tag('name', 'default content', array ('rich'=&gt;'fck','tool'=&gt;'Basic','size' =&gt; '30x30')) ?&gt;</code> 访问http://test/editor_dev.php/test/index 效果如下  <img class="aligncenter size-full wp-image-451" title="2009-02-11-124911_350x517_scrot" src="http://www.foolbirds.com/wp-content/uploads/2009/02/2009-02-11-124911_350x517_scrot.png" alt="2009-02-11-124911_350x517_scrot" width="350" height="517" /> 接下来开始配置上传图片附件, 这个功能是FCKeditor的功能, 所以要在FCKeditor进行配置. 首先编辑web/js/fckeditor/fckconfig.js <code>var _FileBrowserLanguage&nbsp;&nbsp;&nbsp; = 'php' ;&nbsp;&nbsp;&nbsp; // asp | aspx | cfm | lasso | perl | php | py<br />
var _QuickUploadLanguage&nbsp;&nbsp;&nbsp; = 'php' ;&nbsp;&nbsp;&nbsp; // asp | aspx | cfm | lasso | php</code> 然后编辑 web/js/fckeditor/editor/filemanager/connectors/php/config.php <code>$Config['Enabled'] = true;<br />
$Config['UserFilesPath'] = '/uploads/';</code> web/js/fckeditor/editor/filemanager/connectors/php/config.php中还可以配置上传的其他相关参数, 比如文件类型等等. 现在上传功能就设置好了. <code>// app/editor/modules/test/templates/indexSuccess.php<br />
&lt;?php use_helper('Form');?&gt;<br />
&lt;?php echo textarea_tag('name', 'default content', array ('rich'=&gt;'fck','tool'=&gt;'Default','size' =&gt; '30x30')) ?&gt;</code> 访问页面打开插入图片功能, 画面如图. <img class="aligncenter size-full wp-image-453" title="2009-02-11-130238_622x608_scrot" src="http://www.foolbirds.com/wp-content/uploads/2009/02/2009-02-11-130238_622x608_scrot.png" alt="2009-02-11-130238_622x608_scrot" width="622" height="608" />进入上传面板, 画面如图 <img class="aligncenter size-full wp-image-454" title="2009-02-11-130249_627x619_scrot" src="http://www.foolbirds.com/wp-content/uploads/2009/02/2009-02-11-130249_627x619_scrot.png" alt="2009-02-11-130249_627x619_scrot" width="627" height="619" />我们在本地选择图片, 进行上传, 如果使用的是symfony默认的配置, 应该会报错如下. <img class="aligncenter size-full wp-image-455" title="2009-02-11-130954_591x406_scrot" src="http://www.foolbirds.com/wp-content/uploads/2009/02/2009-02-11-130954_591x406_scrot.png" alt="2009-02-11-130954_591x406_scrot" width="591" height="406" /> 错误内容, <span style="color: #ff0000;">Error creating folder &#8220;redirect:/index.php&#8221; (Can&#8217;t create redirect: directory)</span> 经过一番研究, 最终发现这个错误是由apache的mod_rewrite造成的, 最终发现是web/.htaccess中的这一行导致的 <code>RewriteRule ^([^.]+)$ $1.html&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [QSA]</code> 由于本人道行还不够, 最终也没有参透.htaccess中的代码都是什么作用, 但经过测试发现将这行去掉程序是可以正常运行的, 不过既然存在就一定有存在的意义, 所以使用了另一个方法来解决这个问题. 我们在web/uploads目录下再建立一个.htaccess, 内容如下 <code>&lt;IfModule mod_rewrite.c&gt;<br />
&nbsp;&nbsp; RewriteEngine Off<br />
&lt;/IfModule&gt;</code> 这样我们可以正常上传图片了. <img class="aligncenter size-full wp-image-456" title="2009-02-11-125927_617x749_scrot" src="http://www.foolbirds.com/wp-content/uploads/2009/02/2009-02-11-125927_617x749_scrot.png" alt="2009-02-11-125927_617x749_scrot" width="617" height="749" /> <strong>在generator.yml中使用富文本编辑器</strong> 这里看一个例子, 出自《symfony权威指南》 <code>generator:<br />
&nbsp; class: sfPropelAdminGenerator<br />
&nbsp; param:<br />
&nbsp;&nbsp;&nbsp; model_class: Comment<br />
&nbsp;&nbsp;&nbsp; theme: default<br />
&nbsp;&nbsp;&nbsp; edit:<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fields:<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ## 不显示表单控件, 只显示文本<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: {type:plain}<br />
&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; ## 表单控件不可编辑<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; author:&nbsp; {disabled=true}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ## 富文本编辑器 (object_textarea_tag)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content: {type: textarea_tag, params: rich=true css=user.css tinymce_options=width:330}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ## 下拉列表 (object_select_tag)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; article_id: {params: include_custom=Choose an article}</code> <strong>如何在form中使用富文本编辑器</strong>? 《<a href="http://trac.symfony-project.org/wiki/HowToUseFCKeditor">How to use FCKeditor</a>》里提供了一个widget, 我没有用过, 但听同事说可能不好用, 所以自己写了一个. <code>//lib/widget/sfWidgetFormFCK.class.php<br />
&lt;?<br />
class sfWidgetFormFCK extends sfWidgetFormTextarea<br />
{<br />
&nbsp;&nbsp; public function render($name, $value = null, $attributes = array(), $errors = array())<br />
&nbsp;&nbsp; {<br />
&nbsp;&nbsp;&nbsp;&nbsp; sfContext::getInstance()-&gt;getConfiguration()-&gt;loadHelpers('Form');<br />
&nbsp;&nbsp;&nbsp;&nbsp; return textarea_tag($name, $value, array_merge($attributes, array('rich' =&gt; 'fck', 'tool' =&gt; 'Default' )));<br />
&nbsp;&nbsp; }<br />
}</code> <code>//lib/form/ShopForm.class.php<br />
&lt;?php<br />
class ShopForm extends BaseShopForm<br />
{<br />
&nbsp;&nbsp; public function configure()<br />
&nbsp;&nbsp; {<br />
&nbsp;&nbsp;&nbsp;&nbsp; $this-&gt;setWidget('sid', new sfWidgetFormFCK());<br />
&nbsp;&nbsp; }<br />
}</code> 参考: 《<a href="http://mazenod.fr/blog/symfony-tinymce-fckeditor.html">Symfony TinyMCE &amp; FCKeditor</a>》 《<a href="http://trac.symfony-project.org/wiki/HowToUseFCKeditor">How to use FCKeditor</a>》 (本文完)</p>
<ul class="related_post"><li><a href="http://www.foolbirds.com/use_symfony_filter_to_filteredurl.html" title="使用symfony filter 过滤URL">使用symfony filter 过滤URL</a></li><li><a href="http://www.foolbirds.com/%e4%bb%bfsymfony%e6%9c%ba%e5%88%b6%e5%ae%9e%e7%8e%b0%e4%b8%8d%e7%94%a8require%e6%88%96%e8%80%85include%e6%9d%a5%e5%ae%9e%e4%be%8b%e5%8c%96%e7%b1%bb.html" title="仿symfony机制实现不用require或者include来实例化类">仿symfony机制实现不用require或者include来实例化类</a></li><li><a href="http://www.foolbirds.com/use-datetime-in-php5-1-x-with-symfony.html" title="symfony1.4 DateTime对于PHP低版本的兼容问题">symfony1.4 DateTime对于PHP低版本的兼容问题</a></li><li><a href="http://www.foolbirds.com/%e5%a6%82%e4%bd%95%e5%9c%a8fixtures-yml%e5%86%99%e5%be%aa%e7%8e%af%e6%b7%bb%e5%8a%a0%e6%95%b0%e6%8d%ae.html" title="如何在fixtures.yml写循环添加数据">如何在fixtures.yml写循环添加数据</a></li><li><a href="http://www.foolbirds.com/symfony-1-4-database-utf8.html" title="symfony 1.4 数据库 utf8设置">symfony 1.4 数据库 utf8设置</a></li><li><a href="http://www.foolbirds.com/symfony-cheat-sheet.html" title="symfony cheat sheet">symfony cheat sheet</a></li><li><a href="http://www.foolbirds.com/cheat-sheets.html" title="Cheat Sheets!">Cheat Sheets!</a></li><li><a href="http://www.foolbirds.com/image-upload-preview.html" title="兼容IE6,IE7,IE8和Firefox的图片上传预览效果">兼容IE6,IE7,IE8和Firefox的图片上传预览效果</a></li><li><a href="http://www.foolbirds.com/how-to-use-swift-to-send-mail-in-symfon.html" title="如何使用swift发送邮件">如何使用swift发送邮件</a></li><li><a href="http://www.foolbirds.com/batch-in-symfony12.html" title="symfony1.2下的命令行程序(batch)">symfony1.2下的命令行程序(batch)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.foolbirds.com/symfony-fckeditory-and-upload-image.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

