为CMS系统制作模板插件
CMS系统的在线模板编辑功能很弱，处理不好还会过滤掉有用的代码。一般来说，很少有人使用在线的模板编辑器，而是使用dreamweaver将模板做好，再将模板文件传到系统上去，或者是将源代码粘贴到模板编辑器中。在模板的可编辑区中，需要插入CMS系统相应的标记代码，便于系统识别执行。每个产品定义的标记方式不尽相同。
Velocity模板引擎中，可以定义为${getTag-123}，这个就是标记。数字123是可编辑单元的编号，由CMS系统自动生成。在模板中经常要插入这样的标记，总是记不住怎么写这个标记，复制粘贴太不方便。在DREAMWEAVER中做个插件，输入编号插入上面的标记岂不方便。
可以参考dreamweaver自带的插件作为模板。
１、需要制作一个.mxi的xml类型文件。
<macromedia-extension
name="Velocity模板插件"
version="1.0"
type="object">
<author name="李悦" />
<products>
<product name="Dreamweaver" version="6" primary="true" />
</products>
<description>
<![CDATA[
Velocity模板插件，用于在模板中插入标记！
]]>
</description>
<ui-access>
<![CDATA[
作者主页：http://www.liyue.org
]]>
</ui-access>
<license-agreement>
<![CDATA[
]]>
</license-agreement>
<files>
<file source="cms\gettagname.htm" destination="$dreamweaver/Configuration/Objects/cms" />
<file source="cms\gettagname.js" destination="$dreamweaver/Configuration/Objects/cms" />
<file source="cms\note.png" destination="$dreamweaver/Configuration/Objects/cms" />
<file source="cms\getnowurl.htm" destination="$dreamweaver/Configuration/Objects/cms" />
<file source="cms\nowurl.png" destination="$dreamweaver/Configuration/Objects/cms" />
</files>
<configuration-changes>
<menu-insert insertAfter="DWMenu_Insert_Head" skipSeparator="true">
<menuitem id="pscms" name="Velocity模板插件" />
<separator id="pscms_Separator" />
</menu-insert>
<insertbar-changes>
<insertbar-insert>
<category folder="cms" id="DW_Inserbar_pscms" name="Velocity模板插件">
<button file="cms\gettagname.htm" id="Velocity模板插件_标记数字编号" image="cms\note.png" name="标记数字编号" />
<button file="cms\getnowurl.htm" id="Velocity模板插件_当前位置" image="cms\nowurl.png" name="当前位置" />
</category>
</insertbar-insert>
</insertbar-changes>
</configuration-changes>
</macromedia-extension>
２、按上面文件描述这个插件有两个按钮，标记数字编号和当前位置。下面就制作这两个按钮的执行文件。
（１）gettagname.htm:
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog">
<html>
<head>
<!-- Copyright 2001 Macromedia, Inc. All rights reserved. -->
<title><MMString:LoadString id="insertbar/pscmsunitname" /></title>
<script language="javascript" src=\'#\'" /script>
<link href="../../fields.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="initUI();">
<form name="theform">
<table border=0>
<tr>
<td NOWRAP>标记数字编号:
<input name="anchorname" type="text" class="medTField"></td>
</tr>
</table>
</form>
</body>
</html>
（２）这个gettagname.htm调用了一个js脚本文件gettagname.js来处理用户的输入：
// Copyright 2001, 2002, 2003 Macromedia, Inc. All rights reserved
//--------------- GLOBAL VARIABLES ---------------
var helpDoc = MM.HELP_objAnchor;
//--------------- LOCAL FUNCTIONS ---------------
function initUI() {
var curDOM = dw.getDocumentDOM('document');
if (curDOM && (curDOM.getSelectedNode().nodeType == Node.TEXT_NODE)) {
var curSel = dw.getSelection();
document.theform.anchorname.value = curDOM.documentElement.outerHTML.slice(curSel[0],curSel[1]);
}
document.theform.anchorname.focus();
}
function errorCheck()
{
var theString = document.forms[0].anchorname.value;
if (theString.search(/\W/) != -1)
{
alert(MM.MSG_InvalidName);
document.forms[0].anchorname.value = theString.replace(/\W/g,"")
}
}
//--------------- API FUNCTIONS ---------------
function isDOMRequired() {
// Return false, indicating that this object is available in code view.
return false;
}
function objectTag() {
// Return the html tag that should be inserted
errorCheck()
if (dw.getFocus(true) == 'html' || dw.getFocus() == 'textView')
return '${getTag-' + document.forms[0].anchorname.value +'}';
else
return '${getTag-' + document.forms[0].anchorname.value +'}';
}
（３）第二个按钮就是直接插入${channel.channelpath}
<!-- MENU-LOCATION=NONE -->
<html>
<head>
<!-- Copyright 2000, 2001, 2002 Macromedia, Inc. All rights reserved. -->
<title><MMString:LoadString id="insertbar/nowurlunit" /></title>
<script language="javascript">
//--------------- API FUNCTIONS ---------------
function isDOMRequired() {
// Return false, indicating that this object is available in code view.
return false;
}
function objectTag() {
// Return the html tag that should be inserted
return "${channel.channelpath}";
}
</script>
</head>
<body>
</body>
</html>
３、将两个htm文件、js文件和两个按钮的图标文件放到一个文件夹下。将他们打包成插件文件.mxp。打开Macromedia Extension Manager，执行“将扩展打包”命令，选择mxi文件进行打包，打包后的文件类型为.mxp。双击mxp文件，安装扩展插件。
安装完毕后，在dreamweaver插入面板中，多了一个选项“Velocity模板插件”。点击两个图标按钮，就可以在光标处插入标记代码了。
