Question

我命名为＃34;帧＆＃34;包含一些小内容的页面，我在我的php主页中通过AJAX在特定的div上多次加载，这些div将在不同的地方多次显示。

真实情况：我有一个＆＃34;回复＆＃34; div包含对某些消息的所有回复，并且有一个＆＃34;回复＆＃34;按钮，通过带有回复输入和表单的AJAX加载div中的php页面。当此页面加载时，我需要通过javascript在此输入上加载文本编辑器。

我的问题是我在每个加载的页面上使用<script></script>：

<script>*Load text editor on inputs*</script>

这样可以很好地加载它，除非我一次又一次地打开相同的页面。然后它停止工作。

当我查看HTML以查看我收到的内容时，我无法找到加载页面的<script></script>。它甚至没有加载。

我不认为在php页面中放置<script></script>标签是最好的方法，我需要能够创建某种在页面加载时触发的事件但不放置每页内都有<script></script>。

所以这里有一个问题：当该页面准备好而不在每个页面中放置<script></script>时，如何通过javascript执行加载文本编辑器的操作？

我对其他方法持开放态度，因为这对我来说非常混乱，我不知道在这种情况下最佳做法是什么。

遵循真实代码（带有表单标签的页面是一个带有＆＃34;标题＆＃34;和＃34;页脚＆＃34;以及每个表单加载的页面的PHP页面。）

reply_page.php：（请注意，我使用PHP在元素上写回复的ID，这样他们就不会得到相同的名称）

<script>
jQuery(document).ready(function(){
    alert('it did get in here reply #<?php echo $this->uri->segment(3) ?>');

    load_tinymce(".tinymce<?php echo $this->uri->segment(3) ?>");

    jQuery('html, body').animate({scrollTop:999999999}, 'slow');
});

</script>  
<?php
        echo '<label>Reply*</label>';
        echo form_textarea(array('name'=>'reply-'.$text_add_itens, 'rows'=>'3',     'class'=>'form-control tinymce'.$this->uri->segment(3), 'id'=>'reply'), 
                '');

?>

function＆＃34; load_tinymce＆＃34;：

function load_tinymce(where)
{
    tinymce.init({
        selector: where,
        theme: "modern",
        plugins: [
            "autolink lists link image hr anchor",
            "code",
            "media nonbreaking contextmenu directionality",
            ""
        ],
        toolbar1: "undo redo | bold italic underline bullist numlist outdent indent | link image",
        language: "pt_BR",
        document_base_url: url_base,
        relative_urls: true,  
        extended_valid_elements:"iframe[*],span[*],style[*]",
        content_css: url_base+"css/bootstrap.css",
        menubar:false,
        statusbar:false,
        forced_root_block : false,
    });         
}

我的提醒＆＃34;它确实进入了这里......＆＃39;＆＃34;总是被上面的正确ID触发，但是在我加载第二页后加载的第一页上没有加载文本编辑器。这意味着只加载了最后一页。

更新：

执行更多测试我能够观察到它的行为如下：

我有3条消息可以打开回复表单。我打开＃1消息并打开回复表单，文本编辑器被加载。我打开＃2消息，文本编辑器被加载，一切都很好。

当我回到＃1，再次关闭并打开回复表单时，文本编辑器不会加载。好。它被淹没了吗？

我打开＃3消息并打开回复表单，文本编辑器不再加载。

我第二次打开回复表单后，我打开的表单都没有得到文本编辑器但是我可以关闭并打开我想要的第二个表单并且工作正常。

Answer 1

如果不知道你怎么称呼它，我可以建议以下方法。它首先检查您的编辑器脚本是否已经加载（在本例中为jquery-ui），如果没有加载它。

一旦加载，它也调用函数显示对话框，如果你点击另一个元素（调用相同的函数），它不重新加载，只是直接调用“编辑器”，加载函数得到将div元素作为参数，并将此参数添加到addEditorToScript函数中（在这种情况下，作为此对象）

<强>更新

我做了更新以使用tinymce。脚本应该放在你当前的jquery脚本的位置，div应该得到一个click事件，并且至少有一个唯一的id :)（它也可以是textarea），这对你有帮助吗？

function loadMe(divElement) {
  console.log(divElement.innerHTML);
  if (divElement && divElement.innerHTML.indexOf('<i>Click to reply</i>')) {
    divElement.innerHTML = '... loading, please wait ...';
    var callEditor = addEditorToScript.bind(divElement);
    if ($('#editorScript').length === 0) {
      console.log('loading jquery-ui');
      var scriptTag = document.createElement('script');
      scriptTag.id = 'editorScript';
      scriptTag.src = 'http://tinymce.cachefly.net/4.1/tinymce.min.js';
      $(scriptTag).on('load', callEditor);
      document.body.appendChild(scriptTag);
      return;
    }
    setTimeout(callEditor, 0);
  }
}

function addEditorToScript() {
  console.log(this);
  console.log(arguments);
  tinymce.init({
    selector: '#' + this.id
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>Lorem</h1>
  <p>
    Ipsum
  </p>
  <div id="editor1" onclick="loadMe(this)">
    <i>Click to reply</i>
  </div>
</div>
<div>
  <h1>Delorem</h1>
  <p>
    Something
  </p>
  <div id="editor2" onclick="loadMe(this)">
    <i>Click to reply</i>
  </div>
</div>

如何在“框架”上“$（document）.ready（）”？

1 个答案: