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
Related
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>
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.
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>
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[*]'
I am using the justboil.me plugin for TinyMce 4 after reading all the documentation and followed step by step the instructions.
The plugin is uploading the images to the right path perfectly, but it does not show on the editor. And when I see the HTML output in tinyMce there is no image tag at all.
This is my TinyMce configuration:
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
tinymce.init({
selector:"textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages"
],
external_plugins: {
"jbimages": "http://root.flubby.org/apps/tiny_mce/plugins/jbimages/plugin.min.js"
},
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link jbimages",
relative_urls: false
});
</script>
Note: I am running this script on a complete different domain. I don't think it should affect, since the plugin is running and uploading the image. Just without the last step of adding it to the contents.
Any ideas? Thanks a lot for reading =)
You can use this code
tinymce.init({
imageupload_url: "../upload/",
selector: "textarea",
theme: "modern",
language: "en",
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 imageupload"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons imageupload",
relative_urls: false
});
This is my configuration i hope help :)
<script src="../js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
height : 240,
width : 900,
selector : "textarea",
plugins : "jbimages table link autolink charmap print preview searchreplace code",
toolbar : "undo redo | bold italic underline charmap searchreplace | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect table | link code | jbimages preview",
menubar : false,
relative_urls : false
});
</script>