Question

所以我对tinymce4 api有一点问题，iv创建了一个我想用按钮跳转的自定义格式。但是，当单击按钮时，样式将应用于按钮，而不是实际的可满足字段。

tinymce.init({
    selector: '#editable',
    inline: true,
    menubar: false,
    toolbar:false,
    statusbar: false,
});

setTimeout(function(){
    tinymce.activeEditor.formatter.register('mycustomformat', {
   inline : 'span',
   styles: {color: 'red'}
 });
},200);

$('.js-toggleformat').on('click', function(e) {
    tinymce.activeEditor.formatter.apply('mycustomformat');
})

和html：

<button class="js-toggleformat">Toggle</button>

<div id="editable" contenteditable="true"></div>

Answer 1

看一个例子。 tinymce插件“textcolor”使用函数“applyFormat”来应用颜色。它看起来像这样：

function applyFormat(format, value) {
  editor.focus();
  editor.formatter.apply(format, {value: value});
  editor.nodeChanged();
}

基于此，这适用于您的情况：

tinymce.activeEditor.focus();
tinymce.activeEditor.formatter.apply('mycustomformat');
tinymce.activeEditor.nodeChanged();

Answer 2

我有类似的问题。我想你正在使用内联编辑选项。当您单击编辑字段外部时，会禁用tinymce id。

您可以通过两种方法解决此问题：

您可以自定义工具栏并在工具栏中添加所需的格式
在tinymce blur事件中使用rangy库存储范围。在按钮上单击首先激活tinymce，恢复保存的范围，然后使用tinymce格式化程序切换样式

希望这有帮助。

Tinymce切换格式，格式化按钮而不是编辑器

2 个答案: