如何用Javascript將Summernote Editor加入網頁？

要在網頁中新增 Summernote 編輯器，我們首先需要在 HTML 文件的頭部包含 Summernote CSS 和 JS 檔案。接下來，我們需要透過呼叫 Summernote 函數來在特定文字區域或 div 元素上初始化 Summernote 編輯器。最後，我們可以透過將選項作為物件傳遞給 Summernote 函數來自訂編輯器的選項和功能。

我們先來了解什麼是Summernote編輯器。

Summernote 是什麼？

• Summernote 是一個 JavaScript 函式庫，允許在網頁中建立和編輯富文本。

• 它是一個 WYSIWYG（所見即所得）編輯器，提供使用者友善的文字格式設定介面。

• Summernote 支援多種功能，例如文字格式、清單、圖像、影片和連結。

• 它易於整合和自訂，提供多種選項和外掛程式。

• Summernote 是開源的並且積極維護，擁有強大的社群和定期更新。

我們將使用 HTML jQuery 來整合 Summernote 編輯器。讓我們討論同樣的方法。

方法

• 將 Summernote CSS 和 JavaScript 檔案包含在 HTML 文件的頭部 -

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>

• 在 HTML 中建立一個要顯示 Summernote 編輯器的文字區域元素 -

<textarea id="summernote"></textarea>

• 在 JavaScript 檔案中，在 textarea 元素上初始化 Summernote 編輯器 -

#

$(document).ready(function() {
   $('#summernote').summernote();
});

• 如果您想自訂 Summernote 編輯器的選項，可以將選項物件傳遞給 Summernote() 函數 -

$(document).ready(function() {
   $('#summernote').summernote({
      height: 300, // set editor height
      minHeight: null, // set minimum height of editor
      maxHeight: null, // set maximum height of editor
      focus: true // set focus to editable area after initializing summernote
   });
});

• 要存取編輯器的內容，您可以使用 code() 函數 -

var content = $('#summernote').summernote('code');

• 要設定編輯器的內容，您可以使用 code() 函數並將內容作為字串傳遞 -

$('#summernote').summernote('code', '<p>This is the content of the editor.</p>');

• 使用ajax方法將內容儲存到伺服器 -

$('#save').click(function(){
   var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
   $('.summernote').destroy();
   $.ajax({
      url: '/save',
      type: 'post',
      data: {content: aHTML},
      success: function(){
         alert('Your content was successfully saved');
      }
   });
});

就是這樣！您的 Summernote 編輯器現在應該可以在您的網頁上運行了。

範例

   
   
   
   

   
      <textarea id="summernote"></textarea>
      Save
      <script>
         $(document).ready(function() {
            $('#summernote').summernote({
               height: 300, // set editor height
               minHeight: null, // set minimum height of editor
               maxHeight: null, // set maximum height of editor
               focus: true // set focus to editable area after initializing summernote
            });
         });
         $('#save').click(function(){
            var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
            $('.summernote').destroy();
            $.ajax({
               url: '/save',
               type: 'post',
               data: {content: aHTML},
               success: function(){
                  alert('Your content was successfully saved');
               }
            });
         });
      </script>
   

說明

在這個範例中，我們有一個 id 為「summernote」的 textarea 元素，Summernote 編輯器將會出現在其中。我們在文件的頭部包含了 Summernote CSS 和 JavaScript 文件，也包含了 jQuery 函式庫，因為它是 Summernote 的依賴項。

在腳本部分，我們使用一些選項在 textarea 元素上初始化 Summernote 編輯器。我們還有一個 ID 為「save」的按鈕，點擊該按鈕將使用 ajax 請求將編輯器的內容儲存到伺服器。

以上是如何用Javascript將Summernote Editor加入網頁？的詳細內容。更多資訊請關注PHP中文網其他相關文章！