BUG: RichTextEditor dont save some changes from the modal
Question
in the RichTextEditor I have added a button that opens a modal, and this modal enters certain values that I then insert into the html.
But when I save these values the html does not save them.
What could be the problem? I shared the code and a video in the PPTX.
[Presentation1.pptx](https://github.com/artf/grapesjs/files/5438735/Presentation1.pptx)
editor.RichTextEditor.add('conditionIf', {
icon: '<b>Condition IF</b>',
attributes: {title: 'Condition IF'},
result: rte => {
let htmlInsert = ''
const pfx = editor.getConfig().stylePrefix
const modal = editor.Modal
const container = document.createElement('div')
const btnClass = pfx + 'btn-prim ' + pfx + 'btn-import'
const conditionInputHtml = `<div><label for="placeholders">Placeholder:</label><select id="placeholderId" class="block-input">${options()}</select>
<label for="operator">Operator:</label><select id="operatorId" class="block-input">
<option value="">--Operators--</option>
<option value="equalTo">Equal to</option>
<option value="distinct">Distinct</option>
<option value="moreThan">More than</option>
<option value="moreEqualThan">More equal than</option>
<option value="lessThan">Less than</option>
<option value="lessEqualThan">Less equal than</option>
</select>
<label for="comparator">Compare to:</label><input class="block-input" id="comparatorId" type='text' placeholder='Enter the value to compare'/>
<br><br><label for="trueCondition">True Condition: </label><textarea class="block-input" id="trueConditionId" rows="4" cols="50"></textarea>
</div><br>`
const btn = addButtonCondition(btnClass, modal, rte, conditionIf)
openModal(container, modal, 'Condition IF', conditionInputHtml, btn)
btn.onclick = function () {
const placeholderElement = document.getElementById("placeholderId")
const placeholderValue = placeholderElement.options[placeholderElement.selectedIndex].value
const placeholder = placeholderValue.replace("{{", "").replace("}}", "")
const operatorElement = document.getElementById("operatorId")
const operatorValue = operatorElement.options[operatorElement.selectedIndex].value
const comparatorValue = document.getElementById('comparatorId').value
const trueConditionValue = document.getElementById('trueConditionId').value
if (placeholderValue.length > 0 && operatorValue.length > 0 &&
comparatorValue.length > 0 && trueConditionValue.length > 0) {
const operator = setOperator(operatorValue)
htmlInsert = `{{#ifCondition ${placeholder} "${operator}" "${comparatorValue}"}}${trueConditionValue}{{/ifCondition}}`
rte.insertHTML(`{{#ifCondition ${placeholder} "${operator}" "${comparatorValue}"}}${trueConditionValue}{{/ifCondition}}`)
}
}
},
})Answers (2)
Hi,
If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/
We specialise on GrapesJS.
Probably the issue here is related to the loss of focus during the editing in the modal. You should find a way to keep the focus on the RTE (maybe creating your own modal which prevents the propagation of events), but this is not related to the core of the editor so I have to close this issue.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2831
[BUG] Text components don't behave correctly after creating custom components
Hi artf, After creating custom components, the text component does not behave like before. It removes all the naked nodes after changing so...
Issue #2742
[QUESTION] How to prevent unique ids generation?
Hi! Thanks for your work @artf. This is a simplified code of how I use grapesjs, I want to save the styles and then want to apply them agai...
Issue #2009
'Select' trait no updated in edit mode
Hi there, There is a problem with me, I don't know if it from my code or from grapejs itself, For LINK tool, it takes its links from my DB...
Issue #1978
[Bug]: Styles allways applied to classes
Hello, I have a Problem with styling individual Items. The following html Code: Loads fine. But when I Click the Component with "#icbp" the...
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.