为CMS系统制作模板插件

原创

phpor 2010-08-27 14:20:33 博主文章分类：cms ©著作权

文章标签 职场休闲 cms dreamweaver插件 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者phpor的原创作品，请联系作者获取转载授权，否则将追究法律责任

　CMS系统的在线模板编辑功能很弱，处理不好还会过滤掉有用的代码。一般来说，很少有人使用在线的模板编辑器，而是使用dreamweaver将模板做好，再将模板文件传到系统上去，或者是将源代码粘贴到模板编辑器中。在模板的可编辑区中，需要插入CMS系统相应的标记代码，便于系统识别执行。每个产品定义的标记方式不尽相同。

　　Velocity模板引擎中，可以定义为${getTag-123}，这个就是标记。数字123是可编辑单元的编号，由CMS系统自动生成。在模板中经常要插入这样的标记，总是记不住怎么写这个标记，复制粘贴太不方便。在DREAMWEAVER中做个插件，输入编号插入上面的标记岂不方便。

　　可以参考dreamweaver自带的插件作为模板。
　　１、需要制作一个.mxi的xml类型文件。

<macromedia-extension
name="Velocity模板插件"
version="1.0"
type="object">

<ui-access>
<![CDATA[
作者主页：http://www.liyue.org
]]>
</ui-access>

<license-agreement>
<![CDATA[

]]>
</license-agreement>

</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模板插件_标记数字编号" p_w_picpath="cms\note.png" name="标记数字编号" />
     <button file="cms\getnowurl.htm" id="Velocity模板插件_当前位置" p_w_picpath="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>

<title><MMString:LoadString id="insertbar/pscmsunitname" /></title>

<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来处理用户的输入：

//--------------- 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}

<html>
<head>

<title><MMString:LoadString id="insertbar/nowurlunit" /></title>

//--------------- 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>

</html>

３、将两个htm文件、js文件和两个按钮的图标文件放到一个文件夹下。将他们打包成插件文件.mxp。打开Macromedia Extension Manager，执行“将扩展打包”命令，选择mxi文件进行打包，打包后的文件类型为.mxp。双击mxp文件，安装扩展插件。

为CMS系统制作模板插件_cms