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>

どんな援助でも大歓迎です。この質問は、3 つのテクノロジーを組み合わせているため、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 に答える