FCKeditor的模板设置

Templates 模板

译者附注:本章所讲的模板 在fck 完整的示例中 即_samples/default.html 文件中的编辑器的工具条 第一行的第六个按钮,如果不在这个位置,可以在附近根据气泡提示找找,在dedecms中把这个按钮也去掉了,因为不是很常用,这个模板按钮点开后,有个类似于对话框的东东,里面列举了一些模板,这些都是已经编辑好的html 代码,点击其中一个,就可以在编辑器中显示出来。

Templates Configuration 模板的配置

With FCKeditor, the end user can select a template from a list by clicking in the "Templates" icon in the toolbar. A template is a piece of HTML that is placed inside the editor, in this way the user doesn't need to start writing it from scratch, but a designer can prepare well designed templates, avoiding user errors before they happen.使用FCKeditor ,终端用户可以通过点击工具条上的"模板" 图标按钮 选择一个列举的模板。一个模板就是一段预先定义好的 可以直接写入编辑器的 html 代码。这样通过设计好的模板,用户就不用自己设计文章的排版了,很方便快捷。

The editor comes with three sample templates that are used just to show the way it works. It is quite easy to configure and customize it to use your templates. You just need to edit the "fcktemplates.xml" file. Even better, you can create a separated template file (XML file) outside the editor's directory and just configure the editor to use it. 在编辑器中默认设置了三个示例模板,这几个模板只是用来显示他们是如何工作的。你可以很轻松的配置和定义你自己的模板。在FCKeditor的安装目录下有个默认的模板文件 "fcktemplates.xml"  。你可以修改该文件来创建自己的模板,或者,你可以在编辑器安装目录外新建一个模板文件(xml 文件),然后在配置文件中指定你的模板文件的路径即可。

Pointing the editor to your Templates Definitions file 指定你自定义的模板文件的位置

Lets assume you have created a custom Templates Definitions file named "mytemplates.xml" and have placed it in the document root of your web site. Now, just set the following configuration in the fckconfig.js file or in your own Configuration File:  假设你已经创建了一个名为 "mytemplates.xml"的模板文件,并且将它放置到了你网站的根目录下。现在,你只需在fckconfig.js配置文件中或你自己的配置文件中设置如下的配置选项:

FCKConfig.TemplatesXmlPath = '/mytemplates.xml' ;
The Templates Definitions XML file     xml 模板文件的定义

This is a sample XML that defines two simple templates:  下面是个XML示例,其中定义了两个简单的模板:

<?xml version="1.0" encoding="utf-8" ?>
<Templates imagesBasePath="/images/templates/">
  <Template title="My Template 1" image="template1.gif">
    <Description>Description of my template 1.</Description>
    <Html>
      <![CDATA[
        <b>Template 1 HTML</b>
      ]]>
    </Html>
  </Template>
  <Template title="My Template 2">
    <Html>
      <![CDATA[
        <b>Template 2 HTML</b>
      ]]>
    </Html>
  </Template>
</Templates>

All you have here is a root <Templates> element with many <Template> elements inside it.   在这个模板文件中,其实就是一个 <Templates> 根节点 ,在该根节点中又包含了 许多的 <Template> 节点。

Let's analyze each element:  让我们分析下其中的每个节点元素

      ●  <Templates>: it is the root element of our XML document. It has the following attributes: <Templates>:这是XML文档的根节点,他有下面的属性:

          ●  imagesBasePath: (optional) sets the base path used to build the full path of the preview images. If not set, it means that each template defines the full path of the image, or no images will be used for preview.
imagesBasePath: (可选)此属性设置要在模板列表对话框中用于演示的图片的基路径(该路径加上后面设置的图片名就可以得到图片的完整路径了)。如果没有设置,意味着后面的每个模板节点的图片属性都要给出完整的路径。或者是模板不需要显示演示图片。(如果你对"演示图片"的概念不是很清楚,你可以点击 编辑器工具条上的 "模板"按钮,在弹出的对话框中,可以看到定义的模板,其中在每个模板的左侧一般都有个演示图片,这个图片就可以直观的告诉用户该模板是怎样的排版。)

     ●  <Template>: defines a single template. It has the following attributes: <Template>: 定义一个模板。他有如下的两个属性:

         ● title: (optional) defines the title to show in the templates list. If not set, a default template name will be built using the word "Template" followed by the ordinal position of the template in the list (ex: "Template 5"). Of course, "Template 5" doesn't make much sense and could confuse the user, so it is recommended to set an intuitive name for new templates. title: (可选)用于定义在弹出的模板列表对话框中,该模板对应的标题。如果没有设置,那么就会采用默认标题"Template" 再加上该模板在列表中的位置(例如:"Template 5")。当然,"Template 5"之类的模板名字没什么意义,可能还会让用户感到困惑,所以最好还是自己设置一个直观的标题。

        ● image: (optional) defines the name of the image file to show as the preview of the template. It will be concatenated with the "imagesBasePath" attribute value of the root "Templates" element (if set). If the image attribute is not set, no preview will be shown. There is no fixed size for the image file.  image: (可选)用于定义模板列表对话框中该模板 对应的演示图片 的名称或路径。如果前面的<Templates>节点设置了imagesBasePath属性,那么这里的image属性就只需定义图片名,编辑器会用这个图片名加上imagesBasePath指定的基路径,从而得到该图片的完整路径,否则就要在image属性里定义完整的路径。

       ● <Description>:(optional) defines the textual description of the template. This description is shown in the templates list. No attributes are available for it and is enclosed contents are used as its value. It must be placed inside a <Template> element.  <Description>(可选)用于定义模板的描述性文本内容。在模板列表对话框中 每个模板除了左边的演示图片,以及右上方的粗体显示的模板标题外,在标题的下方的内容就是对模板的描述信息。该标签没有属性,并且必须位于<Template> 标签中。

      ● <Html>: defines the HTML to be set in the editor when the user selects a template. No attributes are available for it and its enclosed contents are used as its value, but we have to create a well formed XML file, so the HTML must be placed inside a CDATA section; in this way the HTML tags are not parsed as XML elements of our template file. A CDATA section starts with "<![CDATA[" and ends with "]]>".  <Html>:用于定义该模板要在编辑器中设置的HTML代码。该标签没有属性,所有的HTML代码都必须包含在 <![CDATA[ 和 ]]> 之间,这样,HTML代码里的标签才不会破坏XML文档里的标签。

To be sure you have produced a valid template file, just open it with Internet Explorer. It will be shown correctly if the XML is well formed and valid, otherwise IE will point out the errors.  在完成XML 模板文件后,如果要验证该XML文档是否有效,可以使用IE浏览器打开它,如果该XML文件格式正确有效,那么浏览器就会正确显示出来,否则IE 就会指出其中的错误。

posted @ 2010-09-04 07:20  夜壶  阅读(1163)  评论(0编辑  收藏  举报