Question

我有这个元素，其中包含一个asymce html编辑器作为iframe。通过url参数将文本数据发送到编辑器时，它可以很好地工作。但是，url参数的大小是有限的，我需要找到一种方法将文本数据发送到iframe。

在iframe中我可以调用window.parent.getTemplate（）。只有在普通的javascript标记内部才能找到getTemplate函数：

<script type="text/javascript">
    function getTemplate(){
        return 'xyz';
  }
</script>

如果它在聚合物脚本中，它就不会被发现。

我的问题：

如何访问Polymer变量＆＃39; emailtemplate＆＃39;从getTemplate（）函数里面？

<script type="text/javascript">
    function getTemplate(){
        return 'xyz';
  }
</script>

<polymer-element name="crm-emailtemplate-editor" extends="core-overlay" backdrop attributes="emailtemplate">

  <template>

    <core-scroll-header-panel flex>
        <div class="core-header" horizontal layout reverse center>
            <core-toolbar>
                <core-icon-button icon="close" on-tap="{{closeTapped}}"></core-icon-button>
                    <paper-input label="Name" value="{{emailtemplate.et_name}}"></paper-input>
                <core-icon-button icon="save" on-tap="{{saveTapped}}"></core-icon-button>
            </core-toolbar>
          </div>

          <div id="content" class="content">

            <iframe id="editor" src="html-editor.php"></iframe>

          </div>

        </core-scroll-header-panel>

  </template>


  <script>
    Polymer({
        publish:{
            emailtemplate:{}    
        }
    });
  </script>
</polymer-element>

这是在init处调用getTemplate（）函数的iframe。

<!DOCTYPE html>
<html>
<head><!-- CDN hosted by Cachefly -->
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ],
    image_list: "../image_list.php",

    setup: function (ed) {
        ed.on('init', function(args) {
            // var htmlcontent = getQueryVariable('content');
            // tinyMCE.activeEditor.setContent(decodeURIComponent(htmlcontent));
            tinyMCE.activeEditor.execCommand('mceFullScreen');

            // get emailtemplate content to display
            var tpl = window.parent.getTemplate();
            tinyMCE.activeEditor.setContent(tpl);
        });

        ed.on('change', function(e) {
            console.log('change event', e);
            var htmlcontent = tinyMCE.activeEditor.getContent();
            document.getElementById("htmlContent").innerHTML = htmlcontent;

        });

        ed.on('NodeChange', function(e){
            console.log('change event', e);
            var htmlcontent = tinyMCE.activeEditor.getContent();
            document.getElementById("htmlContent").innerHTML = htmlcontent;
         });
    }
});

function getQueryVariable(variable) {
  // GET Parameter
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  alert('Query Variable ' + variable + ' not found');
}

</script>

</head>
<body>
        <textarea id="editor" name="content" style="width:100%">Easy!</textarea>
        <htmlcopy id="htmlContent"></htmlcopy>
</body>
</html>

Answer 1

我认为你的麻烦只是因为你没有等待聚合物准备就绪。你必须在polymer-ready事件之前添加一个监听器才能安全地使用Polyfill。

Get a Polymer component property value from outside the element example

编辑：

我误读了，对不起。所以，你可以使用我说的上述方法，并像Window方法一样定义getTemplate方法。

// Your external method.
var getTemplate = function(){
  var editor = document.querySelector("crm-emailtemplate-editor");
  return editor.emailtemplate;
}

我分叉了我之前的Plunk

Get an element property Polymer from an iframe who is inside the element itself.

Answer 2

我最终使用localStorage将数据发送到iframe。

<core-localstorage name="ninja_localStorage-emailtemplate" value="{{emailtemplate.et_content}}"></core-localstorage>

并从iframe中读取：

var contentFromStorage = localStorage.getItem('ninja_localStorage-emailtemplate');

如何从Polymer Polymer访问Polymer变量

2 个答案: