Incorporamos el editor Quill JS

QUILL-README.md

@@ -0,0 +1,115 @@
+> [!NOTE]
+> This branch and README covers the upcoming 2.0 release. View [1.x docs here](https://github.com/quilljs/quill/tree/1.3.7).
+
+<h1 align="center">
+  <a href="https://quilljs.com/" title="Quill">Quill Rich Text Editor</a>
+</h1>
+<p align="center">
+  <a href="https://quilljs.com/" title="Quill"><img alt="Quill Logo" src="https://quilljs.com/assets/images/logo.svg" width="180"></a>
+</p>
+<p align="center">
+  <a title="Quickstart" href="#quickstart"><strong>Quickstart</strong></a>
+  &#x2022;
+  <a title="Documentation" href="https://quilljs.com/docs/quickstart"><strong>Documentation</strong></a>
+  &#x2022;
+  <a title="Development" href="https://github.com/quilljs/quill/blob/master/.github/DEVELOPMENT.md"><strong>Development</strong></a>
+  &#x2022;
+  <a title="Contributing" href="https://github.com/quilljs/quill/blob/master/.github/CONTRIBUTING.md"><strong>Contributing</strong></a>
+  &#x2022;
+  <a title="Interactive Playground" href="https://quilljs.com/playground/"><strong>Interactive Playground</strong></a>
+</p>
+<p align="center">
+  <a href="https://github.com/quilljs/quill/actions" title="Build Status">
+    <img src="https://github.com/quilljs/quill/actions/workflows/main.yml/badge.svg" alt="Build Status">
+  </a>
+  <a href="https://npmjs.com/package/quill" title="Version">
+    <img src="https://img.shields.io/npm/v/quill.svg" alt="Version">
+  </a>
+  <a href="https://npmjs.com/package/quill" title="Downloads">
+    <img src="https://img.shields.io/npm/dm/quill.svg" alt="Downloads">
+  </a>
+</p>
+
+<hr/>
+
+[Quill](https://quilljs.com/) is a modern rich text editor built for compatibility and extensibility. It was created by [Jason Chen](https://twitter.com/jhchen) and [Byron Milligan](https://twitter.com/byronmilligan) and actively maintained by [Slab](https://slab.com).
+
+To get started, check out [https://quilljs.com/](https://quilljs.com/) for documentation, guides, and live demos!
+
+## Quickstart
+
+Instantiate a new Quill object with a css selector for the div that should become the editor.
+
+```html
+<!-- Include Quill stylesheet -->
+<link
+  href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.snow.css"
+  rel="stylesheet"
+/>
+
+<!-- Create the toolbar container -->
+<div id="toolbar">
+  <button class="ql-bold">Bold</button>
+  <button class="ql-italic">Italic</button>
+</div>
+
+<!-- Create the editor container -->
+<div id="editor">
+  <p>Hello World!</p>
+  <p>Some initial <strong>bold</strong> text</p>
+  <p><br /></p>
+</div>
+
+<!-- Include the Quill library -->
+<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>
+
+<!-- Initialize Quill editor -->
+<script>
+  const quill = new Quill("#editor", {
+    theme: "snow",
+  });
+</script>
+```
+
+Take a look at the [Quill](https://quilljs.com/) website for more documentation, guides and [live playground](https://quilljs.com/playground/)!
+
+## Download
+
+```shell
+npm install quill@rc
+```
+
+### CDN
+
+```html
+<!-- Main Quill library -->
+<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>
+
+<!-- Theme included stylesheets -->
+<link
+  href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.snow.css"
+  rel="stylesheet"
+/>
+<link
+  href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.bubble.css"
+  rel="stylesheet"
+/>
+
+<!-- Core build with no theme, formatting, non-essential modules -->
+<link
+  href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.core.css"
+  rel="stylesheet"
+/>
+<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.core.js"></script>
+```
+
+## Community
+
+Get help or stay up to date.
+
+- [Contribute](https://github.com/quilljs/quill/blob/develop/.github/CONTRIBUTING.md) on [Issues](https://github.com/quilljs/quill/issues)
+- Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/quill)
+
+## License
+
+BSD 3-clause

README.org

@@ -0,0 +1,39 @@
+* Editor de textarea ~ Prueba de Concepto
+
+    Estamos queriendo usar Quill JS :
+    
+*** https://quilljs.com/    
+
+
+* Alternativas :
+
+***  Aloha Editor
+     https://www.alohaeditor.org/
+     Demo online acá   https://rawgit.com/alohaeditor/Aloha-Editor/hotfix/src/demo/boilerplate/
+
+     dicen: facilita un atributo 'contenteditable'  para añadir el   editor WYSIWYG a cualquier <div> a elección  
+     
+*** Nicedit
+   http://nicedit.com/
+
+
+*** CKEditor
+     https://ckeditor.com/docs/
+( decíamos, un clásico-popular, entre otros usado por Drupal )
+
+
+
+
+* Hitos :
+** crear textarea
+** integrar la librería / editor JS
+*** usarla no via CDN sino en local
+** integrarlo en la Web App
+
+
+
+
+
+
+
+

index.html

@@ -3,6 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
+
+    <!-- traemos la librería JS - editor : TODO -> tenerla en local-->
+    
+    <link href="css/quill.snow.css"   rel="stylesheet"/>
+
     <title>My sample homepage</title>
   </head>
   <style>
@@ -64,17 +69,33 @@ cite {
   
 
   <body>
+
       <section>
-	  <h1>Editor de textarea ~ Prueba de Concepto</h1>
+	  <!-- Create the toolbar container -->
+	  <div id="toolbar">
+	      <button class="ql-bold">Bold</button>
+	      <button class="ql-italic">Italic</button>
+	  </div>
 
-	  <blockquote contenteditable="true">
+	  <!-- Create the editor container -->
-	      <p>Edit this content to add your own quote</p>
+	  <div id="editor">
-	  </blockquote>
+	      <p>Horas non numero, nisi serenas</p>
-
+	      <p>Atelier Discordia  <strong>bold</strong> text</p>
-	  <cite contenteditable="true">-- Write your own name here</cite>
+	      <p><br /></p>
-
+	  </div>
-      </section>
+	<section/>
   </body>
+
+<!-- Include the Quill library -->
+<script src="js/quill.js"></script>
+
+<!-- Initialize Quill editor -->
+<script>
+  const quill = new Quill("#editor", {
+    theme: "snow",
+  });
+</script>
+
 </html>