2009-01-15

在symfony项目中应用TinyMCE(续)

类归于: symfony — 标签:, zhuozi @ 09:25

通过上一篇《在symfony项目中应用TinyMCE》文章,我们知道了,如何在symfony配置TinyMCE,如何在模板中应用TinyMCE,
可是,如果我们想在apps/backend中应用应该如何办呢?
通过在google的搜索,有两个方法。
1、配置genertor.yml文件,和config下面的app.yml、setting.yml文件,在网上一搜可以搜索到很多,可是,昨天试了一上午
也没有测试出来,这里就不讲了,主要说一下第二种方法。
2、定义form
我们在lib下面新建一个sfWidgetFormTextareaTinyMCE.class.php文件

<?php
/*
* This file is part of the symfony package.
* (c) Fabien Potencier <fabien.potencier@symfony-project.com>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/

/**
* sfWidgetFormTextareaTinyMCE represents a Tiny MCE widget.
*
* You must include the Tiny MCE JavaScript file by yourself.
*
* @package    symfony
* @subpackage widget
* @author     Fabien Potencier <fabien.potencier@symfony-project.com>
* @version    SVN: $Id: sfWidgetFormTextareaTinyMCE.class.php 11894
2008-10-01 16:36:53Z fabien $
*/
class sfWidgetFormTextareaTinyMCE extends sfWidgetFormTextarea
{
/**
* Constructor.
*
* Available options:
*
*  * theme:  The Tiny MCE theme
*  * width:  Width
*  * height: Height
*  * config: The javascript configuration
*
* @param array $options     An array of options
* @param array $attributes  An array of default HTML attributes
*
* @see sfWidgetForm
*/
protected function configure($options = array(), $attributes = array())
{
$this->addOption('theme', 'advanced');
$this->addOption('width');
$this->addOption('height');
$this->addOption('config', '');
}

/**
* @param  string $name        The element name
* @param  string $value       The value selected in this
widget
* @param  array  $attributes  An array of HTML attributes to
be merged with the default HTML attributes
* @param  array  $errors      An array of errors for the
field
*
* @return string An HTML tag string
*
* @see sfWidgetForm
*/
public function render($name, $value = null, $attributes = array(),
$errors = array())
{
$textarea = parent::render($name, $value, $attributes, $errors);

$js = sprintf(<<<EOF
<script type="text/javascript">
tinyMCE.init({
mode:                              "exact",
elements: "%s",
theme:                             "%s",
%s
%s
theme_advanced_toolbar_location:   "top",
theme_advanced_toolbar_align:      "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing:           true
%s
});
</script>
EOF
,
$this->generateId($name),
$this->getOption('theme'),
$this->getOption('width')  ? sprintf('width:
"%spx",', $this->getOption('width')) : '',
$this->getOption('height') ? sprintf('height:
"%spx",', $this->getOption('height')) : '',
$this->getOption('config') ?
",\n".$this->getOption('config') : ''
);

return $textarea.$js;
}
}

接下来我们需要重新定义lib/form下我们需要的form(e.g. 我们定义的description字段)

public function configure()
{
$this->widgetSchema['description'] = new sfWidgetFormTextareaTinyMCE(array(
'width'  => 450,
'height' => 350,
'config' => 'theme_advanced_disable: "anchor,image,cleanup,help"',
));
}

最后大家别忘记在layout.php 中定义js的路径

javascripts:    [js/tiny_mce.js]

2009-01-08

在symfony项目中应用TinyMCE

类归于: symfony — 标签:, zhuozi @ 15:30

文章参考自Add TinyMCE to a Symfony project,为了使用方便,简单翻译成了中文,英文不好,凑合看吧,其实不看也行,粘贴代码复制就行。
这个方法在Ubuntu下测试成功。

TinyMCE是所见即所得的html编辑器(还可以叫做rich text 富文本),它可以很好的于Symfony整合在一起。然而,如果你想使用它,你需要下载第三方的源码包。这篇文章可以帮助你解决这个问题。

注意:你需要安装解压缩工具,如果你使用的是Debian和Ubuntu,你可以用apt-get的方法进行安装

/usr/bin/sudo /usr/bin/apt-get install unzip

安装TinyMCE

首先,在你项目的目录下进行配置

PROJECT_HOME=/home/sfprojects/myProject

选择你想使用的app入口(有些地方我就简写了,如果接触过symfony,我想你会明白的)

PROJECT_APP=frontend

设置你想要使用的版本

TINYMCE_VERSION=3.0.5

我们移出TinyMCE版本中的点

TINYMCE_CLEANED_VERSION=`echo $TINYMCE_VERSION | sed -e ’s/\./_/g’`

我们下载TinyMCE的源码包

/usr/bin/wget http://ovh.dl.sourceforge.net/sourceforge/tinymce/tinymce_$TINYMCE_CLEANED_VERSION.zip \
–output-document=/tmp/tinymce_$TINYMCE_VERSION.zip

解压已经下载完的文件

/usr/bin/unzip -o /tmp/tinymce_$TINYMCE_VERSION.zip -d /tmp

如果你愿意,你也可以下载多语言包

/usr/bin/wget http://services.moxiecode.com/i18n/download.aspx?format=zip\&product=tinymce \
–output-document=/tmp/tinymce_language_pack.zip

解压多语言包

/usr/bin/unzip -o /tmp/tinymce_language_pack.zip -d /tmp/tinymce/jscripts/tiny_mce

And move the TinyMCE source folder to the target emplacement in your Symfony project :
把TinyMCE源码文件复制到你的symfony项目中 ($PROJECT_HOME 替换你的目录)

/bin/cp -r /tmp/tinymce/jscripts/tiny_mce/ “$PROJECT_HOME/web/js/”

现在,我们开始配置symfony以便可以使用TinyMCE ($PROJECT_HOME 替换你的目录,$PROJECT_APP替换你的app)

/bin/sed -i -e ‘/^ .settings:/a\
rich_text_js_dir: js/tiny_mce’ “$PROJECT_HOME/apps/$PROJECT_APP/config/settings.yml”

警告:查看你的setting.yml文件以确保一切正常

/usr/bin/vim “$PROJECT_HOME/apps/$PROJECT_APP/config/settings.yml”

你现在可以删除下载的那些文件了

/bin/rm -r /tmp/tinymce
/bin/rm /tmp/tinymce_language_pack.zip
/bin/rm /tmp/tinymce_$TINYMCE_VERSION.zip

你现在可以使用下面的代码来使用TinyMCE了

<?php echo textarea_tag('name', 'default content', 'rich=true size=10x20') ?>
<?php echo textarea_tag('name', 'default content', array(
'rich' => true,
'size' => '10x20',
'tinymce_options' => 'language:"fr",theme_advanced_buttons2:"separator"',
)) ?>

第一个参数, 是name 用于在表单提交
第二个参数, 是内容
第三个参数, 是一个数组,里面包含了多种信息,可以对TinyMCE进行详细的配置
size 大小
language 语言
theme_advanced_buttons2:”separator” 代表不显示第二行工具条
如果你想第2行只显示几个按钮,你可以这样做theme_advanced_buttons2:”加粗,斜体”
(当然你要用它本身定义好的英文名字的功能)
PS:上面直接复制的代码,如果出现错误,打开原始那个英文的连接,复制,出现错误的原因是blog编辑器自动隐藏了部分空格

WordPress 所驱动