Site icon Hip-Hop Website Design and Development

TinyMCE plugin encoding

I created a shortcode for a footnote system.

But I got a problem with encoding.

When the user enter a text with double quotes or simple quote the output is empty.

I tried to use .replace(/'/g, "'")) but In the WordPress WYSIWYG field the output show '

I would like something like that

[footnote note='I don't know']word[/footnote]

But in the WYSIWYG field I always got :

[footnote note='I don't know']word[/footnote]

But in front side this is always empty.

I saw that I could set ‘raw’

(function(){
    tinymce.create('tinymce.plugins.MyPluginName', {
        init: function(ed, url){
            ed.addButton('footnotebtn', {
                title: 'Note de bas de page',
                cmd: 'myBlockquoteBtnCmd',
                image: url + '/img/footnote.png',
                theme: 'advanced'
            });
            ed.addCommand('myBlockquoteBtnCmd', function(){
                var selectedText = ed.selection.getContent({format: 'raw'});
                var win = ed.windowManager.open({
                    title: 'Ajouter une note',
                    body: [
                        {
                            type: 'textbox',
                            name: 'note',
                            label: 'Note',
                            minHeight: 150,
                            minWidth: 500,
                            multiline: true,
                            value : ''
                        }
                    ],
                    buttons: [
                        {
                            text: "Valider",
                            subtype: "primary",
                            onclick: function() {
                                win.submit();
                            }
                        },
                        {
                            text: "Ignorer",
                            onclick: function() {
                                win.close();
                                var returnText = '[footnote]' + selectedText + '[/footnote]';
                                ed.execCommand('mceInsertContent', 0, returnText);
                            }
                        },
                        {
                            text: "Annuler",
                            onclick: function() {
                                win.close();
                            }
                        }
                    ],
                    onsubmit: function(e){
                        var params = [];
                        if( e.data.note.length > 0 ) {
                            params.push('note='' + e.data.note.replace(/'/g, "'") + ''');
                        }
                        if( params.length > 0 ) {
                            paramsString = ' ' + params.join(' ');
                        }
                        var returnText = '[footnote' + paramsString + ']' + selectedText + '[/footnote]';
                        ed.execCommand('mceInsertContent', 0, returnText);
                    }
                });
            });
        },
        getInfo: function() {
            return {
                longname : 'Bouton note',
                author : 'TEST',
                authorurl : 'https://www.example.com',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add( 'footnotebtnplugin', tinymce.plugins.MyPluginName );
})();

PHP part :

function ccn_shortcode_footnote($atts, $content = null) {
    extract(shortcode_atts(array(
        'note' => 'Empty'
    ), $atts));
    return '<span class="footnote-word" data-footnote-text="'.$note.'">'.$content.'</span>';
}

add_shortcode('footnote', 'ccn_shortcode_footnote');