为CMS系统制作dreamweaver模板插件
CMS系统的在线模板编辑功能很弱，处理不好还会过滤掉有用的代码。一般来说，很少有人使用在线的模板编辑器，而是使用dreamweaver将模板做好，再将模板文件传到系统上去，或者是将源代码粘贴到模板编辑器中。在模板的可编辑区中，需要插入CMS系统相应的标记代码，便于系统识别执行。每个产品定义的标记方式不尽相同。 Velocity模板引擎中，可以定义为${getTag-123}，这个就是标记。数字123是可编辑单元的编号，由CMS系统自动生成。在模板中经常要插入这样的标记，总是记不住怎么写这个标记，复制粘贴太不方便。在DREAMWEAVER中做个插件，输入编号插入上面的标记岂不方便。
可以参考dreamweaver自带的插件作为模板。
１、需要制作一个.mxi的xml类型文件。
version="1.0"
type="object">
Velocity模板插件，用于在模板中插入标记！
]]>
作者主页：http://www.liyue.org
]]>
]]>
２、按上面文件描述这个插件有两个按钮，标记数字编号和当前位置。下面就制作这两个按钮的执行文件。
（１）gettagname.htm:
（２）这个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}
３、将两个htm文件、js文件和两个按钮的图标文件放到一个文件夹下。将他们打包成插件文件.mxp。打开Macromedia Extension Manager，执行”将扩展打包”命令，选择mxi文件进行打包，打包后的文件类型为.mxp。双击mxp文件，安装扩展插件。
null
安装完毕后，在dreamweaver插入面板中，多了一个选项”Velocity模板插件”。点击两个图标按钮，就可以在光标处插入标记代码了。
最新评论