3

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.

1 Answer 1

4

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .