複製及貼上

Blockly 支援複製、剪下及貼上多個內建元件，例如方塊、工作區註解和泡泡。

預設剪貼簿行為

Blockly 核心隨附鍵盤快速鍵，可剪下、複製或貼上方塊、工作區註解，以及實作 ICopyable、IDraggable 和 IDeletable 介面的任何其他元件。此外，還提供內容選單選項，可複製區塊。您可以視需要修改或移除這些預設快速鍵和選單項目。

在預設剪貼簿實作中，可複製的物件只能貼到複製來源的工作區，或是從浮動視窗複製時貼到目標工作區。也就是說，您可以將浮動視窗中的積木複製到該浮動視窗的目標工作區，但無法將積木從一個主要工作區複製到另一個工作區。

在工作區和分頁之間複製及貼上內容

如要允許使用者從一個工作區複製區塊，並貼到另一個工作區，甚至是貼到在另一個分頁中執行的應用程式副本工作區，可以安裝 @blockly/plugin-cross-tab-copy-paste 外掛程式。

自訂剪貼簿行為

如要使用不同的行為，可以解除安裝 Blockly 隨附的鍵盤快速鍵，然後安裝其他運作方式不同的快速鍵，藉此實作自訂剪貼簿。為方便執行這項操作，您可以使用 Blockly.clipboard 命名空間中的方法，複製、貼上或更精細地控制，例如設定物件的複製來源工作區。

可複製的自訂物件

如要讓任意項目與複製/貼上系統相容，可以使用五個介面：ICopyable、IDraggable 和 IDeletable 代表可複製的物件、ICopyData 代表複製的物件，以及 IPaster 代表可將複製資料還原為可複製物件的物件。每種 ICopyable 類型都需要相關聯的 IPaster，才能貼上該資料。

實作 ICopyable、IDraggable 和 IDeletable，且具有對應 IPaster 和 ICopyData 的任何物件，都會自動與預設剪貼簿系統搭配運作。

您幾乎不會想實作可複製的自訂項目或自訂貼紙 (例如多重選取外掛程式)，因為可複製的物件會經過算繪，而您無法將新的算繪物件新增至 Blockly。工作區中只能存在區塊、泡泡和工作區註解等已算繪的物件。

實作可複製項目

如要建立可複製的物件，您必須實作 ICopyable、IDraggable 和 IDeletable 介面。後兩者是必要介面，貼上的物件才能進行操作和刪除。

可選取

ICopyable 介面會擴充 ISelectable 介面，因此您也需要實作這些方法和屬性。

鍵盤快速鍵會根據所選物件判斷要複製的內容，因此必須選取物件。

class MyCopyable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

可複製

ICopyable 介面本身只有一個必要方法 toCopyData，這個方法會傳回可複製物件狀態的 JSON 可序列化表示法，可用於重新建立可複製物件。

複製資料也必須包含 paster 屬性，其中包含與貼上器相關聯的已註冊字串名稱，貼上器應貼上這項複製資料。如要進一步瞭解貼上器，請參閱「實作貼上器」。

class MyCopyable implements ICopyable {
  constructor(workspace, state) {
    this.workspace = workspace;
    this.myState = state;
  }

  toCopyData() {
    return {
      // This string matches the string used to register the paster.
      paster: 'MY_PASTER',
      state: this.myState,
    };
  }
}

ICopyable 也有選用方法 isCopyable，可傳回物件目前是否可複製。

可拖曳及刪除

如要瞭解如何導入 IDraggable 和 IDeletable，請參閱自訂可拖曳項目。

實作貼上工具

如要建立貼紙，請實作 IPaster 介面。這個介面只有一個方法 paste，會接收要貼上的項目副本資料、要貼上項目的工作區，以及選用的座標 (即要貼上項目的位置)。

class MyPaster implements IPaster {
  paste(copyData, workspace, coordinate) {
    return new MyCopyable(workspace, copyData.state);
    // Optionally position the copyable at the passed coordinate.
    // Optionally select the copyable after it is pasted.
  }
}

註冊

實作貼紙後，您必須註冊貼紙，才能從貼紙的 paster 屬性中，找出與特定副本資料相關聯的貼紙。

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());