Add wysiwyg to zend framework 3 - wysiwyg

I try add wysiwyg tinymce to my Zend Framework 3 application.
Put src folder to public\js\tinymce
Include to \Post\view\layout\layout.phtml
`<?= $this->headScript()`
->prependFile($this->basePath('js/bootstrap.min.js'))
->prependFile($this->basePath('js/jquery-2.2.4.min.js'))
->prependFile($this->basePath('js/tinymce/tinymce.min.js'))
?>
In view:
<div class="form-group">
<?= $this->formLabel($form->get('text')); ?>
<br>
<?= $this->formElement($form->get('text')); ?>
<?= $this->formElementErrors($form->get('text')); ?>
</div>
But as a result, the editor does not turn on. What have I forgotten?

Add the code below to your view layout just before the end of the head tag
<script language="javascript" type="text/javascript">
tinymce.init({
selector: 'textarea', // change this value according to your HTML
theme: 'modern',
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'
],
toolbar: [
'insertfile undo redo | fontselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | \n\
bullist numlist outdent indent | formatselect forecolor backcolor emoticons code | table \n\
nonbreaking template pagebreak | blockquote | link image | print preview media fullpage removeformat'
]
});
</script>

Related

Can't save Tiny MCE data | Laravel 8 Livewire

I have implemented Tiny MCE for my news articles and got it working with the code below. When I implement the same code on a different crud page the Tiny MCE content doesn't save into my variable.
Create.blade.php
<!-- TinyMce -->
<div class="mb-2 col-span-8 sm:col-span-8" wire:ignore>
<textarea class="tinymce form-input rounded-md shadow-sm mt-1 block w-full " id="content"
name="content" rows="20"
wire:model.debounce.9999999ms="content"
wire:key="content"
x-data
x-ref="content"
x-init="
tinymce.init({
path_absolute: '/',
selector: 'textarea.tinymce',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen ',
'insertdatetime media nonbreaking save table directionality',
'emoticons template paste textpattern imagetools help '
],
toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help ',
relative_urls: false,
remove_script_host : false,
document_base_url: '{{config('app.url')}}/',
language: 'en',
setup: function (editor) {
editor.on('init change', function () {
editor.save();
});
editor.on('change', function (e) {
#this.set('content', editor.getContent());
});
},
});
">
</textarea>
</div>
create.php
public $content = '';
dd($this->content);
The outcome of dd is an empty string and if I don't define the variable it will be null.
This option avoids making so many calls to the server with change or blur events.
<script>
var keypupTimer;
tinymce.init({
selector: '#description',
forced_root_block: false,
theme: "modern",
height: 300,
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 template paste textcolor"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
setup: function(editor) {
editor.on('init change', function() {
editor.save();
});
editor.on('KeyUp', function(e) {
clearTimeout(keypupTimer);
keypupTimer = setTimeout(DoSomething, 1000);
});
},
});
function DoSomething() {
#this.set('description', tinyMCE.activeEditor.getContent());
}
</script>

tinymce adding extra ul tags on loading

Here is my issue plain and simple. I have an input field with this exact data:
<ul>
<li>test</li>
<li>test</li>
</ul>
On load of tinymce if I looked at the code it has in its field it shows this:
<br>
<ul>
<ul>
<li>test</li>
</ul>
</ul>
<br>
<ul>
<ul>
<li>test</li>
</ul>
</ul>
So, as you can see upon loading it is adding extra ul tags and breaks to the field.
Now here is my current config(Note I do have the latest tinymce version 4.8.5, but this also happens with an older version I have of 4.6.5):
tinyMCE.init({
mode : "exact",
elements : "ta_description, ta_restrictions",
// General options
forced_root_block : false,
theme : "modern",
width : "100%",
height : "250px",
menubar: false,
toolbar1: "undo redo styleselect fontselect fontsizeselect | bold italic forecolor backcolor",
toolbar2: "code image link table | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern moxiemanager"
]
});
This is causing an issue because everytime I save, the process repeats and it adds even more ul tags. Which is similar to why I have forced_root_block disabled because on save it kept adding more and more <p> tags. Now I have found that marking br tags as an invalid element prevents this behavior, but those are needed for linebreaks, I mention that because I am not sure if that helps narrow down where an issue may be.
Note: I am not using wordpress.
Update: This config ended up working for us.
<script defer="defer" type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "ta_description, ta_restrictions",
// General options
forced_root_block : 'div',
invalid_elements : 'br',
theme : "modern",
width : "100%",
height : "250px",
menubar: false,
toolbar1: "undo redo styleselect fontselect fontsizeselect | bold italic forecolor backcolor",
toolbar2: "code image link table | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern moxiemanager"
]
});
</script>
If I load your content into TinyMCE I don't see it making all of these extra tags:
http://fiddle.tinymce.com/d4gaab/5
I would suspect there is something in your pre/post processing of the content when its loaded into or extracted from the editor that is causing this to happen.

