I'm trying to add custom font family in TinyMCE Editor version 4.0b1 and keep failing.
All default fonts show, custom fonts like 'Century Gothic' or 'Gill Sans MT' are not showing. Is theme_advanced_fonts not working in TinyMCE 4? I can't find any TinyMCE 4 documentation for this.
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | fontselect fontsizeselect | forecolor backcolor",
convert_urls: false,
content_css: 'http://www.mydomain.com/css/fonts.css',
theme_advanced_font_sizes : "8px,10px,12px,14px,16px,18px,20px,24px,32px,36px",
theme_advanced_fonts : "Andale Mono=andale mono,times;"+
"Arial=arial,helvetica,sans-serif;"+
"Arial Black=arial black,avant garde;"+
"Book Antiqua=book antiqua,palatino;"+
"Comic Sans MS=comic sans ms,sans-serif;"+
"Courier New=courier new,courier;"+
"Century Gothic=century_gothic;"+
"Georgia=georgia,palatino;"+
"Gill Sans MT=gill_sans_mt;"+
"Gill Sans MT Bold=gill_sans_mt_bold;"+
"Gill Sans MT BoldItalic=gill_sans_mt_bold_italic;"+
"Gill Sans MT Italic=gill_sans_mt_italic;"+
"Helvetica=helvetica;"+
"Impact=impact,chicago;"+
"Iskola Pota=iskoola_pota;"+
"Iskola Pota Bold=iskoola_pota_bold;"+
"Symbol=symbol;"+
"Tahoma=tahoma,arial,helvetica,sans-serif;"+
"Terminal=terminal,monaco;"+
"Times New Roman=times new roman,times;"+
"Trebuchet MS=trebuchet ms,geneva;"+
"Verdana=verdana,geneva;"+
"Webdings=webdings;"+
"Wingdings=wingdings,zapf dingbats"
});
Looks like TinyMCE 4 has been updated, custom fonts works now.
Check this link for the CSS font source:
http://www.tinymce.com/wiki.php/Configuration:content_css
Check this link for the custom font setting:
https://www.tinymce.com/docs/configure/content-formatting/#font_formats
The weird thing is, some of the fonts work (the font style on the custom font list name is correct - green), some not (custom font listed, but the style is not the supposed font style - red)
Looks like theme_advanced_fonts has problem and not fixed yet.
I'm using an alternative solution with style_formats to define fonts
tinymce.init({
...
toolbar: "styleselect",
style_formats: [
{title: 'Open Sans', inline: 'span', styles: { 'font-family':'Open Sans'}},
{title: 'Arial', inline: 'span', styles: { 'font-family':'arial'}},
{title: 'Book Antiqua', inline: 'span', styles: { 'font-family':'book antiqua'}},
{title: 'Comic Sans MS', inline: 'span', styles: { 'font-family':'comic sans ms,sans-serif'}},
{title: 'Courier New', inline: 'span', styles: { 'font-family':'courier new,courier'}},
{title: 'Georgia', inline: 'span', styles: { 'font-family':'georgia,palatino'}},
{title: 'Helvetica', inline: 'span', styles: { 'font-family':'helvetica'}},
{title: 'Impact', inline: 'span', styles: { 'font-family':'impact,chicago'}},
{title: 'Symbol', inline: 'span', styles: { 'font-family':'symbol'}},
{title: 'Tahoma', inline: 'span', styles: { 'font-family':'tahoma'}},
{title: 'Terminal', inline: 'span', styles: { 'font-family':'terminal,monaco'}},
{title: 'Times New Roman', inline: 'span', styles: { 'font-family':'times new roman,times'}},
{title: 'Verdana', inline: 'span', styles: { 'font-family':'Verdana'}}
],
...
});
result:
tinymce.init({
...
font_formats:
"Default='myFontFace', Arial, Helvetica, Tahoma, Verdana, sans-serif;"+
"Arial=arial,helvetica,sans-serif",
...
});
In tinymce 4, theme_advanced_fonts has been rename to font_formats.
You can find the detail from
https://www.tinymce.com/docs/configure/content-formatting/#font_formats
'advanced' and 'simple' theme is removed from tinyMCE 4. New theme added is called 'modern'.
http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x
Related
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.
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>
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",
}
});
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
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[*]'