Droplet 项目教程

2024-09-25 15:27:08作者：裘旻烁

1. 项目介绍

Droplet 是一个开源的文本编辑器项目，旨在将“块编程”重新构想为“文本编辑”。它特别适用于初学者使用 Scratch 等语言进行编程，同时也是移动设备上（键盘不方便使用时）的理想文本编辑器。Droplet 通过浏览器ify 包提供，可以使用 npm、requirejs 或作为浏览器全局变量来嵌入。

2. 项目快速启动

安装

首先，克隆 Droplet 项目到本地：

git clone https://github.com/PencilCode/droplet.git
cd droplet

构建

使用 npm 安装依赖并构建项目：

npm install
grunt all

嵌入 Droplet

在 HTML 文件中嵌入 Droplet 编辑器：

<html>
<head>
  <style>
    #editor {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<script src="dist/droplet-full.min.js"></script>
<script src="index.coffee" type="text-coffeescript"></script>
<div id="editor"></div>
</html>

<script>
  var editor = new droplet.Editor(document.getElementById('editor'), {
    mode: 'coffeescript',
    modeOptions: {
      functions: [
        { fd: { command: true, color: 'red' } },
        { bk: { command: true, color: 'blue' } },
        { sin: { command: false, value: true, color: 'green' } }
      ],
      categories: {
        conditionals: { color: 'purple' },
        loops: { color: 'green' },
        functions: { color: '#49e' }
      }
    },
    palette: [
      {
        name: 'Palette category',
        color: 'blue',
        blocks: [
          { block: "for [1..3]\n ``", title: "Repeat some code" },
          { block: "playSomething()", expansion: "playSomething 'arguments', 100, 'too long to show'" }
        ]
      }
    ]
  });

  editor.setValue('''
    for i in [1..10]
      document.write 'hello world'
  ''');
</script>