0

I'm trying to add a validation in tinymce editor. The condition is without giving all the mandatroy input user can't submit the form. It was all okay till I added table plugin in tinymce. After adding table in the editor, when I give some input on that table, my code can't read that value from the table, but if i give that value outside of the table then the validation works fine. what i've understood that, for some reason, the editor is not getting the table tag values. And this is my code:

 var moduleTypesMap = {};

    $.each(moduleTypesJson, function (index, item){
         moduleTypesMap[item.name] = item;
         moduleTypesMap[item.name]['placeholders'] = item.placeholders.split(',');
    });
        tinymce.init({
            selector: '#textarea',
            plugins: 'table',
            toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
        });

        $submitButton.on('click', function (){
            var body = tinymce.get('textarea').getContent(); //gets the whole content of the table
            var isBodyValid = true;
            var type = $template.val(); //my dropdown values

                $.each(moduleTypesMap[type].placeholders, function (index, item){
                    if (body.indexOf(item) === -1) 
                      isBodyValid=false;
                });
                if(isBodyValid){
                    $form.trigger('submit');
                } else {
                    bootbox.alert("please give all placeholders");
                }
            
        });

the way I'm giving values in the editor is : {name}, {roll}, {school}. but if i give the value {name} on table then it can't read the value. that time item {name} gets index(body.indexOf(item) === -1) got -1 whereas outside the table it got value greater than 1. I dont know why table values are not getting the index number greater than 1.

[N.B] Solved:

actually the input I was transferring there were some mismatch that's why didnt work. But now its solved.

Insane DA
  • 323
  • 4
  • 16
  • 1
    Did you checked what output comes from editor. TinyMCE may remove some tags according to it's configuration. You may need to allow table tag. – Zortext Sep 29 '20 at 09:22
  • After you have confirmed what `body` contains, double check what the value of `item` is. – Dallas Clark Sep 29 '20 at 22:21
  • i've checked the items already it's getting the value from

    tags or others but not getting values

    tag. And i've printed the body it containted the table values.. But while cheking index, it's not taking the values from the table. I ran into this issue https://stackoverflow.com/questions/28761664/tinymce-allow-table-cell-element-as-a-valid-html that person got the similar type issue @DallasClark     – Insane DA Sep 30 '20 at 06:23
  • Looks like you've resolved the issue according to your edit :) – Dallas Clark Sep 30 '20 at 10:26
  • @DallasClark yes, i've – Insane DA Oct 01 '20 at 12:31

1 Answers1

1

I do not think the problem is related to tinyMCE. Please check the codepan below.

https://codepen.io/zortext/pen/abNxePB

tinymce.init({
            selector: '#textarea',
            plugins: 'table',
            toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
        });

function getContentIndex(str){
  alert(tinymce.get('textarea').getContent().indexOf(str))
}

successfully alerts the index

Zortext
  • 566
  • 8
  • 21