使用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 的一个很好的试金石,因为它将三种技术结合在一起。如果这“行得通”,那么大多数事情都可能在未来发挥作用。谢谢你的时间。