Adobe Illustrator CEP插件开发系列(1)——开发环境配置

文章目录

      • 背景
      • CEP简介
      • 开发环境
        • Adobe CC Extension Builder 1.0.0
        • 其他可选插件
        • Adobe Illustrator CC 2014-2018
        • Google Chrome
        • Topcoat Desktop Dark
        • Adobe Extendscript Toolkit CC
      • 参考资料

背景

由于项目需求,需要开发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 Illustrator CEP插件开发系列(1)——开发环境配置_第1张图片
这是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扩展是一个文件夹,该文件夹的结构可以依开发者而定,比较常规的结构如下:
Adobe Illustrator CEP插件开发系列(1)——开发环境配置_第2张图片
其中最重要的文件夹是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,打开界面,如图
Adobe Illustrator CEP插件开发系列(1)——开发环境配置_第3张图片
将下载好的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扩展的版本有关,对应的版本如下:
Adobe Illustrator CEP插件开发系列(1)——开发环境配置_第4张图片

Google Chrome

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

Topcoat Desktop Dark

如果想CEP扩展的界面样式和Adobe一致,这里推荐一个Topcoat样式库。这是一个和Adobe应用风格样式一致的样式库,可以从官网下载这个样式的css文件,进行引用。可以选择Dark或者Light两种桌面样式和手机端样式。
Adobe Illustrator CEP插件开发系列(1)——开发环境配置_第5张图片

Adobe Extendscript Toolkit CC

在这里插入图片描述
Adobe为用户提供了一种名为"Scripting"的工具,即ExtendScript。它可以控制、自动化Adobe应用的许多特性。其实CEP扩展,就是提供了javascript语言对Scripting的支持,就是对js的扩展,名为jsx。这种操纵Adobe应用的工具,或者说语言,我们可以用Adobe Extendscript Toolkit CC进行调试。
Adobe Extendscript Toolkit CC是Adobe提供的免费Script测试工具,如图。你可以用该工具对操作语句进行测试。这里提供下载地址。
Adobe Illustrator CEP插件开发系列(1)——开发环境配置_第6张图片

参考资料

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

你可能感兴趣的:(CEP,Illustrator插件开发,CEP,Adobe,插件,Illustrator)