CODEWITHSUNDEEP
javascripthtmlmeteor
Matt M
Matt M

Reputation: 205

Meteor contentEditable field not working

I'm new to Meteor. I have a meteor app right now with two bootstrap columns; each holds a list of "cards" and the cards in the left column have a parent relationship to the cards that appear on the right column. Click on a card on the left and the child cards for that parent load into the right column.

For the cards in the right column, I want to make the text that's on them be contentEditable. I've tried using a few WYSIWYG libraries so that I can get some editing features too, and all of them fail in the same way. You click on the text that you want to edit, it clearly highlights the field like it's going to be editable, but you can't type anything. BUT...if you switch to another window or application, and then switch back, now the cursor is blinking and you can type. Relevant code is below (in this example, I'm using medium-editor, but like I said, I don't think the issue is related to that). I'm not sure if the event handler helps; it doesn't work without it either.

template.js

Template.editFrame.cards = function () {
    return ExCards.find({varId: Session.get("selectedArc")}, {sort: {sortOrder: 1}});
};

Template.exCards.events({

    'click .editable': function (evt) {
        var field = $('p.editable', evt.target.parentNode);
        field.focus();
    }
});


};

Template.exCards.rendered = function () {
    var editor = new MediumEditor(".editable");
};

template.html

<template name="editFrame">
    <div class="col-lg-10 section-exCards">
        <div class="scrollable list">
            {{#each cards}}
                {{> exCards }}
            {{/each}}
            {{#if newStoryBox }}
                {{> editStory}}
            {{/if}}
            <div class="add-button-container">
                <button class="add-button add-ex-button" id="addExCard">Add Story Item</button>
            </div>
        </div>

        {{> metadataFrame }}
    </div>
        <!--</div>-->
</template>


<template name="exCards">
    <div class="ex-card card-container item row" id="{{_id._str}}">
        <div class="item-inner">
            <div class="info col-xs-7">
                <div class="address">
                    <p class="editable" id="new_{{_id.str}}">{{name}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

Upvotes: 2

Views: 589

Answers (2)

cutemachine
cutemachine

Reputation: 6250

The callback you provide through Template.myTemplate.rendered is only called once. I think this changed with the Meteor update to version 0.8.

This is what the documentation says:

This callback is called once when an instance of Template.myTemplate is rendered into DOM nodes and put into the document for the first time.

Therefore Matt M's version posted in the question worked for me out of the box.

Upvotes: 1

emgee
emgee

Reputation: 1234

I've run into a similar problem before using a different contenteditable editor library. So this may or may not help you here.

So one thing that happens is your Template.exCards.rendered function gets called multiple times, which means you're creating multiple Medium Editors may or may not cause this to be a problem. What I've done is check the editor variable before making a new MediumEditor.

You'll have to scope the editor variable globally so that next time it renders you can still access it. Also, you have to manually destroy the editor at appropriate time.

Upvotes: 1

Related Questions