I got a TinyMCE WYSIWYG editor which I send to my SQL and bring back to the same page. A solution is to make another page where you retrieve the information but I thought why built more pages if it's posible to create the wanted context on the same page. Saves a bit of space and makes it more compact.
On the site of TinyMCE I saw that in the ajax formula there was a function called: Noneditable. Which I tried but without success. Somehow that didn't work. After that, I tried to make a div inside the editor content with Noneditable which worked. Well solved you would say. Problem is that there is a bit of space between my textarea where the TinyMCE is called to and the div inside of the area. That space is still editable what makes the noneditable div useless.
After that, I tried to make jQuery magic happen. But I can't make a connection to the class or id of the content were the textarea is. Also tried to make the content hide which isn't a solution at all but even that doesn't work.
TinyCME Javascript
$(document).ready(function() {
tinymce.init ({
selector: '.add_body_structure',
height: 1000,
menubar: true,
branding: false,
toolbar: 'undo redo | styleselect bold italic forecolor backcolor fontselect
fontsizeselect | link | alignleft aligncenter alignright alignjustify
| outdent indent bullist numlist | removeformat | insert',
plugins: 'print preview searchreplace autolink directionality visualblocks
visualchars fullscreen image link media mediaembed template table
charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist
lists textcolor wordcount imagetools contextmenu colorpicker
textpattern help autoresize noneditable',
advlist_bullet_styles: 'square',
advlist_number_styles: 'lower-alpha,lower-roman,upper-alpha,upper-roman',
statusbar: false,
browser_spellcheck: true,
image_title: true,
automatic_uploads: true,
media_live_embeds: true,
noneditable_noneditable_class: "noEdit",
contextmenu: true,
relative_urls: false,
remove_script_host: false,
encoding: 'xml',
invalid_elements: 'script, input, textarea, textfield, col, colgroup,
caption, dir, meta, object, select, option, source, title',
fontsize_formats: '8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt
28pt 30pt 32pt 34pt 36pt 38pt 40pt', }); });
PHP page
<?php foreach($viewmodel as $item) : ?>
<form method="post">
<div>
<br><br><br><br>
<textarea id="wysiwyg_frontpage" name="body" class="noEdit <?php if (isset($_SESSION['is_logged_in'])) : ?> add_body_structure <?php endif;?>" accept="video/mp4,video/x-m4v,video/*">
<div class="noEdit">
<?php echo html_entity_decode($item['body']);?>
</div>
</textarea>
<input name="image" type="file" id="upload" class="hidden" onchange="">
</div>
<?php if (isset($_SESSION['is_logged_in'])) : ?> <input class="btn btn-primary" name="edit" value="Post" type="submit"></input><?php endif;?>
</form>
<?php endforeach; ?>
Body details of the current page
<body id="tinymce" class="mce-content-body " data-id="wysiwyg_frontpage" contenteditable="true" style="overflow-y: hidden; padding-left: 1px; padding-right: 1px; padding-bottom: 50px;" data-mce-style="overflow-y: auto; padding-left: 1px; padding-right: 1px; padding-bottom: 50px;">
<div class="noEdit" contenteditable="false"><div class="noEdit" contenteditable="false"></div>
As you can see in the html above you see 2 noEdit classes and that's because of the div inside of the textarea. It will send an extra div with it when posted. Also body contenteditable is true which is set by the TinyMCE which I can't change or am not able to.
Conclusion How do I make editable or not editable when I set as such. Try to hide behind a session but first I want to tackle this issue.
If more information is needed then ask for it. These 3 are the main sources.
