A drop-in replacement for the strapi editor

Overview

Strapi TipTap Editor

npm NPM GitHub issues

A drop-in replacement for the strapi editor.

Screenshot of the editor

What is this?

It's a dead simple, and easy to use drop-in replacement for the built in strapi WYSIWYG editor. It's build upon the TipTap editor. It saves as plain HTML, making it easy to use with various frontends.

A goal is to make it more configurable and make it fit your needs.

The project is fully usable, but I still consider it beta at this stage.

Why make this?

The main reason was, that I thought that the built in WYSIWYG editor in strapi could be better. I needed to support tables and css columns. Another requirement was also make it outputted pure html, and has a nice and easy to user interface. I don't want to keep toggling between editor mode and preview mode, just to see what I'm making.

Requirements

It's build with Strapi v4 in mind.

It has been tested to work with v4.1.1 and I assume it should keep working with later versions.

Cool! But how do I use it?

Luckily it's very easy to use. Just follow these instructions:

# Install the dependency
npm install strapi-tiptap-editor

# Add the plugin to strapi plugin.js config file, located inside the strapi project folder: ./config/plugins.js
# It should look something like this
module.exports = {
  // ...
  'strapi-tiptap-editor': {
    enabled: true,
    resolve: './node_modules/strapi-tiptap-editor'
  },
  // ...
}

# Build the Strapi Admin
npm run build

You are now using the new editor!

You can verify it, by looking at the plugins page inside Strapi

Strapi plugin page

I'm having issues, or have a suggestion!

Ouch, that's no good if you have an issue! Suggestions are more than welcome, and feel free to go to the issues tab, and submit your issue/suggestion, and I will look at it as soon as possible!

