tryChangeActive - daniel-qa/Vue GitHub Wiki

tryChangeActive 是 wangEditor（v4 及以前版本）的一個 自訂 Menu 介面方法。

  • 說明

tryChangeActive 是在每次編輯區域的 selection 發生變化時（例如滑鼠點擊、鍵盤操作），wangEditor 會自動呼叫每個 menu 的 tryChangeActive()，重新計算該 menu 的「啟用狀態」（active/inactive）。

Programmer All

簡單來說，它的用途是：判斷目前游標所在位置，決定工具列按鈕要不要顯示為「已啟用」狀態（例如游標在粗體文字內，B 按鈕就會亮起）。

  • 型別定義

在 TypeScript 的 interface 定義中，tryChangeActive 是 MenuInstance 上的一個可選方法：

tsinterface MenuInstance {
  type: 'click' | 'droplist' | 'panel';
  $elem: Element;
  tryChangeActive?(): void;
  onClick?(event: Event): void;
}

Tessl

自訂 Menu 的典型用法（Vue 2 + wangEditor v4）

js

class MyMenu extends BtnMenu {
  constructor(editor) {
    const $elem = E.$(`<div class="w-e-menu"><button>My</button></div>`)
    super($elem, editor)
  }

  clickHandler() {
    // 按鈕點擊邏輯
  }

  // 每次 selection 變化時自動觸發
  tryChangeActive() {
    // 根據條件決定按鈕是否亮起
    if (/* 某個條件 */) {
      this.active()    // 加上 .w-e-active class
    } else {
      this.unActive()  // 移除 .w-e-active class
    }
  }
}

注意

這是 wangEditor v4（wangeditor npm 包） 的概念，用於自訂 Menu。

wangEditor v5（@wangeditor/editor） 已改用全新架構，沒有這個方法了。

⚠️ **GitHub.com Fallback** ⚠️