Issue #3094Opened October 26, 2020by marcepoblet0 reactions

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.

Code SnippetHTML
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)

GoodPHPOctober 30, 20200 reactions

Hi,

If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/

We specialise on GrapesJS.

artfNovember 9, 20200 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.