Insert custom CSS inline
Question
I already tried different ways to do it, but it's still not working...
First:
editor.addComponents('<style>img{width:100%}.botao-roxo{background-color:#8D7EA2;border-color:#8D7EA2;color:#FFF}.botao-roxo:active,.botao-roxo:focus,.botao-roxo:hover{background-color:#FFF;border-color:#8D7EA2;color:#8D7EA2}.botao-grande{width:25%}</style>');
Second:
editor.setStyle([
'img{width:100%}',
'.botao-roxo{background-color:#8D7EA2;border-color:#8D7EA2;color:#FFF}',
'.botao-roxo:active,.botao-roxo:focus,.botao-roxo:hover{background-color:#FFF;border-color:#8D7EA2;color:#8D7EA2}',
'.botao-grande{width:25%}'
]);
Third:
editor.setStyle('img{width:100%}.botao-roxo{background-color:#8D7EA2;border-color:#8D7EA2;color:#FFF}.botao-roxo:active,.botao-roxo:focus,.botao-roxo:hover{background-color:#FFF;border-color:#8D7EA2;color:#8D7EA2}.botao-grande{width:25%}');
Fourth:
grapesjs.init({
// ...
style: 'img{width:100%}.botao-roxo{background-color:#8D7EA2;border-color:#8D7EA2;color:#FFF}.botao-roxo:active,.botao-roxo:focus,.botao-roxo:hover{background-color:#FFF;border-color:#8D7EA2;color:#8D7EA2}.botao-grande{width:25%}',
// ...
})
Answers (1)
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1296
Custom Rich Text Editor is not working
Hi @artf, I've just created a custom plugin of the RTE using different libraries like CKEditor 5, TinyMCE 4 or pell but all of them with th...
Issue #1493
[QUESTION] render() works on the first time but not on subsequent calls
Hello, I've created a custom component that shows images using background-image on a <div> instead of using an <img> element. It's mostly w...
Issue #384
Create and Edit Template into Database
This is my code to Create a new template and insert the inline html with style into the database : I am able to insert the template-data in...
Issue #1756
Drag and Drop not working in resized editor window in Google Chrome
Hi, I developed some components and all works fine in Firefox, Opera browser. In Google chrome also working fine in fullscreen editor mode...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.