javascript - 单击按钮时将文本区域更改为tinyMCE编辑器

标签 javascript jquery ajax tinymce

我想通过单击按钮将普通的 textarea 转换为 tinyMCE 编辑器。场景是,我的页面上有两个按钮,两个 textarea,从一个按钮单击一个 jquery 函数将被调用,从其他按钮单击第二个 jquery 函数将被调用。 > 按钮将被调用,该函数被正确调用,但问题是当单击特定按钮时,普通的 textarea 不会转换为 tinyMCEEditor。请帮助解决这个问题,下面是我的工作代码,之后还有一个保存按钮,因此在保存按钮上单击tinyMCE编辑器可以轻松更改为正常textarea .

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

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

最佳答案

您需要将tinymce初始化放入ajax成功处理函数中才能执行。否则,需要时文本区域不存在。

编辑:这只会启动一个编辑器!

$(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');
});

关于javascript - 单击按钮时将文本区域更改为tinyMCE编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33474798/

相关文章:

javascript - 谷歌、推特认证

javascript - 在表单中填充下拉选项时,使用过滤器或请求新数据更好?

javascript - Meteor.js 中的 Mapbox 动态标记

javascript - 使用 JSONP 加载 html 页面

javascript - 选择两个具有相同名称、id、值的单选按钮

javascript - 从wysihtml5编辑器获取当前选定的文本

php - 如何使用 jquery/javascript 每秒更新 PHP 当前时间戳

javascript - 如何处理react-redux应用中加载中断的情况

javascript - 如何使用knockoutjs模板绑定(bind)来绑定(bind)依赖模板?

javascript - 正则表达式需要一些帮助