javascript - Reposicionar la barra de herramientas del editor de texto quill

Quiero separar la barra de herramientas del editor de texto Quill de su posición predeterminada y colocarla en un div completamente separado. ¿Cómo hago eso?

También quiero editar el orden y qué herramientas se muestran después de colocar la barra de herramientas en un div separado.

nota: estoy usando el tema nieve

¿Estás utilizando Quill simple o algún paquete de marco?

-NeNaD

5 de abril de 2021 a las 19:28

------------------------------------

Puedes crear tu propio elemento de barra de herramientas personalizado y registrarlo en Quill.

Código de ejemplo de los documentos:

<!-- Create toolbar container -->
<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="small"></option>
    <!-- Note a missing, thus falsy value, is used to reset to default -->
    <option selected></option>
    <option value="large"></option>
    <option value="huge"></option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
  <!-- Add subscript and superscript buttons -->
  <button class="ql-script" value="sub"></button>
  <button class="ql-script" value="super"></button>
</div>
<div id="editor"></div>

<!-- Initialize editor with toolbar -->
<script>
  var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar'
    }
  });
</script>

Para obtener el HTML de la barra de herramientas, puede utilizar Devtools de su navegador para copiar la barra de herramientas existente. Con una barra de herramientas personalizada, también puedes mover los botones y diseñarlos como quieras.

------------------------------------

Para aquellos que tienen las mismas preguntas y están usando React, esto es muy simple:

Creé una CustomToolbar muy básica porque necesitaba que la barra de herramientas estuviera en la parte inferior en lugar de en la parte superior.

const CustomToolbar = () => {
  return (
    <div id="toolbar">
      <button className="ql-bold"></button>
      <button className="ql-italic"></button>
    </div>
  );
};

const YourMainComponent = () => {
 return (
  <ReactQuill
   theme="snow"
   value={value}
   onChange={setValue}
   modules={{ toolbar: { container: '#toolbar' } }}
  />

  <CustomToolbar />
 )
}

Ya que quería que la barra de herramientas be en la parte inferior, así que lo rendericé después del ReactQuill real.