Zum Inhalt springen
LERNEN

Funktionen

Jede Funktion und das Plugin, zu dem sie gehört.

Dieses Kapitel gibt es auf Englisch und Bulgarisch.

Every feature below is part of the editor. Some belong to a plugin (listed in the last column); RteOptions.Plugins chooses which of the 14 built-in plugins to load.

Editing

FeatureNotesPlugin
Configurable toolbarToolbar lists the buttons; a "more" button folds the rest on narrow screenscore
Undo and redounlimited, also for tablescore
ModesDesign, HTML source and Preview; the HTML mode shows the clean HTMLcore
Full screenF11 or the buttoncore
Entercreates p, br or div (EnterMode); Shift+Enter is a line breakcore
Indentby CSS margin, lists by nestingcore
Find and replacecase, whole word, replace all in one undo stepfind
Writing modestypewriter and focus modestools
Local draftthe browser keeps a draft and asks to restore itcore

Text and blocks

Paragraph styles and headings 1 to 6, bold, italic, underline, strikethrough, inline code, subscript and superscript, colors for text and highlight, font size, line height, alignment, bulleted, numbered and to-do lists, block quotes, horizontal rules, code blocks and snippets, and "clear formatting".

Modern blocks (/ menu, plugin slash and blocks): callouts (info, success, warning), two to four columns, toggles (collapsible blocks), to-do lists, equations (TeX), diagrams (Mermaid), bookmark cards, date, person and link chips, foldable headings, and a handle on every block to drag it or open its menu (duplicate, move up and down, delete).

Tables (plugin tables)

Insert with a grid or a dialog, add and remove rows and columns, merge and split cells, alignment, borders, table and cell properties, column resize, cell selection, a context menu, Tab and Shift+Tab to move between cells.

  • Link dialog: web address, e-mail, phone number or a heading in the same text; title, target and rel. The noopener noreferrer pair is added for a new window.
  • Image dialog: address or upload, alternative text with a hint, width and height with the aspect ratio kept, alignment, a caption (the image becomes a figure), lazy loading, resize handles.
  • Library of files (MediaStore): thumbnails, folders, rename, delete, search, sort, pagination, resize of large images on upload, drag and drop.
  • Video and audio: an address or a file; YouTube and Vimeo addresses are embedded in a sandboxed frame; only the hosts in Embed.AllowedHosts are accepted.
  • Templates: nine built-in layouts and your own through IRteTemplateProvider.
  • Emoji picker and :shortcodes:.
  • File upload with a type filter and a size limit.

Paste and import

  • Cleaning of Word and Excel content: lists become lists, tables stay tables, office markup is removed.
  • Three modes: keep formatting, keep only character formatting, plain text. Ctrl+Shift+V pastes as plain text. After a paste a menu (Alt+Shift+V) changes the mode.
  • Drag and drop of images and files.
  • Markdown import in the output menu; import of JSON.

Writing aids

Markdown shortcuts as you type (# , - , 1. , **bold**, ` code , text), spell check (the browser, or the server through IRteSpellChecker), read aloud, dictation (needs a browser that supports it and a microphone), the :emoji:` shortcodes.

Review

  • Comments on a selection, with replies and resolve (IRteCommentStore).
  • Named revisions with a side-by-side comparison (IRteRevisionStore).
  • Live accessibility panel: alternative text, empty headings, vague link text, contrast, tables, frames. Many findings have a fix button.
  • Merge fields (MergeFields) for mail merge, with a preview that does not change the saved text.
  • Tag inspector: shows the path of tags at the caret and lets you edit attributes, unwrap or remove the element.

Output

Clean HTML 5, XHTML, structured JSON, Markdown, e-mail HTML with inline styles, static HTML, plain text, DOCX on the server, PDF through the print dialog. See Export and import.

Content control

Allowed and blocked elements and attributes, length limits shown in the status bar, relative or absolute URLs, validation of JSON. See Security.

Accessibility of the editor itself

Every command can be used from the keyboard. The toolbar is a single tab stop and moves with the arrow keys; dialogs trap and return the focus; state changes are announced to screen readers; prefers-reduced-motion and forced colors are respected; icons are SVG; a compact toolbar with bottom sheets is used on narrow screens (written and checked by its style rules; not yet tested on devices).

Hooks for the heavy parts

FeatureBuilt inPlug in
EquationsTeX shown in a styled box; window.katex or window.MathJax is used when the page has itload KaTeX or MathJax
DiagramsMermaid source in a styled box; window.mermaid is used when presentload Mermaid
Concurrent editingeditor.collab: remote cursors, presence list, last write winsIRteCollaboration and a CRDT such as Yjs
Word export and importBasicDocxExporter, BasicDocxImporterIRteDocxExporter, IRteDocxImporter
PDFthe print dialoga server renderer of your own
People for mentionsnoneIRtePeopleProvider
Bookmark card titlesthe domain onlyIRteLinkPreviewProvider

Extending in the browser

A plugin is a module with export default function install(editor). Register it before the editors start:

const { registerPlugin } = await import("/_content/Rte/js/rte.js");
registerPlugin("mine", editor => {
    editor.commands.register("hello", { label: "Hello", run: ed => ed.insertHtml("<p>Hello</p>") });
    editor.toolbar.add({ name: "hello", type: "button", label: "Hello", icon: "edit", command: "hello" });
    editor.slash.add({ id: "hello", label: "Hello", keywords: ["hi"], run: ed => ed.exec("hello") });
});

Add "hello" to Options.Toolbar to show the button. The API (commands, toolbar, dialogs, menus, panels, status bar, history, selection, events, dotnet.call) is described in the specification delivered with the source (SPEC.md). window.Rte.getEditors() returns the editors that are alive.

← KonfigurationMenüs und Tasten →

Bereit zum Testen von RayCraft Write?

Starten Sie den 14-tägigen Test, keine Karte nötig.

14 Tage kostenlos testen