Preview:
1. Selecciona un Editor WYSIWYG
Algunos editores populares que puedes integrar manualmente son:
TinyMCE: Sitio oficial
CKEditor: Sitio oficial
Quill: Sitio oficial
Para este ejemplo, usaremos TinyMCE, pero el proceso es similar para otros editores.
2. Descarga la Librería
Puedes descargar los archivos del editor desde su sitio oficial o usar un CDN.
TinyMCE (CDN):
Agrega el siguiente script en tu vista:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

3. Crea el Campo de Texto
En tu vista, define un campo de texto normal (por ejemplo, un textarea) donde se aplicará el editor.

<?= $form->field($model, 'asunto')->textarea(['id' => 'editor', 'rows' => 6]) ?>

4. Inicializa el Editor
Agrega un bloque de JavaScript para inicializar el editor en el campo de texto. Esto lo puedes hacer directamente en la vista o en un archivo JS separado.
Ejemplo con TinyMCE:

<?php
$this->registerJs(<<<JS
    tinymce.init({
        selector: '#editor', // Selecciona el textarea por su ID
        language: 'es', // Idioma del editor
        plugins: 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste help wordcount',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        menubar: false, // Opcional: Oculta la barra de menús
        height: 300, // Altura del editor
    });
JS);
?>

  uarda los Datos en el Modelo
El contenido del editor se enviará como parte del formulario al servidor, ya que TinyMCE reemplaza el contenido del textarea. No necesitas hacer nada especial para procesar los datos en Yii2; simplemente accede al atributo del modelo como lo harías normalmente:

if ($model->load(Yii::$app->request->post()) && $model->save()) {
    // Procesa y guarda los datos del modelo
}

6. Opcional: Personalización Avanzada
Puedes personalizar aún más el editor añadiendo opciones específicas según tus necesidades:
Subida de Imágenes:
Configura una URL para manejar la subida de imágenes.
Barra de Herramientas Personalizada:
Ajusta qué botones aparecen en la barra de herramientas.
Estilos CSS:
Aplica estilos personalizados al contenido usando content_css.
Ejemplo con Subida de Imágenes:

tinymce.init({
    selector: '#editor',
    plugins: 'image code advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste help wordcount',
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help| link image | code',
    images_upload_url: '/path/to/upload-handler', // Ruta a tu controlador para subir imágenes
  	 menubar: false, // Opcional: Oculta la barra de menús
     height: 300, // Altura del editor
});

Conclusión
Integrar un editor WYSIWYG manualmente te da flexibilidad y control total sobre su configuración. Aunque requiere algo más de trabajo que usar un widget preconfigurado, es una opción ideal si prefieres evitar dependencias externas o necesitas personalización avanzada.
Si tienes dudas específicas sobre cómo implementar algo (como subir imágenes o configurar estilos), no dudes en preguntar. ¡Estoy aquí para ayudarte! 😊
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter