[Resolved] Toolset CRED WYSIWYG default font

[Author]

Posts

[Ljuba]

GOAL is that via CRED should to be enabled for visitor/user maximum pleasant visual and functional experience during filling the form. For such reasons, I want to set in WYSIWYG 'natural' (as it will appear in View/Content Template/Layout) font family, weight and size.

1) I set Visual Editor as default.

add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );

2) I removed 'Editor mode switch buttons'.

.wp-editor-tabs {
display: none;
}

3) I removed all fonts and set only one to be available (Lato) for editor.

function tiny_mce_custom_font_list($in){
$in['font_formats']='Lato=lato, sans-serif';

return $in;
}
add_filter('tiny_mce_before_init', 'tiny_mce_custom_font_list' );

P.S. Above php or below JS, both make same final outcome.

tinymce.init({
selector: '#editor',
plugins: 'code',
toolbar: [
"undo redo | bold italic | fontselect | code"
],
font_formats: 'Lato=lato,sans-serif;',
})

PROBLEM

In CRED (but also in backend editor) I have only one font available (Lato), but Georgia is still default font (and not on the list). 'Freaky' part is that I set in Genesis as default font Lato, as well in Elementor (so, from where Georgia come, I don't have any idea).

P.S. Actually, this is very well known issue (Google search), but I didn't found answer/solution in any single page.

For me result that default font is somehow established by parent/active theme/framework, as that default font with Divi theme is Open Sans and with WordPress Seventeen is Libre Franklin. However, that is irrelevant as default font is all the time that theme default font and not for editor assigned available fonts.

[Luo Yang]

Hello,

Please elaborate the question with more details:
In CRED (but also in backend editor) I have only one font available (Lato), but Georgia is still default font

How and where I can see the problem you mentioned above?
Please take a screenshot for it, thanks

[Ljuba]

OK

P.S. To get same results just apply same steps (actions) as I explained above).

1) In GIF screencast you will see:
- Two fonts (different from Lato), what is the same.
- initial CSS (in Inspector)
- Initial font (Georgia)
- Available fonts for editor (two Google fonts in drop down list)
- New default editor font (by drop down selection) - and fact that font is changed by selection of new family.
- New CSS (in Inspector) with new default font
- FINALLY - Fact that initial default editor font is not part of available fonts for editor (triggered drop down list DO NOT SHOW Georgia as available font)

2) I REPEAT Initial default font is obviously determinate by theme (every theme 'drop' different initial default font - here is Georgia). But issue is that for purpose of visual experience of user, CRED WYSIWYG field type should to be capable to control those fonts (from begin), what obviously is not the case.

3) 'Live experience'

P.S. To get same results you just should to apply same steps (actions) as I explained above).

However, if you are not in position to do it, open private chat to send you credentials.

[Ljuba]

OK

Here is correct code (for step 3 in my initial post).

tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "fontselect fontsizeselect | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
	font_formats: "Andale Mono=andale mono,times;Book Antiqua=book antiqua,palatino",
	fontsize_formats: "8px 10px 11px 12px 14px 18px 24px 36px",
	setup: function (ed) {
                                    ed.on('init', function(ed) {
                                        ed.target.editorCommands.execCommand("fontName", false, "Book Antiqua");
										ed.target.editorCommands.execCommand("fontSize", false, "18px");
                                    });
									}
});

PROBLEM (remaining)

This is the Java code and not JQuery (needed by Toolset). How to force Toolset to apply this code.

So, I do not look for website wide option, as it allows me to get separate Visual Editor settings for CRED and WordPress itself.

[Ljuba]

Actually, to retain Editor WordPress wide as it is and just to customize editor in CRED form (what is the GOAL), I need to insert in Toolset CRED form JS Editor page code as follow

