如何在包裝器 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 示例：單擊此處