Override the rich text editor in Strapi admin with ToastUI Editor.

Related tags

Editors strapi-plugin-wysiwyg-tui-editor
Overview

strapi-plugin-wysiwyg-tui-editor

⚠️ This is a strapi v4 plugin which does not support any earlier version!

npm package

A Strapi plugin to replace the default rich text editor with ToastUI Editor

Features

This plugin:

  • Supports the editing modes of both markdown and WYSIWYG.
  • Allows you to add images from the strapi's media library.
  • Can switch between two preview layouts, either by tab or side-by-side.
  • Can expand the editor to full screen for large writing area.

Installation

In the root of your strapi project, run:

With yarn:

yarn add strapi-plugin-wysiwyg-tui-editor

Or with npm:

npm install --save strapi-plugin-wysiwyg-tui-editor

Screenshots

Normal view normal view

Expanded view expanded view

Media Library in normal view media lib in normal view

Media Library in expanded view media lib in expanded view

Development

In order to develop on this plugin, you'll need to clone into your Strapi project and link the dependency to it.

  1. Make the folder plugins if you haven't already: 
    mkdir -p <path_to_strapi_project>/src/plugins
cd <path_to_strapi_project>/src/plugins
  2. Clone the repo into the plugins folder: 
    git clone https://github.com/wizcas/strapi-plugin-wysiwyg-tui-editor.git
  3. Register a link to the cloned package: 
    cd strapi-plugin-wysiwyg-tui-editor && yarn link
  4. In your strapi's directory, link the local package as a dependency: 
    cd <path_to_strapi_project> && yarn link strapi-plugin-wysiwyg-tui-editor
You might also like...

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

TinyMCE TinyMCE is the world's most advanced open source core rich text editor. Trusted by millions of developers, and used by some of the world's lar

Jan 4, 2023

A completely customizable framework for building rich text editors. (Currently in beta.)

A completely customizable framework for building rich text editors. (Currently in beta.)

A completely customizable framework for building rich text editors. Why? · Principles · Demo · Examples · Documentation · Contributing! Slate lets you

Dec 30, 2022

Collection of tools for building rich text editors.

psst we have great documentation at https://bangle.dev What is bangle.dev ? bangle.dev is a collection of components for building powerful editing exp

Dec 29, 2022

Personal blog and portfolio with a admin panel and comment system.

Personal blog and portfolio with a admin panel and comment system.

Implementation of a Full Stack Blog With a Comment System And Admin Panel With PHP, React & MYSQL FULL DOCUMENTATION SITE LINK Contents Database Desig

Oct 21, 2022

Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in.

Typewriter Typewriter is a simple, FOSS, Web-based text editor that aims to provide a simple and intuitive environment for you to write in. Features S

May 24, 2022

Verbum is a fully flexible text editor based on lexical framework.

Verbum is a fully flexible text editor based on lexical framework.

Verbum Verbum - Flexible Text Editor for React Verbum is a fully flexible rich text editor based on lexical-playground and lexical framework. ⚠️ As th

Dec 29, 2022

A markdown editor. http://lab.lepture.com/editor/

Editor A markdown editor you really want. Sponsors Editor is sponsored by Typlog. Overview Editor is not a WYSIWYG editor, it is a plain text markdown

Dec 19, 2022

A chrome extension which helps change ace editor to monaco editor in web pages, supporting all features including autocompletes.

Monaco-It Monaco-It is a chrome extension turning Ace Editor into Monaco Editor, supporting all features including autocompletes. 一些中文说明 Supported Lan

May 17, 2022

A React framework for building text editors.

A React framework for building text editors.

Draft.js Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model. Extensible and Customizable: We provid

Jan 4, 2023
Comments
  • Improve docs

    Improve docs

    Hi!

    I've just installed the plugin, but it seems something else is needed to enable it. Although Strapi correctly recognizes it as an installed plugin, it does seem to be working.

    image image

    Also, is there any way to customize the settings? We currently use MDX, and the ToastUI strips all tags in the WYSIWYG mode, so we'd like to disable it. May we have an option to control it?

    opened by marcospassos 5
Owner
Zhuo Chen
Zhuo Chen
GitHub
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

yabwe 15.7k Jan 4, 2023
Tiny bootstrap-compatible WISWYG rich text editor

bootstrap-wysiwyg Important information for Github requests/issues Please do not submit issues/comments to this repo. Instead, submit it to https://gi

MindMup 5.6k Jan 3, 2023
HTML5 rich text editor. Try the demo integration at

Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a

Neil Jenkins 4.4k Dec 28, 2022
A rich text editor for everyday writing

Trix A Rich Text Editor for Everyday Writing Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages

Basecamp 17.3k Jan 3, 2023
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Jan 7, 2023
Popline is an HTML5 Rich-Text-Editor Toolbar

popline Popline is a non-intrusive WYSIWYG editor that shows up only after selecting a piece of text on the page, inspired by popclip. Usage Load jQue

kenshin 1k Nov 4, 2022
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Dec 30, 2022
A powerful WYSIWYG rich text web editor by pure javascript

KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,

Kothing 34 Dec 25, 2022
A drop-in replacement for the strapi editor

Strapi TipTap Editor A drop-in replacement for the strapi editor. What is this? It's a dead simple, and easy to use drop-in replacement for the built

null 39 Jan 3, 2023