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
No one has answered this question yet
Check out similar questions: