Javascript tinyMCE不可编辑元素的自定义样式

我在AngularJS（）中使用tinyMCE 4。我正在尝试使用获取一些预定义的变量，以便很好地显示这些变量。我这里有一个plnkr

现在，tinyMCE的设置如图所示

vm.settings = {
  menubar: false,
  toolbar: 'firstButton | secondButton',

  plugins: 'noneditable',
  noneditable_regexp: [ 
    /<my-variable>(.*?)<\/my-variable>/g,
    /<other-variable>(.*?)<\/other-variable>/g
  ],
  extended_valid_elements :'my-variable,other-variable',
  custom_elements: '~my-variable,~other-variable',
  content_style: "my-variable: {background: yellow;} other-variable: {background: blue;}",

  setup: function(editor){
    editor.addButton('firstButton', {
      text: 'Insert first',
      icon: false,
      onclick: function () {
        editor.insertContent('<my-variable>MY-VARIABLE</my-variable>');
      }
    });
    editor.addButton('secondButton', {
      text: 'Insert second',
      icon: false,
      onclick: function () {
        editor.insertContent('<other-variable>OTHER-VARIABLE</other-variable>');
      }
    });
  }

vm.settings={
梅努巴：错，
工具栏：“第一个按钮|第二个按钮”，
插件：“不可编辑”，
不可编辑的\u regexp:[
/（*）/g，
/（.*）/g
],
扩展的\u有效\u元素：'my-variable，other variable'，
自定义元素：“~my variable，~other variable”，
content_样式：“我的变量：{background:yellow；}其他变量：{background:blue；}”，
设置：函数（编辑器）{
editor.addButton（'firstButton'{
文本：“先插入”，
图标：false，
onclick:function（）{
editor.insertContent（'MY-VARIABLE'）；
}
});
editor.addButton（'secondButton'{
文本：“插入第二个”，
图标：false，
onclick:function（）{
editor.insertContent（'OTHER-VARIABLE'）；
}
});
}

})

我用

所以这是相当标准的

---

我的问题是：如何使

和

具有不同的样式？当TinyMCE翻译它们时，它们似乎只是在扮演“mceNonEditable”的角色。我不想在我的自定义标记中添加类属性，因为它们将在以后的阶段进行分析，如果没有属性，那么就容易多了。

你的

内容样式
缺少一个
：
它应该是
内容样式：“我的变量：{background:yellow；}其他变量：{background:blue；}”
@jasonscript已添加。但是行为没有改变。您的
内容\u样式
缺少一个
：
它应该是
内容\u样式：“我的变量：{background:yellow；}其他变量：{background:blue；}”
@jasonscript已添加。但行为没有改变。