Adobe Illustrator CEP插件开发系列（1）——开发环境配置

背景

由于项目需求，需要开发Adobe Illustrator的有关功能插件。最初查找到的解决方案是Adobe提供的SDK进行C++开发，SDK的官方文档提供了四部分pdf，如下：

1. getting-started-guide.pdf
2. porting-guide.pdf
3. programmers-guide.pdf
4. using-adobe-text-engine.pdf

入门一般是从getting-started-guide.pdf开始看，里面涉及了开发环境搭建、调试等基本问题。我是在win10+vs2013/2015+sdk cc/cc 2014/cc 2015/cc2017的测试环境下，出现了以下问题：

1. samplecode/Templates创建项目失败
2. 无法正常调试
3. 所有带windows默认窗体的插件都无法显示窗体
4. 中文文档太少，据我所知只在CSDN中发现一个人写了Adobe SDK的文章系列，这里引用一篇他的相关文章链接
5. c++开发难度太大

基于此，我几乎放弃了这种开发手段。? What a lucky dog?!今天又发现了一种adobe插件开发方式 => CEP

注明：本文的内容学习和参考了“不知语冰”开发者的博文系列，链接于此https://www.jianshu.com/p/48b48c9f0b0a。本开发系列重点会涉及一些自己遇到的问题和解决方案，第一章仅讲涉及环境配置的注意事项。由于AI插件开发是比较冷门的一个技术，所以感觉这系列教程不会有太多人关注，手动狗头?。

CEP简介

这是Adobe CEP的官方主页的图片，可以赫然看到一行醒目的标语：不需要C++，用HTML、CSS和JS来扩展Adobe应用。这特么不就是对Adobe SDK赤裸裸的嘲笑么?
关于CEP（Common Extensibility Platform：通用扩展平台），扩展是 Adobe 各种软件扩展的通用开发标准，现在常见的 Adobe应用如Photoshop和Illustrator扩展都是 CEP 扩展，这也是 Adobe 推荐的开发方式。SDK也许由于开发难度的问题用的人少之又少。其实对比一下可以发现，SDK编译得到的是.aip文件，作为plug-in插件放入adobe Plug-in文件夹进行使用，基于C++开发；而CEP插件是一个签名好的文件夹，放在CEP/extensions文件夹下，虽然需要签名，但其实很简单。最重要的是CEP是基于前端三种基本开发语言来写界面，十分方便，而且Adobe相关操作都封装成js对象，属性明确，调用简单，开发难度要小很多。
因此，使用CEP来开发Adobe Illustrator插件是首选。

开发环境

前面说到CEP扩展是一个文件夹，该文件夹的结构可以依开发者而定，比较常规的结构如下：

其中最重要的文件夹是CSXS，该文件夹下放了一个名为mainfest.xml的文件，该文件是扩展的配置文件，涉及界面入口、引用的jsx路径、界面宽高、名称、应用ID、扩展ID、CSXS版本、适用的Adobe应用范围及版本等关键属性。
手工创建和编写这个文件结构当然也可以，但是有点麻烦。因此推荐使用Adobe Brackets这一免费开源的编辑器，该平台提供了一个Adobe CC Extension Builder 1.0.0的插件，下面介绍如何安装该插件。

Adobe CC Extension Builder 1.0.0

首先下载Brackets并安装，安装完后有两种方法可以装插件。
方法一：
在Brackets官网的插件页面，找到Adobe CC Extension Builder 1.0.0插件，点击，下载zip压缩包。
点击Brackets中file>Extension Manager，打开界面，如图

将下载好的zip拖入左下角，自动安装完成。
方法二：
直接在该页面的Available中，在右上角查找该插件，然后点击安装。
该网有时不太好，所以在软件内加载可能会挺慢。
如果无法下载该插件，可以到其Github主页，下载zip。

其他可选插件

另外推荐一些有助于编辑的插件：

1. HTML Skeleton
2. Brackets Icons
3. Brackets Vue
4. Vue Snippets

Adobe Illustrator CC 2014-2018

你还需要安装Adobe的应用，不然怎么测试插件?网上有很多破解版本的Illustrator，本文就不给下载链接了。本系列教程的开发环境是win10+Illustrator cc 2017+CEP 7。你可以选择自己的版本，不同版本文献和引用的js有些许差异。这主要和CEP扩展的版本有关，对应的版本如下：

Google Chrome

谷歌浏览器是调试需要的平台，因此下载一个相对高版本的Chrome吧，调试部分将在下一个章节讲述。

Topcoat Desktop Dark

如果想CEP扩展的界面样式和Adobe一致，这里推荐一个Topcoat样式库。这是一个和Adobe应用风格样式一致的样式库，可以从官网下载这个样式的css文件，进行引用。可以选择Dark或者Light两种桌面样式和手机端样式。

Adobe Extendscript Toolkit CC

Adobe为用户提供了一种名为"Scripting"的工具，即ExtendScript。它可以控制、自动化Adobe应用的许多特性。其实CEP扩展，就是提供了javascript语言对Scripting的支持，就是对js的扩展，名为jsx。这种操纵Adobe应用的工具，或者说语言，我们可以用Adobe Extendscript Toolkit CC进行调试。
Adobe Extendscript Toolkit CC是Adobe提供的免费Script测试工具，如图。你可以用该工具对操作语句进行测试。这里提供下载地址。

参考资料

CEP-Resources
CEP-pdf文献
JavaScript Tools Guide CC