Question

使用tinyMCE jquery版本。

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

所以最初，我打电话给

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

那是在div的onclick上。但这当然是非常笨重的，因为它会做一个ajax请求等，并且每次点击某些东西时都会反复出现。因此，我想在页面加载时初始化一个tinyMCE实例，然后单击onclick，只需将活动textarea设置为我已经加载的tinyMCE实例。我似乎无法弄清楚如何使用jquery tinymce版本。这可能吗？有什么建议吗？

Answer 1

在文档就绪事件中，您可以调用getScript。这会将tinyMCE位拉入内存。然后在DIV点击事件中，您可以按需初始化tinyMCE。

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

Answer 2

对我来说，

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

Answer 3

嗯...也许绝对定位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。

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

3 个答案: