Adding colors to built-in RTE
@iamDreamcode to make that element selectable you should force the sync of the text component https://jsfiddle.net/xhp7k1bs/
Read full answer below ↓Question
Hi
I'm trying to add color to built-in rte for background and foreground, but after unfocusing an element - style prop resets. Here is an example : https://jsfiddle.net/2s3vhygn/ Looks like i need to update an model and set up styles on it. Trying to update model using this code:
const selectedText = editor.getSelected();
editor.select(selectedText.find('.selected'));
editor.getSelected().setStyle({ color: 'red' });
editor.getSelected().removeClass('selected');
But inserted span isn't selectable.
So i have few questions:
- What im doing wrong?
- How i can attach an default color picker to rte panel?
I'm not using CKeditor because it cause that after saving, element is no more editable.
Answers (1)
@iamDreamcode to make that element selectable you should force the sync of the text component
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5442
After applying the text color not able to set the background color
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link https://jsfi...
Issue #4341
while adding border style for Html component css json only fetching for border selector not fetching selector of border-width, border-style, border-colorBUG:
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome v101.0.4951.54 Reproducible demo li...
Issue #4861
<br/> is adding to single line text, after entering space for the first time in firefox
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox Reproducible demo link https://jsf...
Issue #1614
[Bug]: adding css variables as style manager property
trying to add css variable to style manager causing error: Uncaught TypeError: Cannot read property 'toUpperCase' of undefined fiddle Am i...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.