strapi-julius-editor
v0.0.9
Published
A drop-in replacement for the strapi editor based on tiptap with components & AI
Downloads
2
Maintainers
Readme
Strapi Julius Editor
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
Requirements
It's build for Strapi v4.
What is a content block and how do I use it?
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
# Install the dependency
npm install strapi-julius-editor
or
yarn add strapi-julius-editor
Add the following to the webpack config (/src/admin/webpack.config.js)
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'
))
Add the following to middlewares config (/config/middlewares.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
];
Build the Strapi Admin
npm run build
Setting up the editor
You should now be able to access to the editor settings in the Strapi admin.