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! 😊
Preview:
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