Perú

Lima,Perú

TinyMCE Administrador de imágenes filemanager

Fecha Publicación:       18 de Enero de 2020
Fecha Modificación:       03 de Junio de 2021

RESPONSIVE filemanager v 9.14.0

Responsive FileManager 9.14.0 es un administrador de archivos e imágenes gratuito de código abierto creado con la biblioteca jQuery, CSS3, PHP y HTML5 que ofrece una manera agradable y elegante de cargar e insertar archivos, imágenes y videos.

Puede usarlo como complemento externo para TinyMCE versión 4.x (y anteriores), CKEditor y CLEditor, también puede usarlo como un administrador de archivos independiente para administrar y seleccionar archivos.
El script crea automáticamente miniaturas de imágenes para la lista de vista previa y también puede crear miniaturas externas para usar en su sitio o cms.
Se puede configurar para cambiar el tamaño automáticamente de las imágenes cargadas o para limitar automáticamente el tamaño.

Puede personalizar la configuración para cada carpeta.
Puede establecer una subcarpeta como raíz y cambiar la configuración para cada usuario, página o llamada de FileManager.

Es compatible con el modo multiusuario y puede editar imágenes con el editor de aviario, ordenando los archivos.

Página Oficial:

https://www.responsivefilemanager.com/demo.php

hablando de filemanager

http://www.forosdelweb.com/f127/configurar-tinymce-con-responsivefilemanager-1100440/

Variables en Php:

$cruta_base = $_SERVER ["DOCUMENT_ROOT"];
$cruta_tinymce = "/webadmin/editor/tinymce";
$cruta_fontawesome = "/webadmin/editor/font_awesome_4_7_0";
/* -- para manejar imagenes---*/
$cruta_responsive_filemanager = "/webadmin/editor/responsive_filemanager";

Html:

<script src="<?=$cruta_tinymce?>/tinymce_4_9_2/tinymce.min.js"></script>	
<link  href="<?=$cruta_fontawesome?>/css/font-awesome.min.css" rel="stylesheet">

Script:

<script> 
	 tinymce.PluginManager.load('fontawesome', '<?=$cruta_tinymce?>/tinymce_4_9_2/plugins'+'/fontawesome/plugin.min.js');

	  tinymce.init({
		 // selector:'textarea#crescontenido,#cdetcontenido',		  		   
		   selector:'#cdescripcion_video',	

		    width: "100%",
	  		height: 500,	
		   /* enable title field in the Image dialog*/
  			image_title: true,   	  
	  			/* enable automatic uploads of images represented by blob or data URIs*/
  			automatic_uploads: true,

		    plugins: 
			[
			  "fontawesome noneditable responsivefilemanager", 
				"codesample code image link imagetools textcolor",
			" noneditable  advlist autolink lists link charmap print preview anchor",
			"searchreplace visualblocks code fullscreen wordcount",
		    "template colorpicker  help",			
			"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 */ 


		 language: "es"	,	  		 
		 /* ------  Inicio para  imagen -------------------------------
		 /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>

 

<textarea name="cdescripcion_video" id="cdescripcion_video"></textarea>

 

Vea tambien:

TinyMCE Responsive FileManager Ajuste de parametros config.php

Url : TinyMCE Responsive FileManager Ajuste de parametros config.php

Leidas : 701 Veces
Compartir: