【Joomla】TinyMCE - Add custom styles

前言

使用 TinyMCE 编写文章时经常需要定义很多样式，如果每次都手工编辑的话，一方面工作量大，另一方面也容易造成格式的不统一。好在 TinyMCE 提供了添加自定义样式的功能，不过使用起来却不那么简单。

 

方法

  1. Joomla Administration -> Extensions -> Plug-in Manager -> Editor - TinyMCE -> Basic Options -> 设置 Custom CSS classes 为 editor.css
  2. 复制 /templates/system/css/editor.css 到 /templates/[your template]/css。
  3. 根据需要在 /templates/[your template]/css/editor.css 中添加样式。
  4. 此时在 TinyMCE 的 Styles 菜单中可以看到自定义的样式，应用并保存后也能看到效果，但是在前台网站上却看不到效果。
  5. editor.css 不仅要在后台添加，在前台也要添加。打开 /templates/[your template]/index.php，添加如下红色代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>" >
    <head>
	
        <?php
            $gantry->displayHead();
            $gantry->addStyles(array(
				'template.css',
				'editor.css',
				'tooltips.css',
				'prettyPhoto.css',
				'framework-reset.css',
				'http://fonts.googleapis.com/css?family=Open+Sans'
			));
			
			$gantry->addScript(array(
				'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
			)); ?>

     

 

 

posted on 2013-06-05 15:47  CsharpStyle  阅读(703)  评论(0)  编辑  收藏  举报