Skip to content

tryChangeActive

daniel edited this page May 7, 2026 · 3 revisions

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) 已改用全新架構,沒有這個方法了。

Clone this wiki locally