Summernote token\template inserts and hilighting?

Question

I'm attempting to use summernote to allow users to edit email templates. I want to give them the ability to insert template/token items for example {{name}}. Ideally i'd like it to hi light this stuff to show them where they have their templates when editing said template.

Code Example:

 $('summernote').summernote({
                    height: 225,
                    callbacks: {
                        onBlur: function(contents, $editable) {
                            var rx = /{([^}]+)}/;
                            var instance = new Mark("div.panel-body");
                            var regex = new RegExp(rx, 'g');
                            instance.markRegExp(regex);
                        },
                    },
                    hint: {
                        mentions: ['name', 'test'],
                        match: /\B{{(\w*)$/,
                        search: function (keyword, callback) {
                            callback($.grep(this.mentions, function (item) {
                                return item.indexOf(keyword) == 0;
                            }));
                        },
                        content: function (item) {
                            return '{{' + item + '}}';
                        }
                    }
                });

• I'm using mark.js to mark the items on blur that match the template regex
• Mark.js adds its own tags that then get pulled into the saved data summernote('code')
• there has to be an easier way/better solution, the only way to get this to work at all is to then go back and strip out all the mark.js tags prior to saving it in the database which i'd rather not have to do (would like to keep the UI stuff isolated)

In thinking about this implementation writing a plugin for summernote based off of something like this: https://github.com/Nanakii/summernote-plugins/blob/master/plugin/template/summernote-ext-template.js and then a function to strip out the special tags upon save seems like my best bet, however if someone has done this, or this already exists i'd rather not reinvent the wheel.

tldr

• Is there a plugin for summernote to allow template\token insertion and hilighting?
• Is there a way to markup the content without having tags added that get saved when i call summernote.code?

Answer 1

You could interrupt the form submission if you have summernote initialised using a textarea inside a form. Do the necessary changes via javascript, then programatically submit the form.

I do a similar process with my summernote-save-button plugin (https://github.com/DiemenDesign/summernote-save-button).

This currently checks if the content has been saved if the user attempts to navigate away from the current page to remind them to save. I have another version within my CMS that encodes the textarea data before submitting the form to get around some server admins having strict data filtering for stuff like iframes for uses that want to embed youtube videos using iframes.

BTW, I'm also one of the newer devs on the project, and I'm happy to help with your issues.