jQuery + MarkItUp + Polymer - 작동시키기?

Question

Polymer을 사용하여, 필요할 때마다 서식있는 텍스트 편집기를 사용할 수 있도록 markItUp을 다시 사용하는 구성 요소를 만들려고합니다.

그러나 시도해 보니 제대로 초기화 할 수 없습니다. jQuery 선택자는 단순히 마술을 수행하기 위해 textarea 요소를 찾을 수 없습니다. 나는 이벤트 청취자를 추가하고, 특정 이벤트에 응답하며, Javascript 경험이 부족하여 가장 많은 도움을 얻으려는 시도를 여러 번 시도했지만, 모두 함께 사용할 수는 없습니다.

<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에 대한 좋은 리트머스 테스트라고 생각합니다. 이 "그냥 작동합니다", 대부분의 가능성은 앞으로 나아갈 가능성이 높습니다. 시간 내 줘서 고마워.

Answer 1

$(".makeItRich") 텍스트 영역이 요소의 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>