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

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:
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 ?>

/**
 * @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

_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
editor.zip
y listo 

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

(http://i.imgur.com/xS7hFwsl.jpg) (https://i.imgur.com/xS7hFws.jpg)(http://i.imgur.com/gzngKAil.jpg) (https://i.imgur.com/gzngKAi.jpg)(http://i.imgur.com/MLOxQPjl.jpg) (https://i.imgur.com/MLOxQPj.jpg)(http://i.imgur.com/065ZSRNl.jpg) (https://i.imgur.com/065ZSRN.jpg)(http://i.imgur.com/fj0QIbkl.jpg) (https://i.imgur.com/fj0QIbk.jpg)

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