How to handle hundreds of textareas using tinymce?

I am trying to create a PHP database CRUD page that can contain 100 text fields, depending on the rows and columns of a MySql table.

For some reason (like faster edits), I load 100 rows at a time (my table has ~ 20,000 rows)

The page load is completely ok if I use regular text boxes.

But when I use TinyMCE it becomes unresponsive or loads very slowly, I think due to too many iframes to be created.

So I thought if there is any way to load the page first. And then -

  • attach TinyMCE editor only to specific text space later when it has focus or edit button for a specific line.
  • detach tinyMCE editor when textbox lost focus / blur or save button is pressed.

I am currently using the following (default) script in <head>

-

<script>
    tinymce.init({
        selector: "textarea",
        theme: "modern",
        width: 550,
        height: 30,
        plugins: [
            "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "save table contextmenu directionality emoticons template paste textcolor"
        ],
        content_css: "css/content.css",
        toolbar: "insertfile bold italic | subscript superscript | bullist numlist | link image | media fullpage | forecolor backcolor",
        style_formats: [
            {title: 'Bold text', inline: 'b'},
            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
            {title: 'Example 1', inline: 'span', classes: 'example1'},
            {title: 'Example 2', inline: 'span', classes: 'example2'},
            {title: 'Table styles'},
            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
        ],
        setup: function(editor) {
            editor.on('change', function() {
                tinymce.triggerSave();
            });
        }
    });
</script>

      

ps - I know both parts of my question are too vague, but I really couldn't find anything for this to work.

+3


source to share





All Articles