All Extension
This section will cover the all extensions of the editor.
Usage
This is where you can see all the extensions in action.
As String
As HTML
<p>Refer to Notes on how to use it Better</p>Font Family with Internal Styles
Imports
ts
import {
AllExtensions,
CharacterCount,
ColorHighlighter,
CustomValueTag,
Editor,
HLTextEditor,
Indent,
Mention,
RTEControlBlockQuote,
RTEControlBold,
RTEControlCode,
RTEControlColorPicker,
RTEControlEmbedImage,
RTEControlEmbedLink,
RTEControlEmbedVideo,
RTEControlFontFamily,
RTEControlFontSize,
RTEControlHistory,
RTEControlIndent,
RTEControlItalic,
RTEControlLineHeight,
RTEControlList,
RTEControlResetStyles,
RTEFloatingToolbar,
RTEControlStrike,
RTEControlSubscript,
RTEControlSuperscript,
RTEControlTable,
RTEControlTextAlignment,
RTEControlTextBlocks,
RTEControlToolbarSeparator,
RTEControlUnderline,
createSuggestion,
getHTMLWithFonts,
History,
} from '@platform-ui/rte'html
<template>
<HLTextEditor :editor="editor">
<template #header>
<RTEControlHistory :editor="editor" type="undo" />
<RTEControlHistory :editor="editor" type="redo" />
<RTEControlToolbarSeparator />
<RTEControlBold :editor="editor" />
<RTEControlUnderline :editor="editor" />
<RTEControlItalic :editor="editor" />
<RTEControlStrike :editor="editor" />
<RTEControlToolbarSeparator />
<RTEControlResetStyles :editor="editor" />
<RTEControlResetStyles :editor="editor" reset="document" />
<RTEControlBlockQuote :editor="editor" />
<RTEControlTextAlignment :editor="editor" align="left" />
<RTEControlTextAlignment :editor="editor" align="center" />
<RTEControlTextAlignment :editor="editor" align="right" />
<RTEControlTextAlignment :editor="editor" align="justify" />
<RTEControlToolbarSeparator />
<RTEControlColorPicker :editor="editor" />
<RTEControlColorPicker :editor="editor" colorFor="highlight" />
<RTEControlFontFamily :editor="editor" />
<RTEControlToolbarSeparator />
<RTEControlFontSize :editor="editor" />
<RTEControlToolbarSeparator />
<RTEControlTextBlocks :editor="editor" />
<RTEControlToolbarSeparator />
<RTEControlLineHeight :editor="editor" />
<RTEControlToolbarSeparator />
<RTEFloatingToolbar trigger="click" tooltip-label="List Options">
<RTEControlList :editor="editor" listType="bulletList" />
<RTEControlList :editor="editor" listType="circleList" />
<RTEControlList :editor="editor" listType="squareList" />
<RTEControlList :editor="editor" listType="orderedList" />
<RTEControlList :editor="editor" listType="lowerAlphaList" />
<RTEControlList :editor="editor" listType="lowerGreekList" />
<RTEControlList :editor="editor" listType="lowerRomanList" />
<RTEControlList :editor="editor" listType="upperAlphaList" />
<RTEControlList :editor="editor" listType="upperRomanList" />
</RTEFloatingToolbar>
<RTEControlToolbarSeparator />
<RTEControlSubscript :editor="editor" />
<RTEControlSuperscript :editor="editor" />
<RTEControlCode :editor="editor" />
<RTEControlCode :editor="editor" type="block" />
<RTEControlEmbedImage :editor="editor" />
<RTEControlEmbedLink :editor="editor" />
<RTEControlEmbedVideo :editor="editor" />
<RTEControlIndent :editor="editor" />
<RTEControlTable :editor="editor" :action="'insertTable'" />
<RTEControlTable
:editor="editor"
:action="'deleteTable'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'deleteColumn'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'deleteRow'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'addColumnBefore'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'addColumnAfter'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'addRowBefore'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'addRowAfter'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'mergeCells'"
v-if="editor?.isActive('table')"
/>
<RTEControlTable
:editor="editor"
:action="'splitCell'"
v-if="editor?.isActive('table')"
/>
</template>
<template #footer>
<div class="flex flex-row justify-between w-full">
Footer
<HLText size="md" weight="regular">
{{ editor.storage.characterCount.characters() }} / 280 characters
</HLText>
</div>
</template>
</HLTextEditor>
</template>ts
import { ref } from 'vue'
import { HLText, HLButton } from '@platform-ui/highrise'
import {
AllExtensions,
CharacterCount,
ColorHighlighter,
CustomValueTag,
Editor,
HLTextEditor,
Indent,
Mention,
RTEControlBlockQuote,
RTEControlBold,
RTEControlCode,
RTEControlColorPicker,
RTEControlEmbedImage,
RTEControlEmbedLink,
RTEControlEmbedVideo,
RTEControlFontFamily,
RTEControlFontSize,
RTEControlHistory,
RTEControlIndent,
RTEControlItalic,
RTEControlLineHeight,
RTEControlList,
RTEControlResetStyles,
RTEFloatingToolbar,
RTEControlStrike,
RTEControlSubscript,
RTEControlSuperscript,
RTEControlTable,
RTEControlTextAlignment,
RTEControlTextBlocks,
RTEControlToolbarSeparator,
RTEControlUnderline,
createSuggestion,
getHTMLWithFonts,
History,
} from '@platform-ui/rte'
const content = ref()
const HTML = ref()
const HtmlWithFont = ref()
// Initial mention items
const defaultItems = [
'John Doe',
'Jane Smith',
'Robert Johnson',
'Alex Martinez',
'Taylor Swift',
'Bruce Wayne',
'Clark Kent',
'Diana Prince',
]
// Create a suggestion with initial items
const mentionSuggestion = createSuggestion(defaultItems)
const customMenus = [
{
menuId: 'contact',
menuTitle: 'Contacts',
items: [
{
label: 'Full Name',
value: '{{contact.name}}',
key: 'contact.name',
},
{
label: 'First Name',
value: '{{contact.first_name}}',
key: 'contact.first_name',
},
{
label: 'Last Name',
value: '{{contact.last_name}}',
key: 'contact.last_name',
},
{ label: 'Email', value: '{{contact.email}}', key: 'contact.email' },
{ label: 'Phone', value: '{{contact.phone}}', key: 'contact.phone' },
{
label: 'Phone (raw format)',
value: '{{contact.phone_raw}}',
key: 'contact.phone_raw',
},
{
label: 'Company Name',
value: '{{contact.company_name}}',
key: 'contact.company_name',
},
{
label: 'Full Address',
value: '{{contact.full_address}}',
key: 'contact.full_address',
},
{
label: 'Address 1',
value: '{{contact.address1}}',
key: 'contact.address1',
},
{ label: 'City', value: '{{contact.city}}', key: 'contact.city' },
{ label: 'State', value: '{{contact.state}}', key: 'contact.state' },
{
label: 'Country',
value: '{{contact.country}}',
key: 'contact.country',
},
{
label: 'Postal Code',
value: '{{contact.postal_code}}',
key: 'contact.postal_code',
},
{
label: 'Date of birth',
value: '{{contact.date_of_birth}}',
key: 'contact.date_of_birth',
},
{
label: 'Source',
value: '{{contact.source}}',
key: 'contact.source',
},
{
label: 'Website',
value: '{{contact.website}}',
key: 'contact.website',
},
{ label: 'ID', value: '{{contact.id}}', key: 'contact.id' },
],
},
]
const menuItems = customMenus[0].items
const editor = new Editor({
content: 'Refer to Notes on how to use it Better',
extensions: [
CharacterCount.configure({
limit: 280,
}),
History,
AllExtensions.configure({}),
CustomValueTag.configure({
data: menuItems,
}),
ColorHighlighter,
Indent,
Mention.configure({
suggestion: mentionSuggestion,
HTMLAttributes: {
class: 'mention',
},
}),
],
onUpdate({ editor }) {
content.value = editor.getText()
HTML.value = editor.getHTML()
HtmlWithFont.value = getHTMLWithFonts(editor.getHTML())
},
})
const setContent = () => {
const content = window.prompt('Paste the HTML', `<div><p>Hi</p></div>`)
if (content) {
editor.commands.setContent(content)
}
}