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

Question

我有三个不同的 contenteditable="true" 的 div。我已将编辑器所见即所得工具栏设置为固定。

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