Skip to content

Latest commit

 

History

History
128 lines (94 loc) · 4.87 KB

README.md

File metadata and controls

128 lines (94 loc) · 4.87 KB
Raw

文言齋 - Online IDE for wenyan-lang

https://ide.wy-lang.org/

Import external scripts

Import scripts to IDE by query string

https://ide.wy-lang.org?import&title=問天地好在&code=吾有一言。曰「「問天地好在。」」。書之。

Embed IDE

You can embed the Online IDE into your own website by using iframe.

Check out the live demo for more details.

<iframe src="https://ide.wy-lang.org/embed" height="300" width="500"></iframe>

The basic URL is https://ide.wy-lang.org/embed

Query Options

Config the IDE by using query strings.

Field Description Default
title The title of the file ""
code The wenyan script in the editor ""
autorun Execute the script on loaded false
show-compile Show the Compiled panel false
show-configs Show the configs buttons false
show-bars Show action bars in editor false
hide-output Hide output panel false
readonly Make file readonly false
output-hanzi Output numbers as hanzi false

Here are some example usages:

iFrame Communication

Get more controls over iframe by

<iframe src="https://ide.wy-lang.org/embed" id="editor"></iframe>

Sending

const editor = document.getElementById('editor')

// Change title
editor.contentWindow.postMessage({ action: 'title', value: 'New Title' }, '*')

// Update code
editor.contentWindow.postMessage({ action: 'code', value: '吾有一言。曰「「問天地好在。」」。書之。' }, '*')

// change to dark mode, (by specify `field` option, you can change other options as well)
editor.contentWindow.postMessage({ action: 'config', field: 'dark', value: true }, '*')

// re-run code
editor.contentWindow.postMessage({ action: 'run' }, '*')

// clear output
editor.contentWindow.postMessage({ action: 'clear' }, '*')

// change theme
editor.contentWindow.postMessage({ action: 'theme', value: 'Wenyan Dark' }, '*')
// or
editor.contentWindow.postMessage({ action: 'theme', value: { background: '#222' } }, '*')

Receiving

window.addEventListener('message', (e) => {
  // filtering, message from the ide always contains `source` filed.
  if (e.data.source === 'wenyan-ide') {
    if (e.data.action === 'change') {
      console.log('Code changed to ' + e.data.value)
    }
  }
})

Custom Buttons

Adding custom icon buttons to the UI is also possible

// config
editor.contentWindow.postMessage({ 
  action: 'custom', 
  value: {
    id: 'my-custom-button',
    icon: 'cog', // icon name follows https://iconify.design/
  },
}, '*')
// receive
window.addEventListener('message', (e) => {
  if (e.data.source === 'wenyan-ide') {
    if (e.data.action === 'custom' && e.data.id === 'my-custom-button') {
      console.log('My custom button got clicked!')
    }
  }
})

Custom UI Options

Field Description Default
id The id of the button Required
icon The icon name follows the iconify naming system One of icon and text required
bars Can be editor or output editor
align Place at left or right left
tooltip Tooltip to show on button hovered undefined
type Only support button for now button