如何将tinyMCE包裹在聚合物元素中？ [英] How do I wrap tinyMCE inside a polymer element?

问题描述

所以我想创建一个通常只显示内容的聚合物元素，但是当存在edit-attribute时，tinymce应该显示为内联。

So I'd like to create a polymer-element that usually just displays content, but when the edit-attribute is present then tinymce should appear inline.

这个是我到目前为止：

<polymer-element name="article-widget" attributes="edit">
    <template>
        <div id="content"><content></content></div>
    </template>
    <script>
        Polymer('article-widget', {
            edit: false,
            ready: function() {
                tinymce.init({
                    selector: "div#content",
                    theme: "modern",
                    plugins: [
                        ["advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker"],
                        ["searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking"],
                        ["save table contextmenu directionality emoticons template paste"]
                    ],
                    add_unload_trigger: false,
                    schema: "html5",
                    inline: true,
                    toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image     | print preview media",
                    statusbar: false,
                });
            }
        })
    </script>
</polymer-element>

正如你现在所看到的，我甚至没有使用edit-attribute作为条件。我只是想初始化tinyMCE，但它不起作用。我猜这是因为tinyMCE无法通过选择器访问元素，因为该元素位于shadow-DOM中。我是否正确？

As you can see right now I'm not even using the edit-attribute as a condition. I'm just trying to initialize tinyMCE, but it doesn't work. I'm guessing this is because tinyMCE can't get to the element via the selector, because the element is in a shadow-DOM. Am I correct?

那我该怎么做呢？我很惊讶我在Google上找不到任何试图做同样事情的人。

So how else should I do this? I'm very surprised that I couldn't find anyone on Google who has tried to do the same thing.

推荐答案

我修复了它这样做：

<link rel="import" href="/js/bower_components/polymer/polymer.html">

<polymer-element name="article-widget" attributes="edit">
    <template>
        <content></content>
    </template>
    <script>
        Polymer('article-widget', {
            $tinymce: null,
            edit: false,
            initTinyMCE: function() {
                if (this.$tinymce === null) {
                    this.$tinymce = $('<div>' + this.innerHTML + '</div>');
                    $(this).html(this.$tinymce);
                    this.$tinymce.tinymce({
                        theme: "modern",
                        skin: "light",
                        plugins: [
                            ["advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker"],
                            ["searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking"],
                            ["save table contextmenu directionality emoticons template paste"]
                        ],
                        add_unload_trigger: false,
                        schema: "html5",
                        inline: true,
                        fixed_toolbar_container: "#toolbar",
                        toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media",
                        statusbar: false,
                        menubar: false,
                        content_css : "/css/cake.generic.css",
                    });
                }
            },
            destroyTinyMCE: function() {
                if (this.$tinymce !== null) {
                    var content = this.$tinymce.attr('value');
                    this.$tinymce.remove();
                    this.$tinymce = null;
                    $(this).html(content);
                }
            },
            ready: function() {
                if (this.edit) {
                    this.initTinyMCE();
                }
            }
        })
    </script>
</polymer-element>

这篇关于如何将tinyMCE包裹在聚合物元素中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！