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,
});