TinyMCE editar contenido HTML5
Fecha Publicación:
19 de Enero de 2020
Fecha Modificación:
28 de Enero de 2020
Documentacion Original
https://www.tiny.cloud/docs-4x/demo/format-html5/
Instalando el Plugin visualblocks:
tinymce.init({
selector: 'textarea',
height: 500,
plugins: 'visualblocks',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
],
style_formats: [
{ title: 'Headers', items: [
{ title: 'h1', block: 'h1' },
{ title: 'h2', block: 'h2' },
{ title: 'h3', block: 'h3' },
{ title: 'h4', block: 'h4' },
{ title: 'h5', block: 'h5' },
{ title: 'h6', block: 'h6' }
] },
{ title: 'Blocks', items: [
{ title: 'p', block: 'p' },
{ title: 'div', block: 'div' },
{ title: 'pre', block: 'pre' }
] },
{ title: 'Containers', items: [
{ title: 'section', block: 'section', wrapper: true, merge_siblings: false },
{ title: 'article', block: 'article', wrapper: true, merge_siblings: false },
{ title: 'blockquote', block: 'blockquote', wrapper: true },
{ title: 'hgroup', block: 'hgroup', wrapper: true },
{ title: 'aside', block: 'aside', wrapper: true },
{ title: 'figure', block: 'figure', wrapper: true }
] }
],
visualblocks_default_state: true,
end_container_on_empty_block: true
});
Este ejemplo muestra cómo editar contenido HTML5, como secciones y artículos
See the Pen HTML5 Formats by TinyMCE (@tinymce) on CodePen.