单击按钮将textarea更改为tinyMCE编辑器

Question

I want to convert normal textarea to tinyMCE Editor on click of a button. 我想单击按钮将普通的textarea转换为tinyMCE编辑器。 The scenario is that i have two buttons on my page and two textarea from one button click one jquery function will be called and from other the second jquery button will be called, the function is called properly but the issue is that the normal textarea is not converted to tinyMCE Editor when a specific button is clicked. 场景是我的页面上有两个按钮，一个按钮单击两个textarea ，一个jquery函数将被调用，第二个jquery按钮将被另一个调用，该函数被正确调用，但是问题是正常的textarea不是单击特定按钮时，将转换为tinyMCE编辑器。 Please help to solve it below is my working code and one thing more after that there will be save button so on save button click the tinyMCE editor can be easily changed to normal textarea . 请在下面帮助解决它，这是我的工作代码，此后还有一个保存按钮，因此在保存按钮上单击tinyMCE编辑器可以轻松将其更改为正常textarea 。

index.php: index.php：

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
   function refreshdiv()
   {
    $.ajax({
    type:"POST",
    url: 'load_tinymce.php',
    cache:false,
    success:function(html){

    var mainDiv = $('.attach_tiny_editor');
    mainDiv.empty();  
    $(mainDiv).prepend(html);

    },
    beforeSend: function(){

    },
    complete: function(){


    }  
    });
    }

    refreshdiv();



});

$(document).ready(function(){

$(document.body).on('click', '#refresh_1' ,function(e){
      refreshdiv();

      tinyMCE.init({mode : "none"});
      tinyMCE.execCommand('mceAddControl', false, 'txt12');
});

$(document.body).on('click', '#refresh_2' ,function(e){
      refreshdiv();
      tinyMCE.execCommand('mceAddControl', false, 'txt13');
});

});

</script>
<div class="attach_tiny_editor">

</div>
<input type="button" id="refresh_1" value="refresh"/>

<input type="button" id="refresh_2" value="refresh"/>
</body>
</html>

load_tinymce.php load_tinymce.php

<div>
<textarea id="txt12">   </textarea>
<textarea id="txt13">   </textarea>
</div>

Answer 1

You need to put the tinymce initialisation into the ajax success handler function in order to get executed. 您需要将tinymce初始化放入ajax成功处理程序函数中才能执行。 Otherwise the textarea is not there when needed. 否则，需要时文本区域不存在。

EDIT : This will init only one editor! 编辑：这只会初始化一个编辑器！

$(document).ready(function()
{
   function refreshdiv()
   {
    $.ajax({
    type:"POST",
    url: 'load_tinymce.php',
    cache:false,
    success:function(html){

    var mainDiv = $('.attach_tiny_editor');
    mainDiv.empty();  
    $(mainDiv).prepend(html);

    tinymce.init({selector:'textarea#' + window.ed_id});

    },
    beforeSend: function(){

    },
    complete: function(){

    }  
    });
    }

    refreshdiv();
});

$(document.body).on('click', '#refresh_1' ,function(e){
      window.ed_id = 'txt12';
      refreshdiv();

      tinyMCE.init({mode : "none"});
      tinyMCE.execCommand('mceAddControl', false, 'txt12');
});

$(document.body).on('click', '#refresh_2' ,function(e){
      window.ed_id = 'txt13';          
      refreshdiv('txt13');
      tinyMCE.execCommand('mceAddControl', false, 'txt13');
});

单击按钮将textarea更改为tinyMCE编辑器

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-02 09:54:43

单击按钮将textarea更改为tinyMCE编辑器

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-02 09:54:43

解决方案1
1 已采纳 2015-11-02 09:54:43