Adobe Illustrator CEP插件开发系列（3）——插件文件结构说明

前情提要

本文主要涉及CEP扩展文件夹的结构，以及文件详细说明。

文件结构树

我在第一章就提过CEP扩展文件的结构，不是固定的，但是有必须的部分。在官网中提供的样例结构如下：

其实是一种不错的文件结构，很清晰。分为三部分，CSXS、client和host。

1. CSXS是核心部分，里面的manifest.xml是整个CEP扩展的配置文件⭐️。
2. client文件夹放的是扩展的界面处理部分，包括整个前端相关的文件：html、css、js。由CEP的js虚拟机解析。
3. host文件夹放置要引用的.jsx文件，可以有多个jsx文件。jsx文件是由ExtendScript引擎（另一个虚拟机）进行解析，涉及Adobe的操作。

本文提供另一种常用结构，也是Brackets默认创建的文件结构，如下：

|–/CSXS
   └manifest.xml
|–/js
   └index.js
   └…
|–/jsx
   └host.jsx
   └…
|–/css
   └style.css
   └…
|–index.html
|–.debug

具体文件夹的功能即作用前面已经讲过，就不赘述了。下面主要讲manifest.xml文件的写法。

manifest.xml写法

下面给一个manifest.xml的基本样例：

	
		
	
	
		
            
            
            
            
            
             
		
		
			
		
		
			
		
	
	
		
			
				
				./index.html
                
                    --enable-nodejs
                
				./jsx/hostscript.jsx
				
				
					true
				
				
					Panel
					liyucep
					
						
							300
							300
						
                        
                            200
                            200
                        
                        
                            400
                            400
                                   
					
					
						./icons/google-maps.png
						./icons/google-maps.png
						./icons/google-maps.png
						./icons/google-maps.png
						./icons/google-maps.png
										
				
			
		
	

解释：

1. 标签有几个属性比较关键，一是Version和中的Version要保持一致，如果不一致，Illustrator是无法加载出该扩展的。这个Version指CSXS的版本。二是ExtensionBundleId指扩展的应用ID，即扩展的根文件夹名。其余几个属性应该好理解。
2. 一个扩展应用可以同时具备几个扩展，在标签中列出。每个扩展写在一个内，id属性是独立扩展的ID，与上面的应用ID有所差别，id和Version可以自定。
3. 标签内包含适配的Adobe应用，每个包含应用的缩写Name和Version（适配的版本），可以是一个版本，如15.0，也可以是一个范围如[15.0,19.0]，如果想适配最高版本的应用，可以直接把上限设置为99.9。允许的语言环境，默认Code属性是"All"。需要的运行时环境，Name=“CSXS”，版本如1所述。
4. 里的要和上述的内的扩展要一一对应，主要是Id属性不能写错，不然无法匹配。
5. 内包括和两个关键标签，前者写扩展界面html的文件路径，后者写扩展引用的jsx路径，这里只能写一个。如果要写多个，需要在程序中引用多个。这里要注意CSXS6.1版本之后引用Node.js要在这里面加一个标签，然后带一行–enable-nodejs，6.1版本之前默认是自带的。
6. 生命周期，这里有和两种模式，前者是打开Illustrator就自动可见，后者是需要手动打开才可见。
7. 内部写界面的组分。有六种类型：Panel、ModalDialog、Modeless、Common、Embedded和Dashboard。不同类型在Illustrator中的形式会有差异，可以自己探索。内的名称就是应用中看到的扩展名。里放置要在Illustrator中侧边栏显示的图标的路径。包含、和分别指尺寸、最大尺寸和最小尺寸。

*.jsx文件写法

jsx是支持ExtendScript语法的js版本，可以使用操作Illustrator的各种类。参考《ADOBE ILLUSTRATOR CC 2017 SCRIPTING REFERENCE:JAVASCRIPT》文献，里面有详细的关于Illustrator操作相关类和方法定义，如图。

另外，《JavaScript Tools Guide CC》中详细讲述了一些通用类和方法，如文件操作等。
下面展示在.jsx文件中书写基础的文件读写操作：

读文件

var file = new File ("/c/Users/Hougiser/Desktop/test/1.txt")//绝对路径，写法与一般的路径不同
//文件读
if(file.exists){
    if(file.open("r")){
        var a = file.read();
        alert(a);
        file.close();
    }
}

写文件

var file = new File ("/c/Users/Hougiser/Desktop/test/1.txt")//绝对路径，写法与一般的路径不同
//文件写
if(file.exists){
    if(file.open("a")){
        file.write("yutou","\n");
        file.close();
    }
}

第一章讲过jsx文件的调试工具，Adobe Extendscript Toolkit CC，我们可以把jsx文件放在该工具中进行调试，如图

该工具会自动检测系统中以安装的Adobe应用，选择一个应用，需要在打开应用的情况下进行调试。

参考资料

Adobe Illustrator CC 2017 Scripting Guide
Adobe Illustrator CC 2017 Reference: JavaScript
JavaScript Tools Guide CC
Start Sample in Github
不知语冰教程