Print Page - [tutorial SMF2.1.1]Cambiar skin e iconos de sceditor

Title: [tutorial SMF2.1.1]Cambiar skin e iconos de sceditor
Post by: Dhayzon on April 24, 2022, 03:01:45 PM

según la documentación de sceditor puedes cambiar los iconos y ponerle un skin, esto para que combine con los colores de tu sitio.
SMF2.1.1 tienen hooks para realizar estos cambios, sin embargo este tutorial es para aplicarlo manualmente

smf2.1 nos dice:

Code Select

THEME AUTHORS:
                    If you want to change or tweak the CSS for the editor,
                    include a file named 'jquery.sceditor.theme.css' in your theme.

en la carpeta /css/ debería estar un archivo llamado jquery.sceditor.theme.css para modificar los colores del editor y este se cargara automáticamente (obviaremos eso en este tuto)

paso 1: index.template.php C:\xampp\htdocs\nuevo\Themes\mitheme\index.template.php

agregar al final justo antes de ?>

Code Select

/**
 * @author dhayzon https://dhayzon.com
 * @method _sceditorStyles
 * @param string $icon  : monocons|material 
 * @param string $style : defaultdark|modern|office|office-toolbar|square 
 */
function _sceditorStyles($icon= 'material', $style='square'){
    global $context,$settings; 

    $opt = '';
    if(isset($context['controls']['richedit']['quickReply']['sce_options'])) 
      $opt = 'quickReply';
    elseif (isset($context['controls']['richedit']['message']['sce_options'])) 
      $opt = 'message';
    else 
      $opt = false;
    
    if($opt){
        $context['controls']['richedit'][$opt]['sce_options']['icons']= $icon;
        $context['controls']['richedit'][$opt]['sce_options']['style']= $settings[file_exists($settings['theme_dir'] . '/css/'.$style.'') ? 'theme_url' : 'default_theme_url'] . '/css/'.$style.'' . $context['browser_cache'];
    
    loadCSSFile('editor/'.$style.'.min.css', array('minimize' => false));
    loadJavaScriptFile($icon.'.js', array('minimize' => false));
 }
}

paso 2: llamaremos a la función dentro de template_html_above() justo debajo de las variables globales

buscar echo '<!DOCTYPE html> y arriba de eso agregar

Code Select

_sceditorStyles()
para pasarle otro skin solo pon por ejemplo _sceditorStyles( 'monocons', 'office-toolbar')

solo tienen dos juegos de iconos diferentes al por defecto
https://github.com/samclarke/SCEditor/tree/master/src/icons

descargarlos y subirlos a tu carpeta /scripts/
material.js
monocons.js

para los skinks hay 5 defaultdark|modern|office|office-toolbar|square

los adjunto en el post, metan la carpeta editor en el folder /css/ de su plantilla
You cannot view this attachment.
y listo

aquí les dejo como debería quedar su editor de acuerdo al skin que elijan

(https://i.imgur.com/xS7hFws.jpg)

(https://i.imgur.com/gzngKAi.jpg)

(https://i.imgur.com/MLOxQPj.jpg)

(https://i.imgur.com/065ZSRN.jpg)

(https://i.imgur.com/fj0QIbk.jpg)

Code Select

Esta función solo lo hice para probar como quedaba y si valía la pena implementarlo Fuente: https://www.sceditor.com/documentation/theming/

Simple Machines Community Forum

SMF Support => Español (Spanish) => Language Specific Support => Tutoriales => Topic started by: Dhayzon on April 24, 2022, 03:01:45 PM