Perú

Lima,Perú

TinyMCE 4 9 2 Implementar Editor Wysiwyg

Fecha Publicación:       02 de Mayo de 2019

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>

 

Leidas : 357 Veces
Compartir: