tinyMCE 添加和修改皮肤

 

一、文件夹说明

1.1 modules/oxide/src/less/skins/ui：

皮肤文件夹，最重要的是skin.less

1.2 modules/oxide/src/less/skins/content：

编译器内容的风格皮肤（暂时用不到，可以先忽略，有需要再添加）

1.3 modules/oxide/src/less/theme ：

全局的配置信息，包含默认定义的，颜色、边距、边框、圆角、字体的变量。

尤其是以@开头的字符串，譬如@background-color。

请不要修改这里面的内容！！！！！

1.4 modules/oxide/src/less/theme/globals/global-variables.less

全局变量

1.5 modules/oxide/src/less/theme/components/toolbar-button/toolbar-button.less

工具栏按钮相关

二、添加和修改说明

2.1 首先复制default位于的文件夹modules/oxide/src/less/skins/ui/并将其重命名为您的皮肤的名称,譬如叫 bobo。

2.2 在 modules/oxide/src/less/theme 文件夹下面，找到要修改的变量。整行复制到 bobo/skin.less，然后修改即可。

 

三、预览和编译

3.1 准备

yarn install

3.2 编译

yarn oxide-build

该命令只构建皮肤而不启动 Web 服务器

3.3 编译并实时预览

yarn oxide-start

该命令，启动Web服务器，可以通过链接http://localhost:3000 实时预览修改的效果。

修改后，也会被实时编译

3.4 编译后的文件位置

modules/oxide/build/skins/ui/bobo

3.5 正式生产使用

将3.4 里面的bobo文件夹，整体拷贝并覆盖到以下位置即可

js/tinymce/skins/ui/