jQuery + MarkItUp + Polymer-可以正常使用吗? [英] jQuery + MarkItUp + Polymer - Getting it to Work?

问题描述

使用聚合物，我正在尝试创建一个重新使用 markItUp ，因此我可以在需要时使用富文本编辑器.

Using Polymer, I'm trying to create a component that re-uses markItUp so I can use a rich text editor whenever needed.

但是，请尝试尝试，但我无法正确初始化它. jQuery选择器根本无法找到textarea元素来执行其魔术.我尝试了许多尝试来添加事件侦听器，对特定事件做出响应，并且很可能是由于我缺乏Javascript经验，我无法将所有这些都一起使用.到目前为止，这是我所拥有的(请注意，此文件位于名为"rich-textarea"的元素下的文件夹中):

However, try as I might, I cannot get it to initialize correctly. The jQuery selector simply cannot find the textarea elements to perform its magic. I've tried numerous incantations with adding event listeners, responding to particular events, and most likely due to my lack of Javascript experience, I just cannot get it all to work together. Here's what I have so far (note that this file is in a folder under elements called "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的一个很好的试金石，因为它将三个技术结合在一起.如果这行之有效"，那么将来几乎所有事情都可能奏效.谢谢您的宝贵时间.

Any assistance would be greatly appreciated. I see this question as a good litmus test on Polymer in general since it combines three technologies together. If this "just works", odds most anything will probably work going forward. Thanks for your time.

推荐答案

$(".makeItRich")将不起作用，因为textarea位于元素的ShadowRoot内部，而JQuery不会在其中找到它.另外，CSS的作用域为元素，因此您必须将CSS链接放在模板中.

$(".makeItRich") will not work because the textarea is inside your element's ShadowRoot, where JQuery will not find it. Also, the CSS is scoped to the element, so you must put your CSS links inside the template.

这在我尝试过时有效:

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

这篇关于jQuery + MarkItUp + Polymer-可以正常使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！