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

Question

使用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>

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

Answer 1

$(".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>