如何在包装器 div 内启用 Froala 编辑器？

Question

我正在尝试在按钮标签上应用 Froala 编辑器。 但我希望它使用包装器 div 单击打开。 我在这个问题上添加了两个演示，请检查，任何人都知道解决方案，请帮助我。

演示1：

 // find elements var banner = $("#banner-message") var button = $("button") // handle click and add class button.on("click", function(){ new FroalaEditor('#editor', { events: { contentChanged: function () { console.log ('content changed....'); } } }); });

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; }

 <script src="https://cdn.jsdelivr.net/npm/froala-editor@3.0.5/js/froala_editor.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/froala-editor@3.0.5/css/froala_editor.pkgd.min.css" rel="stylesheet"/> <div id="banner-message"> <p>Hello World</p> <button id="editor">Change text</button> </div>

第一个片段将在弹出窗口中打开按钮文本以在第二次单击时进行编辑。

演示2：

 // find elements var banner = $("#banner-message") var button = $("button") // handle click and add class banner.on("click", function(){ new FroalaEditor('#editor', { events: { contentChanged: function () { console.log ('content changed'); } } }) })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; }

 <link href="https://cdn.jsdelivr.net/npm/froala-editor@3.0.5/css/froala_editor.pkgd.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/froala-editor@3.0.5/js/froala_editor.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <p>Hello World</p> <button id="editor">Change color</button> </div>

在第二个演示中，我使用了包装器单击事件来初始化 froala 编辑器。

我的需要：在单击横幅消息div 时，我想打开 froala 编辑器弹出窗口来编辑按钮内容。

如果有人能帮我解决这个问题，那就太好了。 提前致谢。

Answer 1

这是您可以尝试的代码：

var test= new FroalaEditor('#editor', {
   events: {
   contentChanged: function () {
        console.log ('content changed');
      }
   }
});

还有一个正在运行的 Jsfiddle 示例：单击此处