Hello to everybody and happy new year!
I'm using Tinymce 5x and I have a big problem to output valid html5 + microdata with my editor. Here's how I've initialized the editor:
tinymce.init({
selector: 'textarea.editors',
schema: 'html5',
extended_valid_elements : "@[itemtype|itemscope|itemprop|id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup]",
plugins: 'print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
imagetools_cors_hosts: ['picsum.photos'],
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic underline strikethrough | image toc visualblocks | fontselect fontsizeselect formatselect | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl',
toc_depth: 4,
toolbar_sticky: true,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "{path}{query}-{id}-",
autosave_restore_when_empty: false,
autosave_retention: "2m",
image_advtab: true,
relative_urls : false,
remove_script_host : true,
document_base_url : "https://www.example.com/",
external_image_list_url : "process.php?basics=media_img_list",
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
importcss_append: true,
height: 300,
height: 500,
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: "mceNonEditable",
toolbar_drawer: 'sliding',
contextmenu: "link image imagetools table",
style_formats: [
{ title: 'Citation', block: 'div', classes: 'quotation' },
]
});
Now what I want to Output is this:
<section itemscope itemtype="http://schema.org/Question">
<h2 itemprop="name text">My Question</h2>
<div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
<p itemprop="text">My Answer</p>
</div>
</section>
But when I save this with the HTML editor all attributes are stripped and when I send it to my PHP file, it strips section tag.
Can you please help me to solve this issue?