[SalesForce] contenteditable attribute not allowed in markup

I'm trying to test editing text in a component by using contenteditable="true" attribute (instead of using a textarea), but that attribute is not appearing in the rendered page.

The contenteditable attribute is listed as compatible with LockerService in its API docs, but I tried disabling LockerService and it still doesn't work.

I can use Chrome dev tools to manually add it, and then it works fine, so I know the div element is capable of accepting that attribute.

I tried both "contenteditable" and "contentEditable" to rule out case making a difference, which it doesn't – it doesn't work with either spelling. There are also no errors showing up in the console.

I'm not using an afterRender, or anything else that modifies the DOM.

Below is a minimal sample component illustrating what I'm trying to do:

test_ContentEditable.cmp:

<aura:component>
    <div class="redText" contenteditable="true">
        This is some sample text to edit.  Line 1.<br/>
        This is some sample text to edit.  Line 2.<br/>
        This is some sample text to edit.  Line 3.<br/>
        This is some sample text to edit.  Line 4.<br/>
        This is some sample text to edit.  Line 5.
    </div>
</aura:component>

test_ContentEditable.css (I did this to prove the class attribute is working):

.THIS.redText {
    border: 1px solid black;
    margin: 10px;
    color: red;
}

test_ContentEditable_App.app:

<aura:application >
    <c:test_ContentEditable/>
</aura:application>

Below is the markup as it appears in Chrome Inspect, with no contenteditable attribute, but everything else is rendered:

<div class="redText cTest_ContentEditable" data-aura-rendered-by="5:0" data-aura-class="cTest_ContentEditable">
        This is some sample text to edit.  Line 1.<br data-aura-rendered-by="7:0">
        This is some sample text to edit.  Line 2.<br data-aura-rendered-by="9:0">
        This is some sample text to edit.  Line 3.<br data-aura-rendered-by="11:0">
        This is some sample text to edit.  Line 4.<br data-aura-rendered-by="13:0">
        This is some sample text to edit.  Line 5.
    </div>

Any thoughts on why contenteditable attribute isn't being rendered? Thanks.

Best Answer

Answering this myself, as I found that although the contenteditable attribute seems to be ignored in markup, it's possible to set it in code.

Revised test_ContentEditable.cmp as follows:

<aura:component>
    <aura:attribute name="editMode" type="Boolean" default="false" access="private"/>

    EDIT MODE: {!v.editMode}<br/><br/>

    <button onclick = "{!c.editOnButtonClicked}">EDIT ON</button><br/>
    <button onclick = "{!c.editOffButtonClicked}">EDIT OFF</button><br/><br/>

    <div class="redText" aura:id="sampleText">
        This is some sample text to edit.  Line 1.<br/>
        This is some sample text to edit.  Line 2.<br/>
        This is some sample text to edit.  Line 3.<br/>
        This is some sample text to edit.  Line 4.<br/>
        This is some sample text to edit.  Line 5.
    </div>

</aura:component>

Added test_ContentEditableController.js:

({
    editOnButtonClicked : function(component, event, helper) {
        var sampleTextComponent = component.find('sampleText');
        var sampleTextElement   = sampleTextComponent.getElement();
        sampleTextElement.contentEditable = true;
        component.set('v.editMode', true);
        console.log('DEBUG: contentEditable set to TRUE');
    },

    editOffButtonClicked : function(component, event, helper) {
        var sampleTextComponent = component.find('sampleText');
        var sampleTextElement   = sampleTextComponent.getElement();
        sampleTextElement.contentEditable = false;
        component.set('v.editMode', false);
        console.log('DEBUG: contentEditable set to FALSE');
    },

})

Setting the contentEditable attribute on the element works, so the logic can turn it off and on as needed.

Note I wanted to use contenteditable instead of a textarea, because I didn't want to worry with cols and rows values or writing code to adjust that dynamically as the user was editing the content. I wanted the text area to always match the content, which is how contenteditable seems to work.

Related Topic