点击在redactor js所见即所得html编辑器中显示和编辑

Question

我有三个不同的 div 和 contenteditable="true"。并且我已经将 redactor 所见即所得工具栏设置为固定。

html:

<div id="toolbar_wrapper">
  <div id="toolbar">
  </div>
</div>

<div id="content">
  <div class="redactor redactor1" contenteditable="true">
    <h1>I am a Header</h1>
    <p>I am a paragraph.</p>
  </div>
  <div class="redactor redactor2" contenteditable="true">
    <h1>I am a Header</h1>
    <p>I am a paragraph.</p>
  </div>
  <div class="redactor redactor3" contenteditable="true">
    <h1>I am a Header</h1>
    <p>I am a paragraph.</p>
  </div>

css:

#toolbar {
  position: fixed;
  z-index: 10;
}

现在，当 div 上的任何一个（redactor1 或 redactor2 或 redactor3）被点击时，显示被点击的编辑器工具栏 div .并在 div 之外单击时隐藏。我怎么做？谢谢。

code.io

中的示例代码

Answer 1

将此代码添加到您的 js 文件

$(function()
{
    $('.redactor1').redactor({
        focus: true,
        toolbarExternal: '#toolbar'
    });

});

$(document).click(function(){
    $("#toolbar_wrapper").hide();
});
$("#toolbar_wrapper").click(function(e){
    e.stopPropagation();
  $("#toolbar_wrapper").css('display','block');
});
$(".redactor").click(function(e){
  e.stopPropagation();
    $("#toolbar_wrapper").css('display','block');
});

Answer 2

您需要为每个编辑器实例创建一个工具栏：

  <div id="toolbar_wrapper">
    <div class='toolbar' id="toolbar_for_1"></div>
    <div class='toolbar' id="toolbar_for_2"></div>
    <div class='toolbar' id="toolbar_for_3"></div>
  </div>

然后每次关注特定编辑器时打开相应的工具栏：

$(function() {
  $.each($('.redactor'), function(i){
    var toolbar_id = '#toolbar_for_' + (i + 1);
    $(this).redactor({
      focus: true,
      toolbarExternal: toolbar_id,
      focusCallback: function(e){
        $(".toolbar").hide();
        $(toolbar_id).show();
      }
    });
  });
})

查看工作示例here

点击在redactor js所见即所得html编辑器中显示和编辑

Click to display and edit in redactor js wysiwyg html editor

jquery

html

css

wysiwyg

redactor