tinymce.init({
    selector: "textarea",
    min_height : 200,
    menubar:false,
    statusbar: false,
    resize: true,
    plugins: [
        "advlist autolink autoresize charmap colorpicker emoticons fullscreen hr insertdatetime lists paste preview searchreplace spellchecker textcolor"
    ],
	autoresize_bottom_margin: 50,
	paste_data_images: false,
	paste_as_text: true,
    toolbar: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | forecolor backcolor | bullist numlist indent outdent | spellchecker searchreplace | hr nonbreaking insertdatetime charmap emoticons | preview fullscreen",
	setup: function (ed) {
                                    ed.on('init', function(ed) {
                                        ed.target.editorCommands.execCommand("fontName", false, "Tahoma");
										ed.target.editorCommands.execCommand("fontSize", false, "18px");
                                    });
									}
});

plus CSS (to hide TABS) and it should to work. But it not working.

Code works and can be checked at hidden link

I can see only two possible issues:

1) Selector is wrong (but in inspector I can see that Toolset also use 'textarea').
2) In JS Editor should to be added something else (before and/or after code).

[Luo Yang]

I have tried the steps as you mentioned above:
https://toolset.com/forums/topic/toolset-cred-wysiwyg-default-font/#post-902250
There isn't the "font" dropdown field in the CRED form as your screenshot, see my WYSIWYG.JPG

So there isn't such a built-in feature within CRED plugin, even when you edit a wordpress post in admin side, I can not see the "font" dropdown field too.

So it requires custom codes, according to our support policy, we don't provide custom codes support:
https://toolset.com/toolset-support-policy/

I suggest you check it with our experienced contractors:
https://toolset.com/contractors/

[Ljuba]

Hi,

I hope so that you are joking. Here is not about custom codes, at all. Here is about two separate, but under same nature, problems related DIRECTLY to Toolset.

1) Firat issue is original question and it is:

How to set in CRED default custom font in Toolset WYSIWYG field type.

So, here is not about some 'third party' tool/field/plugin, here is about Toolset field type. It is complete different problem (but Toolset problem, not my), that Toolset using TinyMCE open source code for his own editor.

Or put it in other way, I do not ask for TinyMCE editor, I ask how to set default font family and size in Toolset CRED Visual Editor and that is 101% certainly under support policy conditions.

2) Second issue (not less problematic) is fact that Toolset JS Editor can't apply correct JS code. For such reasons, I provided to you third party link to check that code is correct and should to working as Toolset 101% using TinyMCE for its own editor (you can see that via inspector classes).

in other words, Toolset did some modifications of TinyMCE source code and that's why code don't working in Toolset JS Editor, but that change is done by Toolset, not by me. So, it is under support policy conditions.

However, I was extended with posts as I wanted to contribute as much is possible and not to argue. So, please be kind and cooperate in problems obviously under the support policy conditions.

[Luo Yang]

Thanks for the input,

Q1) How to set in CRED default custom font in Toolset WYSIWYG field type.
I assume we are talking about WYSIWYG field outputted from CRED shortcode [cred_field], see our document:
https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_field
There isn't any option to set default custom font in WYSIWYG field.
If you agree, we can take it as a feature request, our developers will evaluate it, maybe we can add parameters or apply some API hooks for user to setup the fonts and size.

Q2) Toolset JS Editor can't apply correct JS code
Same as above, there isn't such a built-in feature with CRED form, and current version of CRED form does not support the "correct JS code" as you mentioned above, if you agree, we can take it as a feature request.

[Ljuba]

Sorry, but your behavior is not exactly as it should to be from member of one support team.

YOUR BEHAVIOR

1) First, you're 'mocking' your (Toolset) client by repeating the 'tactics' of twisting the subject/topic. However, that is reflection of your personality, not of the client. Actually, probably is problem in fact that JS is not something what you really know (equally as me) and you just try to find the way how to avoid the support (as you are not capable to help). However, 'mocking' your client is not the proper way to do it.

2) In your unlimited arrogance, you do not even think that it's more than easy to find on the Toolset pages of a dozen examples where the IDENTICAL question was raised (in principle, of the very request for help - 'What's wrong with code implementation?'). E.g, https://toolset.com/forums/topic/adding-javascript-to-cred-post-form/ is just one of the links. Another https://toolset.com/forums/topic/prevent-submit-button-of-cred-form-to-scroll-page-on-validation/ (interesting, about custom script, what is not the case here despite your claim, but help was provided).

Do you want to claim that other supporters and your client are wrong and you are the only one who interpreting Toolset Policy correctly? Or maybe you claim how other Toolset supporters are literally idiots (it looks like exact term) as they make helps contrary to Toolset Support Policy and by that they waste Toolset resources for no reasons, contrary to 'policy'?

3) Those Toolset support links, as fact that it is about the fact that Toolset own feature not working as it is expected, makes your 'remarks' more than ridiculous. If JS code is JS code, it is more than 100% irrelevant is it (JS code itself) part of Toolset 'built-in feature' or not, as JS Editor is Toolset 'built-in feature' and it not works, as it cannot to apply WordPress wide applicable JS code in Toolset product (CRED in this case).

It not works because:

a) There is some bug in Toolset (not likely) function files (where Toolset call TinyMCE, as Toolset using same selector).
b) I don't know (it looks, not even you) how to apply the code in Toolset JS Editor (as it should to reflect only Visual editor in form and not system wide), as TinyMCE naively don't support JQuery (to transform the code).

In other words, problem is that as tinyMCE.init() initialization code can be put anywhere where a page is loaded, so either in a HTML file or in an included JavaScript file (Toolsed JS Editor should to do it) and it should to work out of the box, what I proved in my external test link.

EXTENDED TOPIC EXPLANATION

It is very easy to set all requests system wide, trough functions.php. E.g (put it in functions.php and try it, it will affect also CRED editor),

function my_format_TinyMCE( $in ) {
	$in['toolbar1'] = 'formatselect,fontselect,fontsizeselect,bold,italic,alignleft,aligncenter,alignright ';
	$in['toolbar2'] = '';
	$in['toolbar3'] = '';
	$in['toolbar4'] = '';
	return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );

But, as I started, goal is to customize specific CRED forms editor and not a system wide. If you know any other options than to apply JS script in form (what I try to do), be free and expose it (for me could be ok), but if you don't know any (other) way how to do it, than please be kind and don't 'mocking' me with such ridiculous remarks, as you intent all the time (in this topic).

PROPOSAL

As it looks that you don't have any idea about the reasons why above JS code works system wide, but not within specific CRED form JS Editor, please be kind and stop wasting our time and be kind to transfer topic to somebody who knows the answer.

[Minesh]

Luo is on vacation. He will get in touch with you as soon as he will back on Monday.

[Luo Yang]

I think there is some misunderstandings:

I have tried to add the PHP codes you provided above:
https://toolset.com/forums/topic/toolset-cred-wysiwyg-default-font/#post-903260

Then I can see the "font" and "fontsize" selectors in the CRED form.

And you are right, I can not find any existed solution or workaround for the questions you mentioned above:
https://toolset.com/forums/topic/toolset-cred-wysiwyg-default-font/#post-902669
Q1) How to set in CRED default custom font in Toolset WYSIWYG field type.
and
Q2) Toolset JS Editor can't apply correct JS code

So I have escalated this thread to our 2nd tier supporters, hope they can find any workaround for you. I will update this thread if there is any news.

[Ljuba]

I want to clear this topic, as for me looks that you yet not understand.

WHAT I DO NOT ASK AS SUPPORT (with this topic)

a) I don't ask any kind of support on any of actions on any of BACK-END EDITORS (that is WordPress issue support - shoudl be used PHP).

b) I don't ask any kind of support on any of actions on any of FRONT-END SITE WIDE EDITORS (that is WordPress issue support - can be done via PHP and/or JS of (child) theme).

c) I don't ask any kind of support on ANY CUSTOM CODE (that is custom development issue, out of support scope). However, there is dozens of links where Toolset provided such support and ANY SINGLE SUPPORT WAS WASTE OF RESOURCES (and also complete wrong, as editor itself is third party product and has very well developed customization capabilities and support - see further). Example, there are several topics vs character limitations and answers was wrong as there is still possible to insert more characters by simple 'paste' (not by typing). TinyMCE can solve it very simple (see and test at hidden link):

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    setup: function (ed) {
// Limit characters number by typing.
                                    ed.on( 'keypress', function(ed) {
                                        contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length; //Takes lenght of current editor
                                        if (contentContentLenght > 20) {
                                            ed.preventDefault();
                                            ed.stopPropagation();
                                                return false;
                                        } // contentContentLenght > 20 is my form character limit in mine project.
                                    });
// Limit characters number by paste.
                                    ed.on('paste', function(ed){
                                        contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length; //Takes lenght of current editor
                                        var data = ed.clipboardData.getData('Text');
                                        if (data.length > (20 - contentContentLenght)) {
                                                return false;
                                            } else {
                                                return true;
                                        } // contentContentLenght > 20 is my form character limit in mine project.
                                    });
                        }
}); 
</script>

