在動態加載的TextArea上加載TinyMCE無效

Question

我正在嘗試創建一個文本區域，該區域會動態加載並自動應用TinyMCE編輯器。

盡管涉及該主題的主題很多，甚至有一些教程，但我似乎都沒有使它起作用。

我可能忽略了一個很小的項目，但是如果我只知道什么的話。

情況

當前安裝：TinyMCE 4.x + jQuery v1.10.1一個HTML頁面，可通過AJAX調用加載文本區域。

我嘗試在文本區域上初始化TinyMCE編輯器。 那里失敗了。

FireBug錯誤控制台告訴我： ReferenceError：tinyMCE尚未定義，但已定義。 我什至試圖設置絕對路徑。

    <title>jQuery test file</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/classes/jquery.tinymce.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.EditorField').tinymce({
            script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
        });
    });
    </script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
         $.get("test.php", function( EditorHTML ) {
            $("#EditorSection").html( EditorHTML );
            tinyMCE.execCommand('mceAddEditor', false, '.EditorField'); 
        });
      });
   </script>

我使用的HTML表單代碼：

<form method="post" action="result.php">
    <div>
        <div id="EditorSection">

        </div>
        <br />
        <input type="submit" name="save" value="Submit" />
        <input type="reset" name="reset" value="Reset" />
    </div>
</form>

而且可能也很重要，由AJAX加載的代碼：

<textarea name="TextArea1" cols="20" rows="2" class="EditorField" id="WysyWig" style="background-color: red; width: 100%; height: 700px;">

動態加載的文本區域內容

我在這里嘗試了多種選擇：

tinyMCE.execCommand('mceFocus', false, '.EditorField');
tinyMCE.execCommand('mceAddEditor', true, '.EditorField');

或直接由ID本身。 不應該有所作為

tinyMCE.execCommand('mceAddControl', false, '#WysyWig');

我希望有人能看到我所忽略的事物。

Answer 1

用一個替換您的腳本標簽：

<script type="text/javascript">
jQuery(document).ready(function() {
    $.get("test.php", function( EditorHTML ) {
        $("#EditorSection")
            .html( EditorHTML )
            .find('.EditorField')
            .tinymce({
                script_url: 'http://domein1.nl/serene2/workspace/TinyMCE/tinymce_4.2.5_dev/tinymce/js/tinymce/tinymce.jquery.min.js'
            });
        tinyMCE.execCommand('mceAddEditor', false, '.EditorField'); 
    });
});
</script>

基本上，您將等待Ajax響應，一旦它在您的DOM中，您將初始化tinyMCE。