add tinymce for new element loaded dynamicaly - tinymce

My page is lodaed with 5 divs which can be edited by Tinymce inline editor. I've a peace of Jquery loding 5 new ones by clicking on a button (so dynamicaly). But of course the new ones are not affected by Tinymce, as the init has already been loaded... How can I manage to activate tinymce for new divs please?
My HTML :
<div id=\"billetdroit\">
<div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
<div class=\"editable\" id=\"tiny_01\">blablabla2</div>
</div>
<div id=\"billetdroit\">
<div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
<div class=\"editable\" id=\"tiny_02\">blablabla2</div>
</div>
<div id=\"billetdroit\">
<div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
<div class=\"editable\" id=\"tiny_03\">blablabla2</div>
</div>
...
...
And a button: when you click, it make appears 5 more divs "billetdroit" dynamicaly
My tinymce init:
tinymce.init({
selector: "textarea",
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
});
tinymce.init({
selector: "h1.editable",
language: 'fr_FR',
inline: true,
toolbar: "undo redo",
menubar: false
});
tinymce.init({
selector: "div.editable",
language: 'fr_FR',
image_advtab: true,
menubar:false,
inline: true,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
});
Any solution?
Thanks
EDIT:
I tryied that:
$(document).ready(function() {
var track_click = 1; //track user click on "load more" button, righ now it is 0 click
var total_pages = Globals.total_pages;
// $('#results').load("loadmore.php", {'page':track_click}, function() {track_click++;}); //initial data to load
$(".load_more").click(function (e) { //user clicks on button
$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image
if(track_click <= total_pages) //user click number is still less than total pages
{
//post page number and load returned data into result element
$.post('loadmore.php',{'page': track_click}, function(data) {
$(".load_more").show(); //bring back load more button
$("#results").append(data); //append data received from server
//scroll page smoothly to button id
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_click++; //user click increment on load button
}).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
alert(thrownError); //alert with HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
});
if(track_click >= total_pages-1) //compare user click with page number
{
//reached end of the page yet? disable load button
$(".load_more").attr("disabled", "disabled");
}
}
$.getScript('include/tinymce/tinymce.min.js', function() {
tinymce.init({
selector: "textarea",
language: 'fr_FR',
image_advtab: true,
menubar:false,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
});
tinymce.init({
selector: "h1.editable",
language: 'fr_FR',
inline: true,
toolbar: "undo redo",
menubar: false
});
tinymce.init({
selector: "div.editable",
language: 'fr_FR',
image_advtab: true,
menubar:false,
inline: true,
forced_root_block: false,
plugins: ["link","code","media","image","textcolor", "emoticons"],
toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
});
});
});
});
But without success...

There is an easy way to init tinymce editors:
tinyMCE.execCommand("mceAddControl", false, 'your_div_id');

Related

Tinymce not loading in toogle condition (livewire)

component view:
#if ($rich)
<textarea name="content" class="tinymce">{{ $content }}</textarea>
#else
<textarea name="content">{{ $content }}</textarea>
#endif
I want that, if "$rich" found then show tinymce if not then show plain text. condition working fine. but the problem is first time load tinymce toolbar. after that in reverse the tinymce toolbar not loading.
So i don't understand how to load this.
thanks.
I solved my problem this way -
I made two separate child livewire and put the textarea code as per component.
a. simple (livewire)
b. tinymce (livewire)
these child livewire i called from one parent livewire in "if else" condition which i mentioned above post.
#if ($rich)
<livewire:common.tinymce>
#else
<livewire:common.simple>
#endif
in 'tinymce livewire' component view i wrote tinymce init script in "script" tag before content.
EXAMPLE: (tinymce component view)
<div>
<script>
tinymce.init({
selector: "textarea.tinymce",
menubar: false,
statusbar: true,
height: "159px",
paste_data_images: true,
plugins: [
"advlist lists link preview hr paste table",
],
toolbar: "styleselect bold italic bullist | blockquote hr | alignleft aligncenter alignright underline alignjustify | link unlink table",
autosave_interval: "30s",
browser_spellcheck: true,
style_formats: [
{title: "Header 1", format: "h1"},
{title: "Header 2", format: "h2"},
{title: "Header 3", format: "h3"},
{title: "Header 4", format: "h4"},
{title: "Header 5", format: "h5"},
{title: "Header 6", format: "h6"},
{title: "paragraph", format: "p"},
],
});
</script>
<div class="editorpad">
<p class="nm"> content </p>
<textarea name="content" class="tinymce">{{ $content ?? '' }}</textarea>
</div>
</div>
done!
all is working fine.

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[*]'