diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js index 68a44d833..42935d8b3 100644 --- a/src/rich_text_editor/index.js +++ b/src/rich_text_editor/index.js @@ -109,7 +109,9 @@ export default () => { const classes = { actionbar: `${pfx}actionbar`, button: `${pfx}action`, - active: `${pfx}active` + active: `${pfx}active`, + inactive: `${pfx}inactive`, + disabled: `${pfx}disabled` }; const rte = new RichTextEditor({ el, @@ -165,6 +167,32 @@ export default () => { * } * } * }) + * // An example with state + * const isValidAnchor = (rte) => { + * // a utility function to help determine if the selected is a valid anchor node + * const anchor = rte.selection().anchorNode; + * const parentNode = anchor && anchor.parentNode; + * const nextSibling = anchor && anchor.nextSibling; + * return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A') + * } + * rte.add('toggleAnchor', { + * icon: `⫘`, + * state: (rte, doc) => { + * if (rte && rte.selection()) { + * // `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active + * return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE; + * } else { + * return btnState.INACTIVE; + * } + * }, + * result: (rte, action) => { + * if (isValidAnchor(rte)) { + * rte.exec('unlink'); + * } else { + * rte.insertHTML(`${rte.selection()}`); + * } + * } + * }) */ add(name, action = {}) { action.name = name; diff --git a/src/rich_text_editor/model/RichTextEditor.js b/src/rich_text_editor/model/RichTextEditor.js index b7b44da42..e6a63d96c 100644 --- a/src/rich_text_editor/model/RichTextEditor.js +++ b/src/rich_text_editor/model/RichTextEditor.js @@ -143,8 +143,6 @@ export default class RichTextEditor { btn.className = btn.className.replace(inactive, '').trim(); btn.className = btn.className.replace(disabled, '').trim(); - console.log(this); - // if there is a state function, which depicts the state, // i.e. `active`, `disabled`, then call it if (state) {