This code is inside head tag:
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#editor',
theme: 'modern',
plugins: ['autoresize advlist autolink lists link image charmap hr anchor pagebreak',
'searchreplace visualblocks visualchars code',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: ['//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css'
]
});
</script>
Console:
GET http://fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css
Any help?
Lorem ipsum dolor sit amet, justo eripuit eos eu. Ex quo viris facilis imperdiet, quidam pertinacia philosophia
Looks like you copied the code from one of the TinyMCE demos on their web site... if you don't have an account with Fonts.com then referencing those fonts in your application will lead to an error.
You can learn more about what the content_css configuration option does here:
https://www.tinymce.com/docs/configure/content-appearance/#content_css
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
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[*]'
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>