如何从元素初始化TinyMCE

时间:2015-12-14 16:13:50

标签: knockout.js tinymce tinymce-4

文档说明你初始化如下:

tinymce.init({
    selector: '#mytextarea'
  });

但是,我希望在我可以访问该元素的knockout中的绑定扩展中执行此操作。

因此我希望能够做到以下几点:

ko.bindingHandlers.tinymce = {
    init: function (element, valueAccessor, allBindings) {
        $(element).tinymce();
        return ko.bindingHandlers.textInput.init(element, valueAccessor, allBindings);
    }
}

这就是我在网上找到的现有绑定扩展的工作方式,但对我来说,我得到tinymce is not a function,并想知道API是否已经改变,迫使你使用选择器。

这是真的吗?

1 个答案:

答案 0 :(得分:1)

API没有改变。但是,您使用的是错误的依赖项。要将jQuery与tinyMCE一起使用,您需要在此完全顺序中使用以下依赖项

  1. http://cdn.tinymce.com/4/tinymce.jquery.min.js
  2. https://code.jquery.com/jquery-1.11.3.min.js
  3. 查看this working example.

    var settings = {
        height: 500,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code'
        ],
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
        content_css: [
            '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
            '//www.tinymce.com/css/codepen.min.css'
        ]
    };
    
    ko.bindingHandlers.tinymce = {
        init: function (element, valueAccessor, allBindings) {
            $(element).tinymce(settings);
            return ko.bindingHandlers.textInput.init(element, valueAccessor, allBindings);
        }
    }
    
    ko.applyBindings();