summernote安装布署

发布时间:2022-02-11 16:20:27 来源:青锋建站 作者:青锋建站
  summernote是一款基于bootstrap和jquery架构的轻量级响应式富文编辑器,由summernote负责维护。summernote支持Bootstrap 3.x.x to 4.x.x,大小(js+css: 100Kb),工作于主流的浏览器,如Safari, Chrome, Firefox, Opera, Edge and Internet Explorer 9+,支持的操作系统包括:Windows, MacOS, Linux。以下是青锋建站给大家分享在PHP开始项目中如何将summernote集成到后台。

下载summernote

  summernote下载可以直接到官网下载最新版本,官网地址是https://summernote.org,也可以直接使用官方提供的CDN来安装。

布署summernote

  由于summernote可以基于bootstrap和jquery,因此这里我们分开介绍。官方安装布骤-https://summernote.org/getting-started/
A-基于bootstrap简单布署summernote
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</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 href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

B-基于jquery简单布署summernote
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>without bootstrap</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello stand alone ui',
        tabsize: 2,
        height: 120,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </script>
  </body>
</html>
  以上就是青锋建站给大家介绍的summernote安装布署,后续summernote与PHP集成如何处理上传等问题请关注相关文档。青锋建站提供企业网站建设、软件开发服务,欢迎大家前来合作。

Copyright © 2016-2026 青锋建站 版权所有