Question

我在AngularJS中使用tinyMCE 4（angular-ui-tinymce）。我正在尝试使用noneditable plugin来获取一些我预先定义好的变量。我在这里有一个plnkr http://plnkr.co/edit/AImGWCDO6a1J6VC7kD73?p=preview

现在我对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>');
      }
    });
  }

};

我只是用我的tinyMCE对象调用这些 <div ui-tinymce="vm.settings" ng-model="vm.content"></div> 所以这很标准。

我的问题是：如何让<my-variable>和<other-variable>有不同的风格？当TinyMCE翻译它们时，他们似乎只接受'mceNonEditable'类。我宁愿不必在我的自定义标签中添加一个类属性，因为它们要在稍后阶段进行解析，如果它们没有属性就更容易。

为tinyMCE nonEditable元素定制样式

0 个答案: