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>
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>
I configured TinyMCE (community version 5.0.14) like this:
<script>tinymce.init({
selector:'textarea',
plugins: "lists",
plugins: "table",
plugins: "link",
toolbar: "undo redo | styleselect bold italic | numlist bullist | alignleft aligncenter alignright alignjustify | outdent indent | link",
});</script>
Which get me this:
When I add image to plugins and toolbar like that:
<script>tinymce.init({
selector:'textarea',
plugins: "lists",
plugins: "table",
plugins: "link",
plugins: "image",
toolbar: "undo redo | styleselect bold italic | numlist bullist | alignleft aligncenter alignright alignjustify | outdent indent | link image",
});</script>
The image button is shown, but the link button disappears :
What am I doing wrong?
You don't want to have multiple plugins items in your configuration object. You want one single plugins value that contains a single string of all the plugins you want to load.
For example:
tinymce.init({
selector: "textarea",
plugins: "advlist autolink lists link image charmap print preview anchor",
toolbar: "undo redo | bold italic"
});
The appropriate documentation is here: https://www.tiny.cloud/docs/configure/integration-and-setup/#plugins
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.
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",
}
});
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[*]'