資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中將 Summernote 編輯器新增到網頁？
要在網頁中新增 Summernote 編輯器，我們首先需要在 HTML 文件的頭部包含 Summernote 的 CSS 和 JS 檔案。接下來，我們需要透過在特定的文字區域或 div 元素上呼叫 Summernote 函式來初始化 Summernote 編輯器。最後，我們可以透過將選項作為物件傳遞給 Summernote 函式來自定義編輯器的選項和功能。
讓我們首先了解什麼是 Summernote 編輯器。
什麼是 Summernote？
Summernote 是一個 JavaScript 庫，允許在網頁中建立和編輯富文字。
它是一個所見即所得 (WYSIWYG) 編輯器，提供了一個使用者友好的介面來格式化文字。
Summernote 支援各種功能，例如文字格式化、列表、影像、影片和連結。
它易於整合和自定義，並提供各種選項和外掛。
Summernote 是開源的並且積極維護，擁有強大的社群和定期更新。
我們將使用 HTML + jQuery 來整合 Summernote 編輯器。讓我們討論一下相同的方法。
方法
在 HTML 文件的頭部包含 Summernote CSS 和 JavaScript 檔案 -
<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 檔案中，在文字區域元素上初始化 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 編輯器現在應該在您的網頁上正常工作了。
示例
<!DOCTYPE html>
<html>
<head>
<title>Summernote Editor Example</title>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>
</head>
<body>
<textarea id="summernote"></textarea>
<button id="save">Save</button>
<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>
</body>
</html>
解釋
在這個示例中，我們有一個 id 為 "summernote" 的文字區域元素，Summernote 編輯器將顯示在此處。我們在文件的頭部包含了 Summernote CSS 和 JavaScript 檔案，並且還包含了 jQuery 庫，因為它是 Summernote 的依賴項。
在指令碼部分，我們使用一些選項在文字區域元素上初始化 Summernote 編輯器。我們還有一個 id 為 "save" 的按鈕，當點選它時，將使用 ajax 請求將編輯器的內容儲存到伺服器。
3K+ 瀏覽量
