A drop-in replacement for the strapi editor based on TipTap. It support usual text formatting, tables, videa, images, ... and content blocks (still in dev).
It saves as plain HTML, making it easy to use with various frontends.
We also plan to add AI based content generation in the future.
This is a fork of the original strapi-tiptap-editor
It's build for Strapi v4.
A content block is a structured content composed of different fields. It's a way to add more complex content in the content editor. It could be a "call to action" block, a "hero" block, or a "product" block.
It is based on the Tiptap interactive node views.
Until now, there is only one : CTA (Call to action). It's composed of a type, a title, a text and a link. We will see later how to add more content blocks.
The produced output HTML tag is :
<block-component
type\"..."
title="...."
text="..."
link_text="..."
link_url="....">
</block-component>
In your front-end, eg. NextJS, you can use a lib like html-react-parser to render this kind of tag. The type can be used to have different styles for different content blocks. The list of types can be configured in the Strapi settings for this extension.
# Install the dependency
npm install tiptap-editor-strapi
or
yarn add tiptap-editor-strapi
This is due to tippy.js doesn't have an ES6 module, and a tiptap depencency imports it as such.
config.plugins.push(new webpack.NormalModuleReplacementPlugin(
/^tippy\.js$/,
'tippy.js/dist/tippy-bundle.umd.min.js'
))
You need to add "frame-src": ["'self'", "www.youtube.com"] to the content security policy to allow embedding YouTube videos in your Strapi editor.
export default [
// other policies
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "http:", "https:"],
"frame-src": ["'self'", "www.youtube.com"],
upgradeInsecureRequests: null,
},
},
},
},
// other policies
];
npm run build
You should now be able to access to the editor settings in the Strapi admin.
To align content written in languages such as Arabic (العربية), Urdu (اُردُو), or Persian (فارسی) to the left, you'll need to set the default editor alignment to the right using the settings below.