TinyMCE 4 9 2 Implementar Editor Wysiwyg
Fecha Publicación:
02 de Mayo de 2019
Fecha Modificación:
12 de Febrero de 2021
Instalación de TinyMCE v4.9.2
Ver Implementar TinyMCE 4 9 2 Online
1. Descargar la última versión de TinyMCE y los language packs necesarios.
Una vez descargado se descomprime y lo guardamos en una carpeta dentro de nuestro proyecto.
Modo de Instalación:
Utilisamos variables para las rutas no es necesario utilizarlas:
<?Php session_start();
ini_set('display_errors',0);
error_reporting(E_ALL);
$cruta_tinymce = "/webadmin/tinymce/";
$cruta_fontawesome = "/webadmin/tinymce/font_awesome_4_7_0";
$cruta_responsive_filemanager = "/webadmin/tinymce/responsive_filemanager";
?>Instalando tinymce y el plugin fontawesome - para insertar iconos
Recuerda que en la la version 5 de TinyMCE no funciona el plugin fontawesome.
<head>
<meta charset="utf-8">
<script src="<?=$cruta_tinymce?>/tinymce_4_9_2/tinymce.min.js"></script>
<script src="<?=$cruta_tinymce?>/tinymce_4_9_2/langs/es.js"></script>
<link href="<?=$cruta_fontawesome?>/css/font-awesome.min.css" rel="stylesheet">
</head>
Definiendo el Script:
Utilisamos 2 plugin para las imagenes
Plugin File Picker = Ya no devemos usar este plugin debemos en el script eliminar su codigo.
Adminitrador de Imagenes filemanager = Este plugin sustituye a Plugin File Picker .
Tambien Instalamos Plugin Codemirror editor de código fuente avanzado pinta de colores codigo fuente
plugins:
[
"template colorpicker help","codemirror",
],
Tambien Instalamos Plugin para contenido HTML5 para ver contenido Html5 como es (section , Article , aside , etc)
plugins:
[
"template colorpicker help","visualblocks",
],
/*----- INICIO Plugin visualblocks contenido HTML5-------*/
/* Section , Article , aside , etc*/
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,
/*----- FIn Plugin visualblocks contenido HTML5-------*/
Codigo html:
<body>
<textarea id="cdetcontenido" name="cdetcontenido">
<?php
if(isset($sContent)) echo htmlentities($sContent);
?>
</textarea>
</body>Insertando Plugin File Picker para subir imagen:
Ver mas detalle subir imagenes en el editor tinymce con file picker
Insertando Plugin Adminitrador de Imagenes filemanager:
Ver mas detalle subir imagenes en el editor tinymce con Adminitrador de Imagenes filemanager
CODIGO COMPLETO CON TODOS LOS PLUGIN:
<?Php session_start();
ini_set('display_errors',0);
error_reporting(E_ALL);
$cruta_base = $_SERVER ["DOCUMENT_ROOT"];
//$cruta_tinymce = "/pruebas/editores_web/tinymce";
//$cruta_fontawesome = "/pruebas/editores_web/font_awesome_4_7_0";
/* -- para manejar imagenes---*/
//$cruta_responsive_filemanager = "/pruebas/editores_web/responsive_filemanager";
$cruta_tinymce = "/webadmin/tinymce/";
$cruta_fontawesome = "/webadmin/tinymce/font_awesome_4_7_0";
$cruta_responsive_filemanager = "/webadmin/tinymce/responsive_filemanager";
?>
<script src="<?=$cruta_tinymce?>/tinymce_4_9_2/tinymce.min.js"></script>
<script src="<?=$cruta_tinymce?>/tinymce_4_9_2/langs/es.js"></script>
<link href="<?=$cruta_fontawesome?>/css/font-awesome.min.css" rel="stylesheet">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
tinymce.PluginManager.load('fontawesome', '<?=$cruta_tinymce?>/tinymce_4_9_2/plugins'+'/fontawesome/plugin.min.js');
tinymce.init({
// selector:'textarea#crescontenido,#cdetcontenido',
selector:'#cdetcontenido',
width: "100%",
height: 500,
/* enable title field in the Image dialog*/
image_title: true,
automatic_uploads: true,
plugins:
[
"fontawesome noneditable responsivefilemanager",'visualblocks',
"codesample code image link imagetools textcolor",
" noneditable advlist autolink lists link charmap print preview anchor",
"searchreplace visualblocks code fullscreen wordcount",
"template colorpicker help","codemirror",
"insertdatetime media table contextmenu paste "
],
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'Java', value: 'java'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
extended_valid_elements : "*[*],a[href|target=_blank],strong/b,div[align],br,div[id|dir|class|align|style],span[id|dir|class|align|style],ul[id|dir|class|align|style],li[id|dir|class|align|style],iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width] img[class=myclass|!src|border:0|alt|title|width|height|style],span[*] ",
toolbar: "fontawesome |responsivefilemanager | insertfile image link a11ycheck | codesample code |image | forecolor backcolor fontselect fontsizeselect | undo redo | styleselect | bold italic | " +
"alignleft aligncenter alignright alignjustify | " +
"bullist numlist | outdent indent ",
content_css: '<?=$cruta_fontawesome?>/css/font-awesome.min.css',
noneditable_noneditable_class: 'fa',
/* ---- INICIO administrador de imagenes responsivefilemanager
https://www.responsivefilemanager.com/demo.php
*/
external_filemanager_path: "<?=$cruta_responsive_filemanager?>/filemanager/",
filemanager_title: "Responsive Filemanager",
external_plugins: {
"responsivefilemanager": "<?=$cruta_responsive_filemanager?>/filemanager/plugin.min.js",
"filemanager": "<?=$cruta_responsive_filemanager?>/filemanager/plugin.min.js"
},
/* ---- FIN administrador de imagenes responsivefilemanager*/
/*----- INICIO Plugin visualblocks contenido HTML5-------*/
/* Section , Article , aside , etc*/
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,
/*----- FIn Plugin visualblocks contenido HTML5-------*/
/* ---- INICIO codemirror editor de código fuente avanzado pinta de colores codigo fuente -*/
codemirror: {
indentOnInit: true,
// Con la opción indentOnInit, le indica al editor
//de Código fuente que sangre todo el código cuando se abra el editor,
//Esto puede ser lento para documentos grandes.
fullscreen:false, // Default setting is false
path: '<?=$cruta_tinymce?>/tinymce_4_9_2/plugins/codemirror/codemirror',
// Path to CodeMirror distribution
config: { // CodeMirror config object
mode: 'application/x-httpd-php',
lineNumbers: true
},
width: 800, // Default value is 800
height: 600, // Default value is 550
jsFiles: [ // Additional JS files to load
'mode/clike/clike.js',
'mode/php/php.js' // este es el que pinta
],
cssFiles: [
'theme/neat.css',
'theme/elegant.css'
]
},
/* ---- FIN codemirror editor de código fuente avanzado pinta de colores codigo fuente -*/
language: "es" ,
/* ------ Inicio para imagen -------------------------------
http://www.unidadvirtual.com/subir-imagenes-en-el-editor-tinymce-con-file-picker
-*/
/*
URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url)
images_upload_url: 'postAcceptor.php',
here we add custom filepicker only to Image dialog
*/
images_upload_url: '/webadmin/mantenimiento/GestorArticulos/postAcceptor.php',
file_picker_types: 'image',
/* and here's our custom image picker*/
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
/*
Note: In modern browsers input[type="file"] is functional without
even adding it to the DOM, but that might not be the case in some older
or quirky browsers like IE, so you might want to add it to the DOM
just in case, and visually hide it. And do not forget do remove it
once you do not need it anymore.
*/
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
/*
Note: Now we need to register the blob in TinyMCEs image blob
registry. In the next release this part hopefully won't be
necessary, as we are looking to handle it internally.
*/
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
/* call the callback and populate the Title field with the file name */
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
/* ------ Fin para imagen --------------*/
});
</script>
</head>
<body>
<textarea id="cdetcontenido" name="cdetcontenido" >
<?php
if(isset($sContent)) echo htmlentities($sContent);
?>
</textarea>
</body>
</html>