Big commit i'm sorry ...

app/templates/edit-tools/_btn-save-cancel.html

@@ -1,10 +1,31 @@
+<div class="text-center mx-auto">
 <button class="btn btn-success"
-	hx-post='/edit/{{ bloc.name }}'
-	hx-swap="outerHTML"
+	onclick="saveText()"
+	hx-post='{% if page %}/{{ page }}{% endif %}/edit/{{ bloc.name }}'
+	hx-swap="outerHTML swap:100ms"
 	hx-target="#{{ bloc.name }}" > Enregistrer </button>
 
 
 <button class="btn btn-danger"
-	hx-get="/view/{{ bloc.name }}"
+	onclick="enableModBtn()"
+	hx-get="{% if page %}/{{ page }}{% endif %}/view/{{ bloc.name }}"
 	hx-swap="outerHTML"
 	hx-target="#{{ bloc.name }}" > Annuler </button>
+</div>
+<script>
+	function enableModBtn(){
+		document.getElementById("modify-{{ bloc.name }}").disabled = false;
+	}
+
+	function saveText(){
+		
+		editor_content = document.getElementById("editor");
+		if (editor_content != null)
+		{
+			document.getElementById("text").innerHTML = quill.getSemanticHTML(0);
+			delete quill;
+		}
+		enableModBtn();
+
+	}
+</script>

app/templates/edit-tools/_disable-modify-button.html

@@ -0,0 +1,4 @@
+
+<script>
+	document.getElementById("modify-{{ bloc.name }}").disabled = true;
+</script>

app/templates/edit-tools/_editor-wysiwyg.html

@@ -0,0 +1,52 @@
+
+	  <div id="editor">
+	    {{ bloc.text|safe }}
+	  </div>
+          <br/>
+	  <textarea style="display :none;" id="text" name="text"> </textarea>
+
+	  <!-- Initialize Quill editor -->
+
+
+  <script>
+ 	
+  var toolbarOptions = [
+  	['bold', 'italic', 'underline', 'strike'], // toggled buttons
+  	['blockquote', 'code-block'],
+  	['link', 'image'],
+
+  	[{ 'header': 2 }, { 'header': 3 }, { 'header': 4},], // custom button values
+  	[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
+  	[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
+  	[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
+ 	[{ 'direction': 'rtl' }], // text direction
+
+  	[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+  	[{ 'header': [ 2, 3, 4, 5, 6, false] }],
+
+  	[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+  	[{ 'font': [] }],
+  	[{ 'align': [] }],
+
+  	['clean']                                         // remove formatting button
+	];
+	var quill = new Quill('#editor', {
+	 modules: {
+    		syntax: true,              // Include syntax module
+		toolbar: toolbarOptions  // Include button in toolbar
+  	},
+    	theme: 'snow'
+  	});
+  </script>
+ 
+  <style>
+   .ql-container {
+	height: fit-content;
+  	}
+
+   .ql-editor {
+	height: fit-content;
+  	}
+
+  </style>
+

app/templates/edit-tools/_form-base.html

@@ -1,18 +1,22 @@
+
+<h3> Nom du bloc : {{ bloc.name }} </h3>
 <div class="row mx-md-5">
   <div class="col-auto">
-    <label> Nom du bloc </label>
-    {{ form.name(col=4,value=bloc.name,
+    <label> Classes CSS </label>
+    {{ form.property(col=4,value=bloc.property,
     class="form-control text-center") }}
   </div>
   <div class="col-auto">
     <label> Couleur de l'arrière plan </label>
     {{ form.bg_color(col=4,
-    class="form-control form-control-color text-center") }}
+    class="form-control form-control-color text-center",
+    value=bloc.bg_color) }}
   </div>
   <div class="col-auto">
     <label> Couleur du texte</label>
     {{ form.fg_color(col=4,
-    class="form-control form-control-color  text-center") }}
+    class="form-control form-control-color  text-center",
+    value=bloc.fg_color) }}
   </div>
 </div>
  <br/>

app/templates/edit-tools/css/toolbar.css

@@ -15,4 +15,9 @@
 .msginfo .error{
     background-color: red;
 }
+
+.ql-toolbar {
+	background-color: #fff;
+	color: #000;
+}
 </style>

app/templates/edit-tools/toolbar.html

@@ -1,18 +0,0 @@
-
-<style>
-
-  .msginfo
-  {
-      color: white;
-      font-weight:bold;
-  }
-  
-  .msginfo .success
-  {
-      background-color: green;   
-  }
-
-  .msginfo .error{
-      background-color: red;
-  }
-</style>