Full Toolbar and Split-Screen

This displays a full feature of the header toolbar icons, inline toolbar icons, keyboard shortcuts for icons used for editing contents in the editor. It also shows the split-screen features and the indented tab features.

Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
  headerToolbar: {
    icons: 'heading|bold|italic|blockquote|strikethrough|horizontal-rule|code|link|code-block|unordered-list|ordered-list|tasklist|mention|image|table|'
  },
  inlineToolbar: 'heading|bold|italic|code|link|unordered-list',
  inlineShortcut: true,
  indentWithTab: true,
  splitScreen: {
    enabled: true,
  },
  toolbarEmoji: true,
});

Include Emojis

This lets you include cool emojis to your content. Start by inputting the emoji-prefix symbol - ":", followed by the emoji name you want. E.g - :smile The emoji dropdown is filtered according to your inputted value. By default, the symbol is the ":", but this can be changes in the emojiPrefix option. You can find the list of available emojis here

Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
  inlineEmoji: {
    enabled: true,
  }
});

Upload Images

This defines the upload image feature. This is configured to use the google firebase storage bucket.

Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
  uploadImage: {
    enabled: true,
    config: { storageBucket: 'your-firebase-app-name.appspot.com' },
  }
});

Autosaving

This automatically saves the textarea content that is being written when the textarea is on focus and will load it back in the future or when the page is refreshed. It saves at the time interval that is defined in the delay attribute. The content can also be saved manually by clicking on the save icon.

Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
  autoSave: {
    enabled: true,
    delay: 5000,
  }
});

Auto Use of FontAwesome

This automatically includes Font Awesome and can be added in the textarea input just like you would in an HTML markup

Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
  autoUseFontAwesome: true
});

Highlight Code

This highlights codes in particular with language.

Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
  highlightCode: true
});

Use HTML Attributes with special characters

You can also perform some cool features like defining inline CSS classes, and elements IDs and attributes with the use of curly braces - `{}`. In order to use this, Classes are defined with a period like so - `.class-1`. Ids are defined with an hash symbol - `#id-1`. Other attributes are defined just like you would for any HTML tag, like so - `aria-label="true"`. You can also define emphasized text like a note, create comment or higlight an image.

Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
  inlineAttributes: true,
});

Output HTML Markup

This syncs the text content of the editor to the default textarea and returns the content. Note that this method should be called when an action takes place; like an event listener in order to get the full content. See the editor content below.
Click the submit button to see HTML result.

Output
Code
const gheditor1 = ghEditor();
gheditor1.markDown({
  container: 'textarea-1', // id of textarea
});
const form = document.getElementById('form');
form.addEventListener('submit', () => {
  const output = gheditor1.syncValue();
  console.log(output);
});
View Guide