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

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

特征：

• 轻量级富文本编辑器
• 简易安装
• 与任何框架轻松集成
• 简单的用户界面
• 有很多定制可供选择。
• 免费和开源
• 交互式所见即所得编辑

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

• 使用从他们的官方网站下载的预编译和缩小版本的 CSS 和 JavaScript 文件。
• 使用 Summernote CSS & js、jQuery 和 Bootstrap 的可用 CDN 链接。

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

方法：

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

导入 Summernote：

• 首先，让我们从 index.html 文件中的 CDN 导入 Bootstrap。以下所有代码都应放在Head Tags 内。

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

• 现在在 标签中，初始化summernote 编辑器。

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

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

示例：此示例说明了使用 Summernote 编辑器在网页中构建和简化编辑器。

HTML

  

    
    
    
    GeeksforGeeks Editor
    
    
    
    
    
    
    
    
    

  

    GeeksforGeeks Editor
    
     Show 
    
  
    
  
    
    $(document).ready(function() {
        $("#myeditor").summernote({
            placeholder: "Write your content here",
            height: 200,
        });
    });
  
    function showContent() {
        document.getElementById("myContent").innerHTML = 
        $("#myeditor").summernote("code");
    }
    

  

输出：

支持的浏览器：

• 谷歌浏览器
• 火狐
• 微软边缘
• IE浏览器
• 歌剧
• 苹果浏览器

参考：https://summernote.org/