API tools faq
paste
NubeColectiva

Upload Imagen con TinyMCE 6

NubeColectiva
Jun 3rd, 2022 (edited)
255
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.33 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <meta name="description" content="">
  7.     <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  8.     <meta name="generator" content="Hugo 0.80.0">
  9.     <title>Administración Blog</title>
  10.  
  11.   </head>
  12.   <body>    
  13.  
  14. <div class="container-fluid">
  15.   <div class="row">  
  16.  
  17.     <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
  18.      
  19.       <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  20.         <h1 class="h2">Crear Entrada</h1>        
  21.       </div>
  22.  
  23.  
  24.       <div class="table-responsive">
  25.        
  26.         <form>
  27.           <div class="form-group">
  28.             <label for="titulo" class="negritatxt">Titulo</label>
  29.             <input type="text" class="form-control" id="titulo" name="titulo" aria-describedby="tituloHelp" required>            
  30.           </div>
  31.           <div class="form-group">
  32.             <label for="contenido" class="negritatxt">Contenido</label>
  33.             <textarea class="form-control" id="contenido" rows="3" required></textarea>
  34.           </div>
  35.  
  36.           <div class="form-group">
  37.             <label for="imgdestacada"class="negritatxt">Imagen Destacada</label>
  38.             <div class="custom-file">                      
  39.               <input type="file" class="custom-file-input" id="imgdestacada">
  40.               <label class="custom-file-label" for="imgdestacada">Selecciona un Archivo</label>
  41.             </div>
  42.           </div>
  43.  
  44.           <div class="form-group">
  45.             <label for="slug" class="negritatxt">Slug</label>
  46.             <input type="text" class="form-control" id="slug" name="slug" aria-describedby="tituloHelp" readonly>            
  47.           </div>
  48.  
  49.           <button type="submit" class="btn btn-primary">Aceptar</button>
  50.         </form>
  51.        
  52.       </div>
  53.  
  54.     </main>
  55.   </div>
  56. </div>
  57.  
  58.  
  59. <script src="https://cdn.tiny.cloud/1/t2537jv6fs00yo0ry56l6ry7mb53wmv1bydm5ruxsslormaa/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
  60.  
  61.   <script>
  62.     tinymce.init({
  63.       selector: 'textarea#contenido',
  64.       plugins: 'a11ychecker advcode casechange export formatpainter image editimage linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tableofcontents tinycomments tinymcespellchecker image code',
  65.       toolbar: 'a11ycheck addcomment showcomments casechange checklist code export formatpainter link image editimage pageembed permanentpen table tableofcontents',
  66.       toolbar_mode: 'floating',
  67.       tinycomments_mode: 'embedded',
  68.       tinycomments_author: 'Author name',
  69.       /* enable title field in the Image dialog*/
  70.       image_title: true,
  71.       /* enable automatic uploads of images represented by blob or data URIs*/
  72.       automatic_uploads: true,
  73.       file_picker_types: 'image',
  74.  
  75.       /* and here's our custom image picker*/
  76.       file_picker_callback: (cb, value, meta) => {
  77.         const input = document.createElement('input');
  78.         input.setAttribute('type', 'file');
  79.         input.setAttribute('accept', 'image/*');
  80.  
  81.         input.addEventListener('change', (e) => {
  82.           const file = e.target.files[0];
  83.  
  84.           const reader = new FileReader();
  85.           reader.addEventListener('load', () => {
  86.             /*
  87.               Note: Now we need to register the blob in TinyMCEs image blob
  88.               registry. In the next release this part hopefully won't be
  89.               necessary, as we are looking to handle it internally.
  90.             */
  91.             const id = 'blobid' + (new Date()).getTime();
  92.             const blobCache =  tinymce.activeEditor.editorUpload.blobCache;
  93.             const base64 = reader.result.split(',')[1];
  94.             const blobInfo = blobCache.create(id, file, base64);
  95.             blobCache.add(blobInfo);
  96.  
  97.             /* call the callback and populate the Title field with the file name */
  98.             cb(blobInfo.blobUri(), { title: file.name });
  99.           });
  100.           reader.readAsDataURL(file);
  101.         });
  102.  
  103.         input.click();
  104.       },
  105.       content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
  106.     });
  107.   </script>
  108.  
  109.    
  110.   </body>
  111. </html>
  112.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!