I would like add change font-style for text;
For it I use this script:
tinymce.init({
selector: selector_id,
theme: "modern",
theme_modern_font_sizes: ["6px,7px,8px,9px,10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px,31px,32px,36px,38px,40px"],
font_size_style_values: ["6px,7px,8px,9px,10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px,25px,26px,27px,28px,29px,30px,31px,32px,36px,38px,40px"],
/* width: 300,
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"
],
content_css: "./style.css",
toolbar: "insertfile undo redo | fontsizeselect | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
file_browser_callback : elFinderBrowser ,
spellchecker_languages : '+Русский=ru,English=en'
});
But inside of my font-size(6px,7px,8px,9px an other) I see 8pt,10px,12pt and other.
Please tell me why I don't see my font size in select and how do I make it right?
Your setup seams to be for tinymce 3.x. Forget that, upgrade to 4.x and use as follow:
tinymce.init({
fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
theme: 'modern',
and then in toolbar:
toolbar: "undo redo pastetext | styleselect | fontselect | fontsizeselect"
How to change font size in wordpress & tiny mce, no coding required...just -
1.Use the plugin 'TinyMCE Advanced'
Activate it in settings.
More detailed instructions here.
For version Version 4.1.9
You will need to edit your active theme functions.php with this:
// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
function wpex_mce_text_sizes( $initArray ){
$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
Reference: http://www.wpexplorer.com/wordpress-tinymce-tweaks/
Related
I have installed TinyMCE Version: 5.10.3 (2022-02-09)
this is the code:
tinymce.init({
selector: 'textarea.redactor-editor',
plugins: 'preview paste searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview | image media template link codesample',
image_advtab: true,
height: 500,
extended_valid_elements: "pre[*],script[*],style[*]",
valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : "*[*]",
quickbars_insert_toolbar: '',
quickbars_selection_toolbar: '',
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding'
});
and when I am landing to my page everytime it is showing this warning message:
The following deprecated features are currently enabled, these will be removed in TinyMCE 6.0. See https://www.tiny.cloud/docs/release-notes/6.0-upcoming-changes/ for more information. Plugins: - imagetools (moving to premium) - toc (moving to premium)
How can I turn off this message?
add deprecation_warnings: false, to you're init
I am trying to reset the content inside tinymce editor to default on a button click.
Here is my current tinymce initialization code and I also have initialized to set default content when the editor loads up. On button click I want to run setDefaultContent() function, which is used in tinymce.init
tinymce.init({
// General options
selector: "textarea",
editor_selector : "mceEditor",
branding: false,
**init_instance_callback: "setDefaultContent",**
height : "300px",
width : "1000",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
formats: {
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myleft'},
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'mycenter'},
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myright'},
alignfull: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myfull'}
},
content_style: '.myleft { text-align:left; } .mycenter { text-align:center; } .myright { text-align:right; } .myfull { text-align:justify; }',
forced_root_block: false
});
If you just want to clear the content use:
tinyMCE.activeEditor.setContent('');
link_class_list plugin allows to create a list of classes to choose when adding a link. Is there a way to add an open input instead of a dropdown so the user can enter any class?
These are the parameters on the documentation but there isn't any mention regarding an open input field.
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "link",
menubar: "insert",
toolbar: "link",
link_class_list: [
{title: 'None', value: ''},
{title: 'Dog', value: 'dog'},
{title: 'Cat', value: 'cat'}
]
});
<script>
tinymce.init({
selector: 'textarea',
menubar:false,
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor code pageembed codesample advcode '
],
toolbar: 'bold italic | link image preview media fullpage pageembed | code codesample forecolor backcolor | emoticons styleselect alignleft aligncenter alignright alignjustify bullist numlist outdent indent |table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol',
default_link_target: '_blank',
style_formats: [{title: 'Button (Default)', selector: 'a', classes: ''}, {title: 'Button (primary)', selector: 'a', classes: 'btn btn-primary'}, {title: 'Button (success)', selector: 'a', classes: 'btn btn-success'}],
link_class_list: [{title:'Button (Default)', value:''}, {title:'Button (primary)', value:'btn btn-primary'}, {title:'Button (success)', value:'btn btn-success'}]
});
</script>
Try this.
Is it possible to change the back ground color of TinyMCE (I am not talking about editor). I am talking about this:
Do I need to overwrite the css from TinyMCE i.e. 'skin.min.css'? Or there is some other way as well.
That's how I am using TinyMCE right now:
tinymce.init({
theme: "modern",
selector: "#contentpage_0_content_0_txtAreaDetails",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
editor_css: "/css/TinyMCE/mycontent.css",
paste_data_images: true,
content_css: "/css/TinyMCE/mycontent.css",
width: 665,
height: 330
}); // Tinymce END
I also tried to add
.mce-panel {
background-color: red; // just an example
}
in mycontent.css but it now working.
Yes, you need to overwrite skin.min.css.
You could optionaly create your own theme (just copy the default theme and apply your changes).
you can add this in your css file:
.tox.tox-tinymce * {background: red;}
Note: change red to any color you want, obviously.
When you copy and paste from a word document in to the tinyMCE editor sometimes there are unwanted <p> tags:
<p> </p>
<div class="starpasspro-example-question">
<p><strong>Example: Levels of strategy</strong></p>
<p>Microsoft is one of the world’s largest organisations, providing corporate solutions to businesses throughout the world to help them realise their fullest potential. At Microsoft, there are three levels of strategy as follows:</p>
</div>
<p> </p>
Here the code that generates I want to remove the <p> tags any way to do that ?
Add these Lines in your tinymce.init({ });
Example:
tinymce.init({
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false,
});
it will be helpful.
Add into your tinymce.yml file
forced_root_block : ""
force_br_newlines : true
force_p_newlines : false
Yes, this is possible. There is a secure way to remove all that html elements you want to removed (you may define what to keep). It is by using the tinymce config params paste_preprocess and a custom function strip_tags. Check it out here.
Add this to your functions.php file and the standard p-tags
tags will be removed by adding some parameters to the tiny_mce_before_init hook. If you want to see how it works, you can read further on this page: https://codex.wordpress.org/TinyMCE
////////////////////////////////////////////////////////////////////////
//////////REMOVE STANDARD <P> FROM TINYMCE EDITOR/////////////////////////
///////////////////////////////////////////////////////////////////////
function my_format_TinyMCE( $in ) {
$in['forced_root_block'] = "";
$in['force_br_newlines'] = TRUE;
$in['force_p_newlines'] = FALSE;
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
USE HtmlEncode="false" in BoundField
<asp:BoundField DataField="PostContent" HtmlEncode="false" />
Thanks to Prahalad Gaggar!
I had the same problem and I solved it by reading this topic: https://stackoverflow.com/a/22397116/14491024
here is my code with each time adding <p<br/<br/</p so annoying)
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
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 imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}
And here is with problem SOLVED:
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
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 imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
//remove <p><br /><br /></p>
forced_root_block: "" ,
force_br_newlines: true,
force_p_newlines: false,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}