Data Attributes

Data attributes are used to add additional information to the HTML content. They are used to add additional information to the HTML content.

Basic Usage

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlHistory :editor="editor" type="undo" />
      <RTEControlHistory :editor="editor" type="redo" />
      <RTEControlEmbedImage :editor="editor" />
      <RTEControlEmbedLink :editor="editor" />
    </template>
  </HLTextEditor>
</template>

ts

import { ref } from 'vue'
import {
  AllExtensions,
  Editor,
  HLTextEditor,
  RTEControlEmbedImage,
  RTEControlEmbedLink,
  RTEControlHistory,
  History,
} from '@platform-ui/rte'

const htmlContent = `
  <h1 id="main-title" data-heading="h1" class="header ">Welcome to the HTML Example</h1>
  <div class="highlight" id="intro" data-info="intro-text" aria-describedby="intro-desc">This is an introductory paragraph with <em class="text-italic" id="emphasized" data-note="important">emphasized</em> text.Here's another piece of text that is.</div><strong class="text-bold" id="strong-text" data-note="very-important">strongly emphasized</strong>
  <div id="intro-desc" hidden>This paragraph describes the introductory text.</div><img src="https://images.unsplash.com/photo-1587682205729-f29187da8774" width=320 height=320 alt="Example Image" id="example-img" class="image-style" data-img-type="example" aria-hidden="true"><i class="text-italic" id="italic-text" data-style="italic">italic</i><ul class="list"><li data-name="item-list" aria-name="list-aria" class="list" id="list1">Home</li><li data-name="item-list" aria-name="list-aria" class="list">Posts</li></ul><a data-link="anchor" id="anchor id" class="anchor class" target="_blank" title="Link with data attributes" href="https://google.com">Link with data attributes</a><p data-name="patg">P tag with data attribute</p>`

const editor = new Editor({
  content: htmlContent,
  extensions: [RequiredExtensions, History, AllExtensions.configure()],
})