Crocoblock/jetformbuilder

Wysiwyg | Tiny MCE not loading occasionally.

djstini opened this issue · 0 comments

djstini commented

Hi there!

i have a bit of a situation on my page. We are using a Jet-Form builder form in which there are also multiple "Wysiwyg Field"s fields.

Now every now and then (would say about 5/10 times) when i open the page with the form, the editor will not be editable.
To be more specific, the Tool-Bar loads, so does the Editors footer-bar. But the Content area is not clickable/editable and also doesn't show the existing content.
Screenshot of the editor when it doesnt work:
image

I've looked into the html code of the page and found that the iframe contained in the editor is empty whenever it doesnt work:

Wrong iFrame content:

<html>
<head>
</head>
<body>
</body>
</html>

Correct iFrame content:

<html>
<head>
<style id="mceDefaultStyles" type="text/css">.mce-content-body div.mce-resizehandle {position: absolute;border: 1px solid black;box-sizing: content-box;background: #FFF;width: 7px;height: 7px;z-index: 10000}.mce-content-body .mce-resizehandle:hover {background: #000}.mce-content-body img[data-mce-selected],.mce-content-body hr[data-mce-selected] {outline: 1px solid black;resize: none}.mce-content-body .mce-clonedresizable {position: absolute;opacity: .5;filter: alpha(opacity=50);z-index: 10000}.mce-content-body .mce-resize-helper {background: #555;background: rgba(0,0,0,0.75);border-radius: 3px;border: 1px;color: white;display: none;font-family: sans-serif;font-size: 12px;white-space: nowrap;line-height: 14px;margin: 5px 10px;padding: 5px;position: absolute;z-index: 10001}
.mce-visual-caret {position: absolute;background-color: black;background-color: currentcolor;}.mce-visual-caret-hidden {display: none;}*[data-mce-caret] {position: absolute;left: -1000px;right: auto;top: 0;margin: 0;padding: 0;}
.mce-content-body .mce-offscreen-selection {position: absolute;left: -9999999999px;max-width: 1000000px;}.mce-content-body *[contentEditable=false] {cursor: default;}.mce-content-body *[contentEditable=true] {cursor: text;}
img:-moz-broken {-moz-force-broken-image-icon:1;min-width:24px;min-height:24px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" id="u0" href="https://xxx.xxx/wp-includes/js/tinymce/skins/lightgray/content.min.css?wp-mce-49110-20201110">
<link rel="stylesheet" type="text/css" id="u1" href="https://xxx.xxx/wp-includes/css/dashicons.min.css?ver=6.7.1&amp;wp-mce-49110-20201110">
<link rel="stylesheet" type="text/css" id="u2" href="https://xxx.xxx/wp-includes/js/tinymce/skins/wordpress/wp-content.css?ver=6.7.1&amp;wp-mce-49110-20201110">
</head>
<body id="tinymce" class="mce-content-body " data-id="wp_editor_long-description" contenteditable="true">
<p>
<br data-mce-bogus="1">
</p>
</body>
</html>

There are no errors logged to the browser console.

It is notable that even though i have a prefill configured:
image
It wont load when the editor doesn't work nor when it does.