Jquery tinyMCE的一个实例，在多个文本区域之间移动？

使用tinyMCE jquery版本

我有一个内容页面，其中可能有许多可点击的文本。因此，当用户单击其中一个元素时，我们希望用包含文本的tinyMCE实例替换DIV

所以最初，我让它打电话

$.getScript('/js/tiny_mce/jquery.tinymce.js', function() {
    $(dummyTextarea).tinymce({
...tinyMCE initialise stuff
})

---

这是在div的onclick上。但是这当然是非常笨拙的，因为它会执行ajax请求等，并且每次单击某个内容时都会一次又一次地得到tinymce。因此，我想在页面加载时初始化一个tinyMCE实例，然后单击，将活动文本区域设置为我已经加载的tinyMCE实例。我似乎不知道如何使用jQueryTinymce版本做到这一点。这可能吗？有什么建议吗？

嗯。。。也许绝对定位TinyMCE编辑器，然后移动它以匹配文本div的位置和高度

var pos = $('#text_div_id').position();
var w = $('#text_div_id').width();
var h = $('#text_div_id').height();

$('#tinymce_instance_id').css({ 'position': 'absolute', 
                                'top': pos.top, 
                                'left': pos.left, 
                                'width': w + 'px',
                                'height': h + 'px' });

---

我认为这应该行得通，不过已经有一段时间没有使用TinyMCE了。

在document ready事件中，您可以调用getScript。这将把微小的字节拉入内存。然后在DIV click事件中，您可以根据需要初始化tinyMCE

$(function() {
    $.getScript('/js/tiny_mce/jquery.tinymce.js');
    $('DIV').click(function() {
        $(this).tinymce({ // initialization stuff });
    });
});

对我来说

$('DIV').click(function()  { ...

不起作用，所以这对我起作用：

//Notes:
// Create an empty div (with class "center") with the same width of the bar and use css("margin: auto")
// and modify ui.css like this:
// .mceExternalToolbar {position:fixed !important; top: 0px !important; z-index:1; display:none; }
// You can perform those changes with jquery as well.
// Use any HTML element (div, textarea, etc) with class ".ed" and an id, to convert it to tinyMCE editor on click.
// Create a PHP file to handle post.
$(document).ready(function() {
 $(".ed").tinymce({
  //(settings here)
  theme_advanced_toolbar_location : 'external', 
  theme_advanced_toolbar_align : 'left', 
  setup: function(ed){
   ed.onInit.add(function() { 
    $(".mceExternalToolbar").css('left', $("div.center").position().left);
    $("table.mceLayout").css('height', 'auto');
    ed.hide();
   });
  },
  save_onsavecallback: function(ed) {
   $(".ed").each(function (e) {
    $.post("save.php",{ id : $(this).attr("id"), body : $(this).html() },
     function(reply){
      //handle php response
      alert(reply);
     }
    );
   });
   ed.hide();
  }
 });
 //Activate editor on click
 $(".ed").click(function() {
  $(this).tinymce().show();
 });
 //Adjust mce Toolbar position again in center when window is resized
 $(window).bind("resize", function resizeWindow( e ) {
   $(".mceExternalToolbar").css('left', $("div.center").position().left);
 });
});

---

是的，这是一个比我的更整洁的解决方案。是的，更干净。我不知道为什么我自己没有看到这一点-需要更多的咖啡。非常感谢。