CODEWITHSUNDEEP
javascripthtmlangularjstinymce
jcc
jcc

Reputation: 1147

Disable/ignore custom strings and tags in wysiwyg

Setup:

I am using the Angular wrapper of TinyMCE to allow my users to build their own email templates. These emails go out to multiple people within each of the users organization. I have created custom toolbar buttons to insert small blocks of text [[[data]]] (tags) on the cursors position where each recipients demographic info would go.

Dear [[[Full_Name]]], the class [[[Class_Name]]] has been canceled, etc.

The users are able to save these email templates for later use, and when they decide to email them off, I send the saved template to a parser that replaces all the [[[data]]] with the recipients actual data.

The problem I am facing is, I need these [[[data]]] tags to be disabled or readonly or uneditable in the TinyMCE text editor, so that when the user is building these email templates, they do not accidentally change the identifier token. [[[Ful_Name]]] would not be recognized in my parser and fail on the server side.

TinyMCE converts any HTML to an editable text representation (which I'm not fully clear on), making my inserted toolbar tags useless, allowing them to directly edit the content of the inserted HTML.

Code:

<textarea ng-model="vm.Body" ui-tinymce="tinymceOptions" required></textarea>

$scope.tinymceOptions = {
    toolbar: 'generalitems',
    setup: function (editor) {
        editor.addButton('generalitems', {
            type: 'menubutton',
            text: 'General Items',
            icon: false,
            menu: fac.generalMenu(editor)
         });
}

fac.generalMenu = function (editor) {
    return setupMenuItems(editor, fac.variablesGeneral);
}

function setupMenuItems(editor, variables) {
    var menuItems = [];
    angular.forEach(variables, function (item) {
        menuItems.push({
            text: item.Name,
            onclick: function () {
                editor.insertContent('&nbsp;<span style="color:red;">[[[' + item.Token + ']]]</span>&nbsp;');
                }
            });
        });
    return menuItems;
}

Things I have considered, but having trouble coming up with an implementation for:

Destination:

Ideally, I would like any [[[data]]] tag to behave as a character in a string. Users can arrow over to the tag which will cause it to select (highlight) it, where they can delete the whole tag by pressing Del/Backspace once, or continuing to arrow which will cause the cursor to move over the whole tag and onto the next character.

Upvotes: 0

Views: 1007

Answers (1)

Michael Fromin
Michael Fromin

Reputation: 13744

What you want is the noneditable plugin in TinyMCE:

https://www.tinymce.com/docs/plugins/noneditable/

If you apply the noneditable class to the span that wraps your special text TinyMCE will treat the entire string like a single character. This will still allow someone to delete the special code if they want but they won't be able to otherwise manipulate the text in the special string.

For example:

<span class="mceNonEditable" style="color:red;">[[[' + item.Token + ']]]</span>

Upvotes: 2

Related Questions