下面是这个Bootstrap富文本编辑器summernote的完整攻略。

介绍

Summernote是一款基于Bootstrap的富文本编辑器，功能强大、轻量级、简单易用，支持文本、图片等多种格式的编辑，同时也有插件系统可供扩展。它支持Markdown语法，可在WYSIWYG和编码之间自由切换，也支持响应式布局和多种主题样式。

下载和安装

下载summernote文件的最新版本，将其包括在HTML文件中

<head>  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css">  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>  
</head>
<body>  
    <textarea id="summernote"></textarea>  
    <script>  
        $(document).ready(function() {  
            $('#summernote').summernote();  
        });  
    </script>  
</body>

常用功能

增加工具栏按钮

可以通过配置来增加工具栏按钮，例如，我们需要增加插入代码功能：

$('#summernote').summernote({  
  toolbar: [  
    ['style', ['style']],  
    ['font', ['bold', 'italic', 'underline', 'clear']],  
    ['fontname', ['fontname']],  
    ['color', ['color']],  
    ['para', ['ul', 'ol', 'paragraph']],  
    ['height', ['height']],  
    ['insert', ['picture', 'link', 'video', 'codeview']],  
    ['view', ['fullscreen', 'help']]  
  ],  
  onInit: function () {  
    $('.note-codeview').addClass('language-markup');  
  }  
});

插入图片

Summernote可以轻松地插入和上传图片。

$('#summernote').summernote({  
  height: 500,  
  tabsize: 2,  
  lang: 'zh-CN',  
  toolbar: [  
    ['style', ['style']],  
    ['font', ['bold', 'italic', 'underline', 'clear']],  
    ['fontname', ['fontname']],  
    ['fontsize', ['fontsize']],  
    ['color', ['color']],  
    ['para', ['ul', 'ol', 'paragraph']],  
    ['height', ['height']],  
    ['table', ['table']],  
    ['insert', ['link', 'picture']],  
    ['view', ['fullscreen', 'codeview', 'help']]  
  ],  
  callbacks: {  
    onImageUpload: function(files, editor, $editable) {  
      uploadImage(files[0], editor, $editable);  
    }  
  }  

});  

function uploadImage(file, editor, $editable) {  
  var url = URL.createObjectURL(file);  
  editor.insertImage($editable, url);  
}

上述代码会打开插入图片界面，可以选择本地的图片并上传，上传成功后可在编辑器中看到图片。

总结

在今天的攻略中，我们介绍了Summernote编辑器的基本用法，包括如何下载和安装，如何增加工具栏按钮，如何插入图片等。除此之外，Summernote还提供了更多的功能，如Markdown语法支持、响应式布局、多主题样式等。如果您对这个编辑器感兴趣，可以查看其官网详细了解。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：超漂亮的Bootstrap 富文本编辑器summernote - Python技术站

超漂亮的Bootstrap 富文本编辑器summernote

介绍

下载和安装

常用功能

增加工具栏按钮

插入图片

总结

相关文章