jQuery + MarkItUp + Polymer – 让它发挥作用？

使用Polymer ，我正在尝试创建一个重用markItUp的组件，这样我就可以在需要时使用富文本编辑器。

但是，尽我所能，我无法正确初始化它。 jQuery选择器根本找不到textarea元素来执行它的魔力。 我已经尝试了很多咒语，添加事件监听器，响应特定事件，并且很可能是由于我缺乏Javascript经验，我只是无法让所有人一起工作。 这是我到目前为止（请注意，此文件位于名为“rich-textarea”的元素下的文件夹中）：

           Polymer('rich-textarea', { value: "", rows: 25, cols: 80, // here and below are where I need help domReady: function() { $(document).ready(function() { $(".makeItRich").markItUp(mySettings); }); } });   

任何帮助将不胜感激。 我认为这个问题对聚合物来说是一个很好的试金石，因为它将三种技术结合在一起。 如果这“正常”，那么大多数事情可能会继续发挥作用。 谢谢你的时间。

Answer 1

$(".makeItRich")将无效，因为textarea位于元素的ShadowRoot中，而JQuery将无法找到它。 此外，CSS的范围限定为元素，因此您必须将CSS链接放在模板中。

这在我尝试时起作用了：

Answer 2

我认为这个问题是对Polymer的一个很好的试金石

Shadow DOM（由Polymer使用）本质上是将CSS scoping的概念添加到CSS和DOM中。 根据定义，这意味着假设一个巨大的全局范围的技术根本不能与Shadow DOM一起使用。

例如， document.querySelector不会在Shadow DOM中找到元素（再次，按设计）。 类似地，主文档中的CSS规则不会到达Shadow DOM内部的元素（除非这些规则是Shadow DOM感知的）。

出于这个原因， 众所周知 ，现在许多现有技术都不适用于聚合物。

范围DOM和CSS的能力是强大的，并且是一个巨大的飞跃，但它需要一些适应充分利用。

Answer 3

这可能不是一个答案，但需要一些有经验的人的建议

 jQuery.noConflict(); $ = function(selector,context){ if (typeof selector === "string") { var that = document.querySelector("el-test").shadowRoot; return new jQuery.fn.init(that.querySelectorAll(selector)); //return new jQuery.fn.init(selector, that); }else{ return new jQuery.fn.init(selector,context); } }; $.fn = $.prototype = jQuery.fn; jQuery.extend($, jQuery); 

上面是我用来扩展jquery构造函数（ 引用 ）的内容。 在此之后，我通常可以在Polymer事件中使用jquery选择器。 让我知道什么是pifalls（如果有的话，我认为有）

小提琴是在http://jsbin.com/IVodePuS/106/edit?html,output

谢谢