Comments
  • Blank white screen when navigating to Content Manager page after updating to 0.7.0

    Blank white screen when navigating to Content Manager page after updating to 0.7.0

    Hello, after updating to 0.7.0, when I navigate to the Content Manager section of the site, the page would begin to render for a split-second, then turn blank.

    I noticed that just saving the settings in Settings > Strapi Tiptap Editor > Settings cleared up the issue and allowed me to visit the Content Manager section. I was able to reproduce this both locally and on a live personal project. Then confirmed on a fresh project with only a few Rich Text fields and only strapi-tiptap-editor installed.

    I'm using Node 16.13.1, let me know if there's any additional info that'd be helpful. Thanks!

    opened by maaarshallmooore 9
  • [bug] Internationalization is back

    [bug] Internationalization is back

    The bug with Internationalization is back. See #4 Tested with 0.7.3 and 0.7.7. When i refresh the page the good content is shown.

    Can you also show the world icon when Internationalization is enabled.

    opened by ABlok89 8
  • cannot move cursor via arrow keys in components

    cannot move cursor via arrow keys in components

    When I use the plugin and add a richText field to a (repeatable) component, I cannot move the cursor via the keyboard's arrow keys, only by clicking the desired position within the text directly. When I disable the plugin, in the default markdown editor navigation via keyboard works. Tested with strapi 4.1.7 and 4.1.11, Node 16

    opened by kjoscha 6
  • Please add support for Base64 Image

    Please add support for Base64 Image

    Hello thanks for taking this package to Strapi, but I am in a problem since we are using base64 in some images but the editor removes them according to the doc should I add this https://tiptap.dev/api/nodes/image#allow-base64:

    ImageExtension.configure({
         inline: true,
         allowBase64: true,
    }),
    

    to the Image config, or is there any way I can add these config from strapi without having to modify the code?

    opened by Brandyweb 5
  • Directional keys do not work on a component

    Directional keys do not work on a component

    The arrow keys do not work in a component, when I add text to a field and try to move in the field, the arrow keys do not work. The error only happens on fields that are added within a component, either repeatable or simple.

    image

    opened by Herald-Flores 4
  • Inline `code` styling issues

    Inline `code` styling issues

    Hello. First of all, thanks for this wonderful plugin. I've been using tiptap a lot lately and it was painful not to have it inside Strapi. I've noticed the code styling gets overriden by some CSS reset directives:

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
    acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
    sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
    tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,
    hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0px;
      padding: 0px;
      border: 0px;
      font: inherit; /* here */
      vertical-align: baseline;
    }
    

    I've managed to fix this by simply specifying the font family explicitly in the stlying. However a few questions appear:

    Font family

    There's a specified JetBrainsMono font family in the pre directive:

    pre {
      background: #0d0d0d;
      color: #fff;
      font-family: "JetBrainsMono", monospace;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
    }
    

    Is that font supposed to be included in the package? I don't have it installed on my machine and it simply defaults to monospace to me.

    Background

    Also. the code directive states:

    code {
      background-color: rgba(#616161, 0.1);
      color: #616161;
    }
    

    But the built output loses the background color

    .iGEXnP .ProseMirror code {
      color: rgb(97, 97, 97);
    }
    

    This shouldn't happen either, right?


    If it's okay with you I can make a PR adressing all of this stuff.

    opened by karmaral 4
  • fix: update alt in inserted image if media was updated

    fix: update alt in inserted image if media was updated

    Sometimes library doesn't add alt to images. It forces the user to delete and insert the image again. Can we update the alt in inserted images every time the source image is updated?

    Also,

    • PR adds width and height to images because without them Lighthouse complains.
    • And adds lazyloading feature if the file name contains lazy or the caption equals lazy.
    • Adds History extension

    image

    opened by multipliedtwice 3
  • Hard breaks are not kept even if HardBreak plugin is enabled

    Hard breaks are not kept even if HardBreak plugin is enabled

    Hi, strapi-tiptap-editor ver. 0.9.6 seems to not keep <br> even if HardBreak plugin is enabled (@tiptap/[email protected] is pulled in).

    I have a field with HTML that has <br> but the content is displayed on a single line. If I edit it in the Tip Tap editor by splitting the content on a new line, I see that the markup applied is <p> and not <br>

    opened by alessmar 3
  • Ability to modify toolbar interface styles?

    Ability to modify toolbar interface styles?

    Are the icons styled according to Strapi's design system? They are extremely difficult to make out when they're placed inside button styles. BTW, this is my main gripe with Strapi's default editor.

    Is there anyway to make the icons more approachable akin to TipTap's own website? Screen Shot 2022-10-18 at 5 59 39 PM

    opened by djmtype 3
  • [Bug] Multiple formatted text fields cannot be used

    [Bug] Multiple formatted text fields cannot be used

    Strapi Version: 4.3.8 Tested Plugin Version: 0.9.0 , 0.8.1 Browser: Chrome, Firefox

    What is the issue?

    In all single types where I have inserted more than one formatted text field, only a white page appears.

    Steps to Repoduce?

    Add two formatted text fields to a singletype, then open this singletype to edit it. A white page appears.

    When I remove the plugin, everything works fine again. After adding it, the error occurs again. Tested in a development environment and in a productive environment. (env variable)

    With Plugin installed: If I delete the second text field, everythings works fine again. I add second text field error white site appears.

    Error Messages?

    Yes in Browser Console.

    Uncaught Error: Minified React error #301; visit https://reactjs.org/docs/error-decoder.html?invariant=301 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

    Data Structure:

    image

    opened by dennisdittrich 3
  • [bug] Double spaces

    [bug] Double spaces

    When I insert a double space in " " in the editor and save and go back in the editors gets very buggy.

    To recreate (using Chrome)

    • Create a new post
    • insert asdf asdf in the editor.
    • Save and close
    • Go back in. You can now select the text.
    • Insert one more space in between asdf and asdf
    • Save and close
    • Go back in and you cannot select the text, cursor just jumps to the end.
    opened by karl-friman 3
  • [question/suggestion] How to trigger refresh editor's content rendering

    [question/suggestion] How to trigger refresh editor's content rendering

    Hi, first of all thank you for this awesome plugin, it works like a charm with ver 4.4.5 (the latest at this time).

    I was wondering if there's a way to trigger the rendering of new content. I have a lifecycle hook that needs to update the text inserted, I can see from the logs that the content of this specific field is properly updated (through event.params.data.myfield = updatedHtml; in the lifecycle hook) but the content in the editor is not updated. I need to go back and click on edit a second time.

    Is there a way to automatically update the editor's content ?

    opened by alessmar 2
  • Is it possible to add id's in order to use anchors on the Headings?

    Is it possible to add id's in order to use anchors on the Headings?

    I've installed this to add some Rich text editor functionality, and can easily add headings etc, but can't add an id onto them to use them as internal anchor points when linking to the page. For example, a Table of Contents component.

    Is this possible?

    opened by T-Gwynbleidd 3
  • Is it possible to add tiptap extensions on a per project basis?

    Is it possible to add tiptap extensions on a per project basis?

    Hi,

    is it currently possible to add tiptap extensions? I have a couple of custom extensions, I developed some time ago for tip tap and would like to add thos in a new project where I would like to continue using tiptap within Strapi.

    Any standardized way to extend the editor instance with our own extensions?

    opened by steveHimself1397 1
  • Custom configuration for test-styles and tags?

    Custom configuration for test-styles and tags?

    I'm looking for a way to add custom-configuration for additional styles.

    Ie we're using h3 with two styles and I'd love to be able to use those by having Heading 3 as well as an Heading 3 (alt) option. Is that something that can be done? Happy to look into myself if I get a hint on where to add this. Thanks!

    opened by fabianmu 1
  • [question/suggestion] Link to Entry

    [question/suggestion] Link to Entry

    Great work! But..

    Isn't it kind of a deal-breaker, that we are not able to link to entries?

    It's pretty hard to manage hundreds of links across multiple components if they are not updated automatically.

    Just my 2 cents.

    opened by Kyoss79 1
  • Unsplash & Giphy support

    Unsplash & Giphy support

    Hello, thank you for an awesome plugin. Works great. One thing related to images tho. I try to make a quick blog on a budget. So I can't afford to store images by myself. An obvious choice would be to use Unsplash and Giphy. Is there any chance to make your plugin work with it? maybe smth similar like this - https://github.com/kwinyyyc/strapi-plugin-zeasy-image-api

    opened by multipliedtwice 0
Releases(0.9.7)
  • 0.9.7(Jan 3, 2023)

  • 0.9.6(Oct 20, 2022)

  • 0.9.5(Oct 20, 2022)

  • 0.9.4(Oct 19, 2022)

    Changes

    • Moved away from the StarterKit extension, to allow for making custom extensions of the included packages.

    New

    • Added a settings options that allow for disabling the shorthand for ordered lists. The shorthand can get in the way, when writing dates.
    Source code(tar.gz)
    Source code(zip)
  • 0.9.3(Oct 19, 2022)

    Changes

    • Moved away from the StarterKit extension, to allow for making custom extensions of the included packages.

    New

    • Added a settings options that allow for disabling the shorthand for ordered lists. The shorthand can get in the way, when writing dates.
    Source code(tar.gz)
    Source code(zip)
  • 0.9.2(Oct 19, 2022)

    DO NOT INSTALL THIS VERSION

    is has a missing dependency. Install 0.9.3 instead.

    Changes

    • Moved away from the StarterKit extension, to allow for making custom extensions of the included packages.

    New

    • Added a settings options that allow for disabling the shorthand for ordered lists. The shorthand can get in the way, when writing dates.
    Source code(tar.gz)
    Source code(zip)
  • 0.9.1(Sep 22, 2022)

  • 0.9.0(Sep 21, 2022)

    New

    • You can now set the default value for the rel attribute on links
    • Hardbreaks now have a settting for toggling it on or off
    • Added button and settings for hardlines

    Fixes

    • Improved the merging of default values and saved settings.
    Source code(tar.gz)
    Source code(zip)
  • 0.8.1(Sep 20, 2022)

Owner
Does frontend, and loves it. 🐱‍💻 Flutter is pretty cool too. 🤘
null
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

Hsiaoming Yang 2.8k 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

null 3 May 17, 2022
The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Froala 5k Jan 1, 2023
Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Henri Bergius 2.4k Dec 17, 2022
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
Ace (Ajax.org Cloud9 Editor)

Ace (Ajax.org Cloud9 Editor) Note: The new site at http://ace.c9.io contains all the info below along with an embedding guide and all the other resour

Ajax.org B.V. 25.2k Jan 4, 2023
In-browser code editor

CodeMirror CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 10

CodeMirror 25.6k Dec 30, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Quill 34.3k Jan 2, 2023
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
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Jan 7, 2023
Simple, beautiful wysiwyg editor

This repo is no longer maintained. bootstrap3-wysiwyg is much better Overview Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create

James Hollingworth 4.2k Dec 30, 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 Jan 7, 2023
Raptor, an HTML5 WYSIWYG content editor!

Raptor Editor Raptor Editor is a user-focused extensible WYSIWYG website content editor - check out the Demo. It is designed to be user and developer

PANmedia 533 Sep 24, 2022
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
Super simple WYSIWYG editor

Summernote Super simple WYSIWYG Editor. Summernote Summernote is a JavaScript library that helps you create WYSIWYG editors online. Home page: https:/

Summernote 11k Jan 7, 2023