在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 引入必要的样式和脚本文件 -->
  <link rel="stylesheet" href="bootstrap.min.css">
  </link>
  <script src="jquery-3.5.1.min.js"></script>
  <script src="bootstrap.min.js"></script>

  <link rel="stylesheet" href="./summernote/summernote.min.css">
  <!-- <script src="./summernote/summernote.min.js"></script> -->
  <script src="./summernote/summernote.js"></script>
  <script src="./summernote/summernote-image-attributes.js"></script>
  <script src="./summernote/en-us.js"></script>
  <script src="./summernote/summernote-zh-CN.min.js"></script>
 
  <!-- 引入自定义组件 -->
  <script src="./summernote/summernote-component.js"></script>

  <style>
    .modal-backdrop {
      display: none !important;
    }

    .first-line-indent {
      text-indent: 2em;
      /* 2em 是一个常见的首行缩进值 */
    }
  </style>
</head>

<body>
  <div style="height: 500px;" id="summernote1" class="summernote"></div>
  <!-- <button id="summernote1-submit">获取富文本 1</button> -->

  <div style="height: 500px;" id="summernote2" class="summernote"></div>
  <div style="height: 500px;" id="summernote3" class="summernote"></div>
  <div style="height: 500px;" id="summernote4" class="summernote"></div>
  <div style="height: 500px;" id="summernote5" class="summernote"></div>
  <div style="height: 500px;" id="summernote6" class="summernote"></div>
  <!-- <button id="summernote2-submit">获取富文本 2</button> -->


  <button onclick="getData()">获取</button>
  <script>
    // 如果需要额外的操作或自定义逻辑，可以在这里添加
    function getData() {
      let data = SummernoteComponent.getContent('#summernote1');
      console.log(data)
    }
    SummernoteComponent.setContent('#summernote1', '<h1>123</h1>')
    // SummernoteComponent.init('#summernote1', ,'123')
  </script>
</body>

</html>

git地址
https://gitee.com/lilikang/summernote.git

# javascript # git # 开发语言
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

设备树DTS-【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】

avatar 开源鸿蒙跨平台开发者社区

鸿蒙ArkUI性能调优实战：从卡顿根因到全链路解决方案

开发者在进行鸿蒙应用开发时，大多停留在页面编写、接口请求、组件堆叠的基础业务层面，一旦面对大数据量渲染、高频列表刷新、复杂状态联动场景，就会频繁出现等性能问题。与 Android、React Native 跨端框架不同，鸿蒙 ArkUI 拥有独立的渲染机制与系统调度体系，卡顿成因与优化逻辑完全差异化。结合实际商业项目，从五个维度，完整梳理鸿蒙全链路性能优化方案ArkUI 采用：组件嵌套层级过深、布

avatar 开源鸿蒙跨平台开发者社区

Flutter 鸿蒙化实战：flutter_local_notifications 适配 OpenHarmony，本地通知能力开箱即用

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。为了解决这个问题，对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。本篇是系列文章之一，主角是—

avatar 开源鸿蒙跨平台开发者社区