tinymce wiris plugin not showing formulas on form edit mode

When I add formulas from tinymce wiris plugin, it's successfully added.
but when I see these in form edit mode it is not showing why ?
This is my code on edit content form :
tinymce.init({
selector: '.text_editors', theme: "modern", height: 100,
plugins: [
"placeholder advlist autolink link image lists charmap hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
"table directionality emoticons paste textcolor responsivefilemanager code tiny_mce_wiris"
],
toolbar1: "bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor code tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry tiny_mce_wiris_CAS",
// toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor | print preview code ",
image_advtab: true,
external_filemanager_path: "<?php echo $this->webroot; ?>js/tinymce/plugins/filemanager/",
filemanager_title: "Nactus Filemanager",
external_plugins: {
"filemanager": "<?php echo $this->webroot; ?>js/tinymce/plugins/filemanager/plugin.min.js",
// "tiny_mce_wiris": "<?php //echo $this->webroot; ?>js/tinymce/plugins/tiny_mce_wiris/plugin.js",
}
});

TinyMCE removes classes from <span> and <i> elements

In code (source) editor of TinyMCE, when I want to add some span or i element with classes (for example, when I want to add Font Awesome icon) - TinyMCE removes classes. For example, if I want to add:
<span class="fa fa-university"></span>
at the end I will have just:
<span></span>
Also, in source code editor I tried to add <i class="fa fa-university"></i> but the problem is same - classes are deleted by TinyMCE (<i></i>).
I am using TinyMCE v4.4.1 and these are my settings:
tinymce.init({
selector: '#body',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern codesample fontawesome noneditable'
],
toolbar1: 'insertfile undo redo | formatselect fontselect fontsizeselect fontawesome',
toolbar2: 'bold italic underline strikethrough forecolor backcolor removeformat superscript subscript | alignleft aligncenter alignright alignjustify | outdent indent',
toolbar3: 'code preview | link unlink anchor image media | codesample | bullist numlist table blockquote hr nonbreaking | charmap emoticons | visualchars visualblocks',
image_advtab: true,
relative_urls: false,
extended_valid_elements: 'span',
content_css: '/css/all.css' // this includes fontwawesome...
});
Try adding the following to your TinyMCE configuration:
valid_elements: "*[*]"
When I do this I can add the <span> you reference without issue.
I know this is an old question but this worked for me
extended_valid_elements: 'span[*]'

Tinymce 4 duplicate div's when there are empty div's

This is my first post and I've been searching for a solution for this problem several weeks without any result. I hope you can help me!!!
I'm going to try to explain my problem:
I paste this code into the code editor
<div class="cta">
<div class="recomendado">
Te recomendamos
<div class="triangulo"></div>
</div>
</div>
And click in the OK button. If I click again in the code editor, the result is:
<div class="cta">
<div class="cta">
<div class="recomendado">Te recomendamos
<div class="triangulo"></div>
</div>
</div>
</div>
This is not posibble for my aplication and the html code is created by the client and is not possible to changed that.
In this few weeks, I see the problem are the empty div's. (this example is a short example of the real code).
Our version of tinymce is the 4.0.23 and this is my configuration:
tinymce.init({
selector: "textarea.-dlpe-html",
theme: "modern",
forced_root_block: false,
resize: false,
height: 450,
valid_children: "+h3[span|p|br],h2[span|p|br],h1[span|p|br],h4[span|p|br],h5[span|p|br],div[div|h3|h2|p],span[span|strong],p[div|p|span|strong]",
//extended_valid_elements: "+h3[span|p|br],h2[span|p|br],h1[span|p|br],h4[span|p|br],h5[span|p|br],div[h3|p]",
valid_elements: "* [ * ]",
extended_valid_elements: "* [ * ]", //the blanks are not in real code
cleanup: false,
plugins: [
"advlist autolink link lists charmap print hr anchor pagebreak",
"searchreplace visualblocks visualchars code fullscreen insertdatetime nonbreaking",
"save table contextmenu directionality paste textcolor"
],
toolbar: "undo redo | code | styleselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | print | fullscreen",
});
Please, I'm desperated with this bug. Thanks in advance (and sorry for my poor english).
Finally I can solved this problem.
After downgrade the tinymce version to 3.5, I notice that one of the lines in the configuration code was failling.
If you delete the "div[div|h3|h2|p]" part, the error no appear.
Thanks