SPAW Editor .NET Edition v.2乱用

        HTML Editor有很多，比如常用的FCKeditor等，这些editor各有优缺点，在真正要用到的时候难免要费功夫比较一下。前一段时间，看见有人推荐SPAW Editor，于是到SourceForge下载了一个试用了一下。这个editor还是挺有特点的，比如可以浮动同时支持多个编辑区域、比较好的文件管理器（上传文件并管理）等。不过，之所以是".NET Edition"是因为这个editor最早是给PHP开发人员使用的，后来才推出的.NET Edition，.NET开发人员很少涉及到该editor，Google上很少能够搜索到该编辑器在.NET环境中使用的信息，更要命的是，该编辑器的帮助、代码注释等文档实在是非常之不完备，用起来很痛苦。开发人员将该款editor开源也着实不容易，而且可能他的主要精力还是集中在PHP那边，没办法，作为.NET开发人员的我只能乱用一下了。

 

 

        1、从SourceForge.net: SPAW Editor - web based WYSIWYG editor下载一个最新版本的SPAW Editor .NET Edition 2.0.7.1，可以直接下载文件spaw-net-2701-gpl.zip，如果希望看到源文件的话，可以下载spaw-net-2701-gpl-src.zip；

 

        2、解压缩spaw-net-2701-gpl.zip，将其中的spaw2目录拷贝到Visual Studio 2005网站根目录，将bin目录下的两个dll文件拷贝到网站的bin目录下（也可以直接添加引用），当然，为了可以从工具箱拖动控件到页面上，可以将Solmetra.Spaw2.dll添加到工具箱中。注意，spaw2目录必须位于网站的根目录，这个在两个dll文件的源文件中是写死的，如果改变该目录的位置，可能出现无法找到该editor所需.config文件（两个.config文件位于spaw2目录下的config目录中）的错误提示。spaw2目录下的demo目录中有两个比较简单的示例可以进行参考；docs目录下有两个比较简略的关于spaw2使用的文档，基本上没有看的必要；

 

        3、SPAW Editor本身是支持多语言的，编辑器本身的简体中文语言文件是zh-gb2312.lang（位于spaw2/plugins/core/lib/lang目录中），但是在使用简体中文语言文件时可能遇到如下问题：1）在何处指定语言文件，应该可以通过配置文件进行解决，但是关于配置选项的说明却少之又少；2）这个简体中文的语言文件并不完全，编辑器界面本身的语言指定尚未完全，更何况独立出来的文件管理器了。至于第一个问题，我们可以直接将简体中文的语言文件重名名为en.lang来解决（当然应该在之前将原来的en.lang文件删除或重命名），English是SPAW Editor的默认语言，这样我们就可以不用关心到底如何进行语言的配置了，当然，如果你的网站是一个需要更改语言设置的国际化站点，请不要这样乱用，呵呵……对于第二个问题，没办法，自己摸索着把缺少的和编辑器本身相关的语言设置补上（下载），再为文件管理器重新创建一个语言文件（下载）吧（同样重名名为en.lang，放在目录spaw2/plugins/spawfm/lib/lang中）；同时，在spaw2.config中也有一些需要汉化的地方（下载）；

 

        4、包含File Manager在内的弹出窗口一般是通过编辑器工具栏按钮调用的，我们可能会发现这些弹出窗口的大小显然是有问题的，检查SPAW的一些.js文件，可以发现这些弹出窗口的大小是统一进行管理的，我们可以对其进行一定的修正，以使得弹出窗口的大小可以恰好和窗口中的内容所占空间匹配：

        在Visual Studio 2005中打开spaw2/dialogs/dialog.aspx文件，在<script>开始结束标签之间增加如下函数：

        function getQueryString(name) 
        {
            var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
            if (reg.test(location.href))
                return unescape(RegExp.$2.replace(/\+/g, " ")); 
        
            return ""; 
        }

        该函数的功能类似于服务器端的Request.QueryString集合，可以通过参数名称获取通过URL传递过来的参数值；

        修改resizeDialogToContent方法为：

        SpawDialog.resizeDialogToContent = function()
        {
            if (window.sizeToContent)
            {
                // gecko
                window.sizeToContent();
            }
            else
            { 
                // resize window so there are no scrollbars visible
                //if (!spawEditor._dialog_chrome_width)
                //{
                    // do these calculations only once for each spaw instance on a page
                    //window.resizeTo(600, 500);
                    //spawEditor._dialog_chrome_width = 600 - document.body.clientWidth;
                    //spawEditor._dialog_chrome_height = 500 - document.body.clientHeight;
                //}
                //window.resizeTo(50, 40);
                //window.resizeTo(document.body.scrollWidth + spawEditor._dialog_chrome_width, 
                //document.body.scrollHeight + spawEditor._dialog_chrome_height);
    
                switch (getQueryString("dialog"))
                {
                    case 'hyperlink':
                        window.resizeTo(395, 308);
                        break;
                    case 'spawfm':
                        window.resizeTo(780, 465);
                        break;
                    case 'image_prop':
                        window.resizeTo(600, 360);
                        break;
                    case 'flash_prop':
                        window.resizeTo(385, 200);
                        break;
                    case 'table_prop':
                        window.resizeTo(400, 310);
                        break;
                    case 'colorpicker':
                        window.resizeTo(410, 455);
                        break;
                }
            }
        }

        上面的switch分支及时根据增加的getQueryString函数获取通过URL传递过来的dialog参数，该参数值代表要打开的浏览器窗口的类型，如hyperlink即是插入超级链接使用的浏览器窗口，通过判断不同窗口类型重新调整打开窗口的大小即可达到与内容大小相匹配的目的；

 

        5、我们在spaw2.config中可以看到关于文件夹管理的一段配置片断：

        <!-- directories -->
        <setting name="PG_SPAWFM_DIRECTORIES" transferMode="Secure">
	        <directory path="%%SPAW_DIR%%uploads/flash/" caption="Flash">
		        <allowedFileTypes>
			        <fileType value="flash" />
        		</allowedFileTypes>
	        </directory>
        	<directory path="%%SPAW_DIR%%uploads/images/" caption="Up. Images">
	        	<allowedFileTypes>
		        	<fileType value="flash" />
        		</allowedFileTypes>
	       </directory>
        	<directory path="~/spaw2/dialogs/img/" caption="Images" defaultDirectory="true">
	        	<allowedFileTypes>
		        	<fileType value="images" />
        		</allowedFileTypes>
	       </directory>
        	<directory path="%%SPAW_DIR%%uploads/files/" caption="Files">
	        	<allowedFileTypes any="true" />
		        <settings allowUpload="true" />
        	</directory>
        </setting>

        可以看出，使用配置文件完全可以完成管理上传文件夹的任务：允许上传何种类型的文件、是否允许上传等等，但是从这个示例中我们只能发现这样一点蛛丝马迹，很多地方却无法看出具体是如何进行配置的。允许的文件类型有flash、images（<allowedFileTypes> <fileType value="images" /> </allowedFileTypes> ）等，这些类型可以在文件spaw2/plugins/spawfm/config/spawfm.config文件中找到，当然可以对该文件进行相应的扩展达到限定特定上传类型文件的目的；如果允许所有类型文件可以使用<allowedFileTypes any="true" />。对于上传文件夹的管理显然不仅限于这些，例如文件夹中是否可以新增、删除、重命名子文件夹等等，这些应当也是可以通过配置文件进行设置的，可惜的是由于文档不完全，我们只能在.cs文件中进行相关的设置，看下面的代码：

        protected void Page_Load(object sender, EventArgs e)
        {
            //spawMain为页面上的SPAW Editor控件名称
              Solmetra.Spaw2.SpawFM.SpawFMConfiguration sfmc = 
                Solmetra.Spaw2.SpawFM.SpawFMConfiguration.GetFileManagerConfiguration(this.spawMain);
 
            if (sfmc.Directories.IndexOf(Solmetra.Spaw2.Configuration.SpawDirectory + "uploads/images/") > -1)
            {
                Solmetra.Spaw2.SpawFM.Directory dirImages = 
                    sfmc.Directories[sfmc.Directories.IndexOf(Solmetra.Spaw2.Configuration.SpawDirectory + "uploads/images/")];
                dirImages.Settings.AllowCreateSubdirectories = true;
                dirImages.Settings.AllowModifySubdirectories = true;
                dirImages.Settings.Recursive = true;
                dirImages.Settings.AllowModify = true;
                dirImages.Settings.AllowUpload = true;

                Solmetra.Spaw2.SpawFM.Directory dirFlash =
                    sfmc.Directories[sfmc.Directories.IndexOf(Solmetra.Spaw2.Configuration.SpawDirectory + "uploads/flash/")];
                dirFlash.Settings.AllowModifySubdirectories = true;
                dirFlash.Settings.AllowCreateSubdirectories = true;
                dirFlash.Settings.Recursive = true;
                dirFlash.Settings.AllowModify = true;
                dirFlash.Settings.AllowUpload = true;
 
                Solmetra.Spaw2.SpawFM.Directory dirOther =
                    sfmc.Directories[sfmc.Directories.IndexOf(Solmetra.Spaw2.Configuration.SpawDirectory + "uploads/other/")];
                dirOther.Settings.AllowModifySubdirectories = true;
                dirOther.Settings.AllowCreateSubdirectories = true;
                dirOther.Settings.Recursive = true;
                dirOther.Settings.AllowModify = true;
                dirOther.Settings.AllowUpload = true;

                sfmc.Directories.Clear();
                sfmc.Directories.Add(dirImages);
                sfmc.Directories.Add(dirFlash);
                sfmc.Directories.Add(dirOther);
                sfmc.Apply();
            }
        }

        代码注释不完备，我们只能从字面意义上来理解该控件属性、方法等的含义，但是基本上我们还是可以达到有效管理上传目录及文件的功能，需要注意一点的是上述C#代码中出现的文件夹必须在spaw2.config中的<!-- directories -->部分定义过；

 

        6、在服务器端代码中，我们可以使用SPAW Editor控件的Text属性获取该控件中正在编辑的HTML源代码片段；有时，我们希望在浏览器端Javascript代码中完成这个操作，此时，我们可以使用spawMain_obj.getPageHtml(spawMain_page)来获取，其中spawMain为服务器控件SPAW Editor设置的name属性值。

 

        好了，到这里至少这个控件已经可以凑合用了，尽管有一些乱用，还是应该期待SPAW Editor自己提供一份完备的文档，呵呵……