Rich Text Editor

LiveCodes includes a built-in rich text editor powered by Quill, a modern WYSIWYG editor. This allows writing formatted content visually which is then rendered as HTML in the result page.

Usage

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "markup": {
      "language": "richtext",
      "content": "<h1>Hello, Rich Text!</h1>\n<p>This content was created using the rich text editor.</p>\n<ul>\n  <li><strong>Bold</strong>, <em>italic</em>, <u>underline</u></li>\n  <li>Headings and lists</li>\n  <li>Tables and images</li>\n</ul>"
    }
  };
</script>

How It Works

When the Rich Text Editor language is selected for the markup editor, the code editor is replaced with a Quill editor. Content created in the editor is converted to HTML and rendered directly in the result page.

The generated HTML can be viewed in the compiled code viewer.

Editor Features

The Quill editor includes several plugins:

• HTML Edit — switch between rich text and HTML source editing
• Blot Formatter — resize and align images and embeds
• Better Table — create and edit tables with column/row operations

Language Info

Name

richtext

Extensions

.rte, .rte.html, .rich

Editor

markup

Compiler

Quill

Links

• Quill
• Quill on GitHub