3

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

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

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

<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/skins/markitup/style.css">
<link rel="stylesheet" type="text/css" href="../../bower_components/markitup-1x/markitup/sets/default/style.css">

<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="../../bower_components/markitup-1x/markitup/sets/default/set.js"></script>

<polymer-element name="rich-textarea" attributes="rows cols value">
    <template>
        <textarea class="makeItRich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>
    </template>
    <script>
        Polymer('rich-textarea', {
            value: "",
            rows: 25,
            cols: 80,
            // here and below are where I need help
            domReady: function() {
                $(document).ready(function() {
                    $(".makeItRich").markItUp(mySettings);
                });
            }
        });
    </script>  
</polymer-element>

任何帮助将不胜感激。我认为这个问题通常是对 Polymer 的一个很好的试金石,因为它将三种技术结合在一起。如果这“行得通”,那么大多数事情都可能在未来发挥作用。谢谢你的时间。

4

3 回答 3

7

$(".makeItRich")将不起作用,因为 textarea 位于元素的 ShadowRoot 内,而 JQuery 将无法在其中找到它。此外,CSS 的范围是元素,因此您必须将 CSS 链接放在模板中。

这在我尝试时有效:

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/jquery2-import/jquery2-import.html">

<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/default/set.js"></script>

<polymer-element name="markitup-element" attributes="rows cols value">
<template>

  <style>
    :host {
      display: block;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css">
  <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css">

  <textarea id="rich" rows="{{rows}" cols={{cols}}" value="{{value}}"></textarea>

</template>
<script>

  Polymer({
    value: "",
    rows: 25,
    cols: 80,
    domReady: function() {
      $(this.$.rich).markItUp(mySettings);
    }
  });

</script>  
</polymer-element>
于 2014-04-29T17:35:21.817 回答
1

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

Shadow DOM(Polymer 使用)本质上就是scoping在 CSS 和 DOM 中添加了概念。根据定义,这意味着假设一个巨大的全局范围的技术根本无法使用 Shadow DOM 开箱即用。

例如,document.querySelector不会在 Shadow DOM 中找到元素(同样,设计使然)。同样,主文档中的 CSS 规则不会到达 Shadow DOM 内部的元素(除非这些规则是 Shadow DOM 感知的)。

出于这个原因,众所周知,当今许多现有技术不仅仅适用于聚合物。

DOM 和 CSS 范围的能力非常强大,是一个巨大的飞跃,但需要一些调整才能充分利用。

于 2014-04-27T19:26:16.910 回答
0

这可能不是答案,但需要有学问的人的一些建议

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 选择器。让我知道有什么问题(如果有的话,我假设有)

小提琴位于 - http://jsbin.com/IVodePuS/106/edit?html,output

谢谢

于 2014-08-25T19:55:32.543 回答