Question

我试图让Ace Editor成为一个Web组件，然而，它似乎表现得并非如此。下面是正在发生的事情的截图。

我在控制台中没有收到任何错误消息。这是我的代码：

<link rel="import" href="components/polymer/polymer.html">
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

<polymer-element name="ace-editor">
    <template>
        <pre id="editor">function foo(items) {
            var x = "All this is syntax highlighted";
            return x;
            }
        </pre>
    </template>
    <script>
        window.addEventListener('polymer-ready', function(e)
        {
            allgress.search_component_polymer.advanced_search.ace_editor();
        });
    </script>
</polymer-element>

代码叫做on-polymer-ready：

(defn ^:export ace-editor []
  (polymer :ace-editor
           {:attached (fn []
                        (this-as this
                                 (let [shadowRoot (.-shadowRoot this)
                                       editor-div (.getElementById shadowRoot "editor")
                                       editor (.edit js/ace editor-div)]
                                   (.setTheme editor "ace/theme/monokai")
                                   (.. editor getSession (setMode "ace/mode/javascript"))
                                   )))}))

聚合物功能的定义

(defn polymer
  [tag-name spec]
  (js/Polymer (name tag-name) (clj->js spec)))

问题不在于我创建组件的方式。问题在于ace-editor在用作组件时行为不正确。我已经使用相同的技术来定义大约10个其他组件，所有这些组件都非常好。

Answer 1

这是因为ace添加的样式对影子根内的元素没有影响，请参阅https://github.com/PolymerLabs/ace-element/pull/2了解PolymerLabs / ace-element上的相关错误

使用Ace编辑器作为聚合物组件会导致错误的行为

1 个答案: