I created a toolset form which has multiple wysiwig fields. None of them display the editing tools and my javascript console shows the following errors:
Uncaught TypeError: Cannot read property 'editor' of undefined
at ?preview_nonce=48c98aa3dc&preview=true:96
?preview_nonce=48c98aa3dc&preview=true:115 Uncaught ReferenceError: tinymce is not defined
at ?preview_nonce=48c98aa3dc&preview=true:115
?preview_nonce=48c98aa3dc&preview=true:156 Uncaught ReferenceError: wptValidationForms is not defined
at ?preview_nonce=48c98aa3dc&preview=true:156
autoptimize_10a8dd623871caf03b29dd4ffea5cce4.js:827 Uncaught SyntaxError: Invalid regular expression flags
?preview_nonce=48c98aa3dc&preview=true:94 Uncaught TypeError: Cannot read property 'setDefaults' of undefined
at HTMLDocument.<anonymous> (?preview_nonce=48c98aa3dc&preview=true:94)
at i (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
at Function.ready (jquery.js:2)
at HTMLDocument.K (jquery.js:2)
Here is the form Content:
[credform]
[cred_field field='form_messages' class='alert alert-warning']
<div class="form-group ">
<label>Color</label>
[cred_field field='color' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Profile Image</label>
[cred_field field='profile-image' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Name</label>
[cred_field field='post_title' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Age From</label>
[cred_field field='age-from' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Age To</label>
[cred_field field='age-to' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Highest Level of Education</label>
[cred_field field='highest-level-of-education' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Social Media Networks</label>
[cred_field field='social-media-networks' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Industry</label>
[cred_field field='industry' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Organization Size From</label>
[cred_field field='organization-size-from' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Organization Size To</label>
[cred_field field='organization-size-to' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Preferred Methods of Communication</label>
[cred_field field='methods-of-communication' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Tools they Need to do their Job</label>
[cred_field field='tools' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Job Responsibilities</label>
[cred_field field='job-responsibilities' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Their Job is Measured By</label>
[cred_field field='their-job-is-measured-by' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Reports To</label>
[cred_field field='reports-to' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Goals and Objectives</label>
[cred_field field='goals-and-objectives' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>Biggest Challenges</label>
[cred_field field='biggest-challenges' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group ">
<label>They Gain information By</label>
[cred_field field='they-gain-information-by' force_type='field' class='form-control' output='bootstrap']
</div>
[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
[/credform]
Hello,
The problem you mentioned above is abnormal, please try these:
1) In case it is a compatibility problem, please deactivate other plugins (include Elementor plugins), and switch to wordpress default theme 2019, and test again
2) If the problem is fixed, please activate other plugins one by one, try to locate the problem plugin/theme,
3) If you need assistance to locate the problem plugin/theme, please provide a copy of your website in below private message box, also point out the problem page URL and form URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/
Upon trying what you said, I discovered the issue lies with a plugin called Autoptimize.
The issue is caused by enabling the "Aggregate JS-files?" options within the "JavaScript Options" Section.
I tried adding
media-upload.min.js, iris.min.js, editor.min.js, color-picker.min.js
as exceptions but that did not seem to help.
Could there be any other scripts that are needed by toolset forms, that I should add?
This is fortunately not a production site so for my purposes I am ok, but this is an incompatibility between toolset and Toolset and Autoptimize you may want to document. I will notify the developer of the plugin and point them to this ticket and hopefully you can work together to resolve the issue.
Thank you for pointing me in the right direction
Yes, you are right, it seems to be a compatibility issue with Autoptimize plugin, I suggest you create new ticket, and provide the a link of of your website duplicator package, we need to do debug on it.
