TinyMCE Administrador de imágenes filemanager
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