如何在网页中添加Summernote编辑器

在本文章中，我们将了解Summernote编辑器及其使用方法，并通过示例了解其实现。Summernote编辑器是一个免费且开源的基于Bootstrap和jQuery的超级简单所见即所得编辑器。它是一个JavaScript库，可用于构建在线所见即所得编辑器。它由一个庞大的社区在MIT许可下维护。它易于使用且包含许多可定制的选项。它可以轻松地在React、Django、Angular等任何框架中实现。

特点：

轻量级富文本编辑器
简单安装
与任何框架轻松集成
简单的用户界面
提供许多定制选项
免费且开源
交互式所见即所得编辑

在我们网页中使用Summernote编辑器有两种方法：

使用从官方网站下载的已编译和压缩的CSS和JavaScript文件。
使用可用的CDN链接来加载Summernote CSS和js、jQuery和Bootstrap。

我们可以使用以上任一方法来构建带有文本编辑器和内容的静态网站。

步骤：

首先，从官方网站下载已编译和压缩的Summernote版本。
解压并将其放置在当前工作文件夹中。
- 创建一个index.html文件，并在<head>标签中声明Bootstrap和jQuery链接。
- 完成这些步骤后，项目结构将如下图所示。

导入Summernote:

首先，让我们在index.html文件中从cdn导入Bootstrap。以下所有代码都应该放在Head标签中

<!– Include libraries(jQuery, bootstrap) –>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css” rel=”stylesheet”/>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>

接下来导入summernote的CSS和JS文件。

<link href=”/src/summernote-0.8.18-dist/summernote-bs4.min.css” rel=”stylesheet”/>
<script src=”/src/summernote-0.8.18-dist/summernote-bs4.min.js”></script>

现在在<body>标签中，初始化summernote编辑器。

<div id=”myeditor”></div>
<script>
 $(document).ready(function() {$ ("#myeditor").summernote({
        placeholder: "Write your content here",
        height: 200,
    });
});
</script>

现在，我们的文本编辑器已经初始化。

示例:这个示例说明了如何使用Summernote编辑器来构建并简化web页面中的编辑器。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" /> 
    <title>GeeksforGeeks Editor</title> 
    <link href= 
"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.5.1.min.js"> 
    </script> 
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
    </script> 
    <link rel="stylesheet"
        href="/src/summernote-0.8.18-dist/summernote-bs4.min.css" /> 
    <script src="/src/summernote-0.8.18-dist/summernote-bs4.min.js"></script> 
    <link rel="stylesheet"
        href="/src/summernote-0.8.18-dist/summernote.css" /> 
    <script src="/src/summernote-0.8.18-dist/summernote.js"></script> 
</head> 

<body> 
    <h1>GeeksforGeeks Editor</h1> 
    <div id="myeditor"></div> 
    <button type="button"
            class="btn btn-success"
            onclick="showContent()"> Show 
    </button> 

    <div id="myContent" class="container"></div> 

    <script> 
     $(document).ready(function() {$ ("#myeditor").summernote({ 
            placeholder: "Write your content here", 
            height: 200, 
        }); 
    }); 

    function showContent() { 
        document.getElementById("myContent").innerHTML = 
        $("#myeditor").summernote("code"); 
    } 
    </script> 
</body> 

</html>

输出:

如何在网页中添加Summernote编辑器