
	  <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', {
    	theme: 'snow',
	modules: {
    		syntax: true,              // Include syntax module
		toolbar: toolbarOptions,  // Include button in toolbar
	resize: {
		// embed tags to capture resize
		embedTags: ["VIDEO", "IFRAME"],
		// custom toolbar
		tools: [
			"left",
			"center",
			"right",
			"full",
			"edit",
		{
		text: "Alt",
		attrs: {
		title: "Set image alt",
		class: "btn-alt",
		},
		verify(activeEle) {
			return activeEle && activeEle.tagName === "IMG";
		},
		handler(evt, button, activeEle) {
		let alt = activeEle.alt || "";
			alt = window.prompt("Description de l'image", alt);
		if (alt == null) return;
		activeEle.setAttribute("alt", alt);
		},
		},
		],
    	}

  	},
  	});
  </script>
 
  <style>
   .ql-container {
	height: fit-content;
  	}

   .ql-editor {
	height: fit-content;
  	}

  </style>

