TinyMCE 4图片高级标签自定义及相关功能使用咨询

一、将图片的垂直/水平间距改为上下左右独立选项 #

既然你已经启用了image_advtab（高级标签），要替换原有的vspace和hspace为四个独立的间距选项，你可以通过自定义图片对话框的字段来实现。具体来说，在TinyMCE的初始化配置里添加setup回调，修改图片弹窗的控件：

tinymce.init({
  selector: 'textarea',
  plugins: 'image',
  image_advtab: true,
  setup: function(editor) {
    editor.on('beforeRenderUI', function() {
      // 获取图片对话框的配置
      var dialogConfig = editor.windowManager.getParams().image;
      if (dialogConfig) {
        // 移除原有的vspace和hspace字段
        dialogConfig.body = dialogConfig.body.filter(function(item) {
          return item.name !== 'vspace' && item.name !== 'hspace';
        });
        // 添加四个独立的间距输入框
        dialogConfig.body.push(
          {
            name: 'margin_top',
            type: 'textbox',
            label: '上间距',
            value: ''
          },
          {
            name: 'margin_right',
            type: 'textbox',
            label: '右间距',
            value: ''
          },
          {
            name: 'margin_bottom',
            type: 'textbox',
            label: '下间距',
            value: ''
          },
          {
            name: 'margin_left',
            type: 'textbox',
            label: '左间距',
            value: ''
          }
        );
      }
    });

    // 插入图片时将四个间距值转为内联样式
    editor.on('InsertImage', function(e) {
      var img = e.element;
      var marginTop = editor.windowManager.getParams().image.margin_top;
      var marginRight = editor.windowManager.getParams().image.margin_right;
      var marginBottom = editor.windowManager.getParams().image.margin_bottom;
      var marginLeft = editor.windowManager.getParams().image.margin_left;
      var style = [];
      if (marginTop) style.push('margin-top:' + marginTop + 'px');
      if (marginRight) style.push('margin-right:' + marginRight + 'px');
      if (marginBottom) style.push('margin-bottom:' + marginBottom + 'px');
      if (marginLeft) style.push('margin-left:' + marginLeft + 'px');
      if (style.length > 0) {
        img.setAttribute('style', style.join(';'));
      }
    });
  }
});

这段代码会先移除原有的垂直/水平间距字段，添加上下左右四个输入框，然后在插入图片时把这些值转为图片的内联样式。你可以根据需求调整单位（比如默认用px），或者添加单位选择器来优化体验。

二、找不到'image code'插件 #

首先明确：TinyMCE官方并没有名为image code的插件哦！大概率是这几种情况：

• 你可能记错了插件名称，官方和图片相关的核心插件是image（基础图片插入）和imagetools（图片编辑工具）；
• 这个插件是自定义开发的，或者是第三方插件，需要检查你的项目插件目录（一般是plugins/文件夹下），或者核对配置里的plugins列表是不是写错了名字；
• 也有可能是某个教程里的自定义插件别名，建议你再核对插件的来源，或者查看项目依赖配置（比如package.json）里的相关包。

如果是需要给图片添加代码相关功能，比如插入带代码标注的图片，可能需要自己开发小插件，或者用现有插件组合实现。

三、“Style”输入框的使用方法 #

这个输入框是用来给图片添加自定义CSS样式的，有两种常用方式：

1. 添加内联样式：直接写CSS属性和值，比如输入margin: 10px 5px; border: 2px solid #ccc;，确定后图片会自动带上对应的style属性，效果即时生效；
2. 添加CSS类名：如果你的网站已经定义了图片相关的CSS类，比如全局样式里有：

.img-left {
  float: left;
  margin-right: 15px;
  border-radius: 4px;
}

那你可以在Style输入框里直接输入img-left，图片就会添加上这个类名，继承类里定义的样式。

注意：输入内联样式时要符合CSS语法，多个样式用分号分隔；添加类名时要确保页面已经加载了对应的CSS规则，否则不会生效。

内容的提问来源于stack exchange，提问作者HDer