Skip to content

Using DictTango Built‐in JavaScript Functions to Add AI Features

Jump to bottom
Jimex edited this page May 14, 2026 · 1 revision

DictTango provides several built-in JavaScript functions that allow users to add AI features to MDX content without repackaging the MDX file. The effect is that an AI button is added after the content. When the button is clicked, it invokes the specified AI Prompt and displays the AI output in real time.

These built-in functions are:

  • __addAI_ByName
  • __addAI_ByTag
  • __addAI_ByCssClass
  • __addAI_BySelector

Usage

  1. View the HTML source content of the MDX file and identify the HTML elements where AI functionality should be added.

Tip: Go to Settings → Dictionary Settings and enable Debug Mode. Then use the dictionary to look up a word. The related HTML file will be generated in the DictTango/Logs directory on your SD card. Open the HTML file directly to inspect its content.

  1. In Dictionary Management, edit the relevant dictionary and add the corresponding function and parameters to the dictionary’s inline script.

Add AI Buttons in Bulk by Element Name

Function Name: __addAI_ByName(elementName, promptName, outputElementId, iconSize)

Parameters

elementName The name of the HTML element.

promptName The name of the Prompt added in DictTango. Refer to [this page](https://github.com/Jimex/DictTango-Android/wiki/DictTango-%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3?utm_source=chatgpt.com) for how to add AI Prompts.

outputElementId The target HTML element for displaying AI results.

  • If null, the AI result will automatically appear below the current content.
  • If set to "_blank", the AI result will be displayed in a popup window at the bottom.

iconSize The icon size of the button.

  • If omitted or null, the default size will be used.

Applicable Scenario

<div name="word">徘徊</div>

<div name="word">开心</div>

<div name="word">冲突</div>

<div name="word">畅顺</div>

Example Code

__addAI_ByName('word','CHINESE_WORD_DEF');

__addAI_ByName('word','CHINESE_WORD_DEF', '_blank');

__addAI_ByName('word','CHINESE_WORD_DEF', '_blank', '1em');

Add AI Buttons in Bulk by CSS Class

Function Name: __addAI_ByCssClass(cssClass, promptName, outputElementId, iconSize)

Parameters

cssClass The CSS class of the HTML element.

promptName Same as __addAI_ByName.

outputElementId Same as __addAI_ByName.

iconSize Same as __addAI_ByName.

Applicable Scenario

<span class="pg_en">I am a boy</span>

<span class="pg_cn">我是一个男生</span>

<span class="pg_en">I am a girl</span>

<span class="pg_cn">我是一个女生</span>

Example Code

__addAI_ByCssClass('pg_en','CHINESE_WORD_DEF');

__addAI_ByCssClass('pg_cn','CHINESE_WORD_DEF', '_blank');

__addAI_ByCssClass('pg_en','CHINESE_WORD_DEF', '_blank', '1em');

Add AI Buttons in Bulk by Tag Name

Function Name: __addAI_ByTag(tagName, promptName, outputElementId, iconSize)

Parameters

tagName The HTML tag name, such as span, div, or any custom-defined tag.

promptName Same as __addAI_ByName.

outputElementId Same as __addAI_ByName.

iconSize Same as __addAI_ByName.

Applicable Scenario

<en>I am a boy</en>

<cn>我是一个男生</cn>

<en>I am a girl</en>

<cn>我是一个女生</cn>

Example Code

__addAI_ByTag('en','CHINESE_WORD_DEF');

__addAI_ByTag('cn','CHINESE_WORD_DEF', '_blank');

__addAI_ByTag('en','CHINESE_WORD_DEF', '_blank', '1em');

Advanced Usage: Add AI Buttons in Bulk Using Selectors

Function Name: __addAI_BySelector(selector, promptName, outputElementId, iconSize)

Parameters

selector A DOMString containing one or more selectors, such as span[data-lang='en'].

For more information about selectors, refer to: [MDN querySelectorAll Documentation](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll?utm_source=chatgpt.com)

promptName Same as __addAI_ByName.

outputElementId Same as __addAI_ByName.

iconSize Same as __addAI_ByName.

Applicable Scenario

<span data-lang="en">I am a boy</span>

<span data-lang="cn">我是一个男生</span>

<span data-lang="en">I am a girl</span>

<span data-lang="cn">我是一个女生</span>

Example Code

__addAI_BySelector("span[data-lang='en']", 'CHINESE_WORD_DEF');

__addAI_BySelector("span[data-lang='en']", 'CHINESE_WORD_DEF','_blank');

__addAI_BySelector("span[data-lang='cn']", 'CHINESE_WORD_DEF','_blank', '1em');

English Wiki

中文文档

Clone this wiki locally