WHAT I DO ASK AS SUPPORT (with this topic)

I simply asked - WHY ABOVE JS CODE NOT WORKING IN Toolset JS Editor?

Toolset using TinyMCE as his own editor in CRED created forms and contain his own JS Editor for customizing PARTICULAR FRONT_END EDITOR ON PARTICULAR CRED FORM and such my request under any circumstances cannot be classifieds like custom coding (as I don't ask such coding at all - contrary to Toolset support practice). I simply as why PROVEN WORKING JS CODE NOT WORKING IN TOOLSET?

Answer by definition must be simple:

1) There is the BUG in Toolset (JS Editor), or

2) Selector ('textarea') is different (or something third - ie. JS Editor can handle only JQuery and not the JS itself).

[Ljuba]

Sorry, I forgot. Above code not prevent image insertation (example), but TinyMCE developed already answers on ALL POTENTIAL ISSUES/REQUESTS (ie - how to add emoticons and many others)>.

So, instead that Toolset on any kind of questions related to CRED WYSIWYG 'customization', can simply to answer that user just need to insert in JS Editor 'tinymce.init' customized by instructions from TinyMCE. Instead of that, Toolset waste resources 'inventing' codes (ie character limitations) what is already long time ago solved in much more precise and practical manner.

In other words, SOLVING MY ISSUE Toolest will prevent (and solve) dozens/hundreds/... of future potential support questions (on 100$ full customer satisfaction).

So, this topic should be a kind of priority.

[Ljuba]

I found something, but it is really on Toolset to solve this, as I don't have any idea how you 'call TinyMCE'. SO, I have error

ReferenceError: tinymce is not defined

In other words, as Toolset JS Editor works with JQuery, TinyMCE script can be called as JQuery plugin via something like

$(function() {
    $('textarea.tinymce').tinymce({
        script_url: '..../wp-includes/js/tinymce/tinymce.min.js', //or whatever path is it
    setup: function (ed) {
// Limit characters number by typing.
                                    ed.on( 'keypress', function(ed) {
                                        contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length; //Takes lenght of current editor
                                        if (contentContentLenght > 20) {
                                            ed.preventDefault();
                                            ed.stopPropagation();
                                                return false;
                                        } // contentContentLenght > 20 is my form character limit in mine project.
                                    });
// Limit characters number by paste.
                                    ed.on('paste', function(ed){
                                        contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length; //Takes lenght of current editor
                                        var data = ed.clipboardData.getData('Text');
                                        if (data.length > (20 - contentContentLenght)) {
                                                return false;
                                            } else {
                                                return true;
                                        } // contentContentLenght > 20 is my form character limit in mine project.
                                    });
                        }
   });
});

However, as I'm very bad in JS and JQuery, I don't know how to do it and above code syntax (function part of syntax) is certainly wrong.

So, please, somebody be kind and finish this.

[Luo Yang]

For your question:
WHY ABOVE JS CODE NOT WORKING IN Toolset JS Editor?
In the demo you mentioned above:
hidden link
It is a textarea box with the custom JS codes, but in the CRED form, the TinyMCE editor has already been created by CRED plugin, so your custom JS codes won't be able to work.

Here is the feedback from our 2nd tier supporters:
This is not possible within current version of CRED plugin, and we have invited our developers into this issue, I will update this thread if there is any news.

As a workaround, you can use another plugin "TinyMCE Advanced" to customize the TinyMCE editor, you can download it here:
https://wordpress.org/plugins/tinymce-advanced/