Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal
Rhuan

[Actualizado - 09/07/14] Editor WYSIWYG para todo (beta)

Recommended Posts

Importante! Ésta versión está desactualizada, para instalar la nueva versión entra a este tema: http://www.phpost.net/index.php?showtopic=28557
_____________________________________________________________________________________________________________

 

Hola, esta es la segunda versión del editor wysiwyg y posiblemente la última si no se encuentran fallos graves. Para los que ya habían instalado el anterior mod, sugiero realizar toda la instalación otra vez aunque parezca que ya lo habéis hecho.
 

qmc7p.png

 
 
Actualización

  • 16/12/2013 a las 02:10 - Se actualizó la descarga, faltaba el archivo iupload.php (necesario).
  • 16/12/2013 a las 02:15 - Se actualizó la descarga, faltaba el archivo Instrucciones.txt.
  • 16/12/2013 a las 19:57 - Se actualizó el complemento, nueva descarga, se actualizan: wysibb.js y wysibb.css (necesario).
  • 16/12/2013 a las 20:09 - Se actualizó la instalación, añadida una nueva modificación en el paso 2 (necesario).
  • 18/12/2013 a las 14:21 - Se actualizó la descarga (wysibb.js), error en tamaño de fuente corregido.
  • 01/07/2014 a las 23:58 - Se actualizó la descarga (wysibb.js), corrección temporal para los interrogantes.
  • 09/07/2014 a las 18:31 - Se actualizó la descarga (wysibb.js), añadido fix de Goear.

 

Mejoras de la versión

  • Se han corregido cerca de 30 errores menores.
  • Todos los bbcodes funcionan al 100%
  • Se ha añadido el editor a los mensajes y comentarios.
  • Se han agregado nuevos bbcodes.
  • Los vídeos de YouTube ahora funcionan con SSL.
  • Y muchas más cosas que iré poniendo cuando me acuerde xD

 

Instalación:
 
Paso 1 - Descargar y subir archivos necesarios.
 
Descargar el archivo wysiwyg_beta_v1.2.1.zip, extraer su contenido y subir el contenido de los directorios extraídos en el lugar que se indica en las instrucciones.

 
Paso 2 - Incluir archivos necesarios para el funcionamiento del editor.
 
Abrir el archivo main_header.tpl y agregar:

<link href="{$tsConfig.css}/wysibb.css" rel="stylesheet" type="text/css" />

debajo de:

<link href="{$tsConfig.tema.t_url}/extras.css" rel="stylesheet" type="text/css" />

Después, en el mismo archivo, agregar:

<script src="{$tsConfig.js}/wysibb.js" type="text/javascript"></script>

debajo de:

<script src="{$tsConfig.js}/funciones.js" type="text/javascript"></script>

Por último, añadir:

{literal}
$(document).ready(function() {
    var comments = {
        buttons: "smilebox,|,bold,italic,underline,strike,sup,sub,|,img,video,link,|,fontcolor,fontsize,fontfamily,|,bullist,numlist,spoiler,table,|,left,center,right,|,quote,code,goear,swf,|,removeFormat",
        resize_maxheight: 400,
    }
    var messages = {
        buttons: "smilebox,|,bold,italic,underline,strike,sup,sub,|,img,video,link,|,removeFormat",
        resize_maxheight: 400,
    }
    
    $("#wysibb").wysibb();
    $("#respuesta").wysibb(messages);
    $("#body_comm").wysibb(comments);
});
{/literal}

antes de:

</script>

</head>

Paso 3 - Sustituir el editor actual.
 
Abrir el archivo m.agregar_form.tpl, buscar:

<textarea id="markItUp" name="cuerpo" tabindex="2" style="min-height:400px;" class="required">{$tsDraft.b_body}</textarea>
<div style="margin:10px 0 0;">{include file='modules/m.global_emoticons.tpl'}</div>

y sustituirlo por:

<textarea id="wysibb" name="cuerpo" tabindex="2" style="min-height:400px;" class="required">{$tsDraft.b_body}</textarea>

(sí, se ha eliminado una línea)
 
Después, abrir el archivo m.posts_comments_form.tpl, buscar:

<textarea id="body_comm" class="onblur_effect autogrow" tabindex="1" title="Escribir un comentario..." style="resize:none;" onfocus="onfocus_input(this)" onblur="onblur_input(this)">Escribir un comentario...</textarea>

y sustituirlo por:

<textarea id="body_comm" class="onblur_effect autogrow" tabindex="1" title="" style="height: 100px; resize: none;" onfocus="onfocus_input(this)" onblur="onblur_input(this)"></textarea>

(se ha vaciado title="", borrado el texto antes de </textarea> y agregado height: 100px; al style="")
 
En el mismo archivo, buscar:

<div class="floatR">
    <a href="#" onclick="moreEmoticons(true); return false;" class="floatR" id="moreemofn"> M&aacute;s emoticones</a>
</div>
{include file='modules/m.global_emoticons.tpl'}

y borrarlo.
 
Finalmente, abrir m.mensajes_leer.tpl y buscar:

<textarea id="respuesta" onfocus="onfocus_input(this)" onblur="onblur_input(this)" title="Escribe una respuesta..." class="autogrow onblur_effect">Escribe una respuesta...</textarea>

y sustituirlo por:

<textarea id="respuesta" style="height: 100px;" onfocus="onfocus_input(this)" onblur="onblur_input(this)" title="" class="autogrow onblur_effect"></textarea>

(se ha vaciado title="", borrado el texto antes de </textarea> y añadido style="height: 100px;")
 
 
 
Paso 4 - Editar el JavaScript para adaptar las funciones del editor.
 
Abrir el archivo m.agregar_javascript.tpl y buscar:

obj = $(obj).parent().parent().parent();

y sustituir por:

obj = $(obj).parent().parent();

(hay dos líneas así, se sustituyen las dos)
 
Después, en el mismo archivo, buscar:

function save_borrador(){

agregar debajo:

wysi.on();

y antes de que cierre la función (antes del "}" de la línea 85 en el tema default), añadir:

wysi.off();

Debería quedar algo así:

function save_borrador(){
    wysi.on();
    <CONTENIDO DE LA FUNCIÓN>
    wysi.off();
}

Después, aún en el mismo archivo, buscar:

function postSave() {

y debajo agregar:

wysi.on();

Por último en este archivo, antes de:

</script>
{/literal}

agregar:

$(function() {
    $(window).scroll(function() {
        var position = $('.wysibb').offset(), y = position.top, h = $('.wysibb').height(), yh = y + h, w = $('.wysibb').width() - 47;
        var th = $('.wysibb-toolbar').height(), pad = $('.wysibb-toolbar').height();
        if(window.pageYOffset > y && window.pageYOffset < yh) {
            $('.wysibb-toolbar').css({'position':'fixed', 'top':'0', 'width':w, 'height':th});
            $('#wysibb, .wysibb-body').addClass('padtop');
        }else {
            $('.wysibb-toolbar').removeAttr('style');
            $('#wysibb, .wysibb-body').removeClass('padtop');
        }
    });
});

Ahora, abrir acciones.js y buscar:

if($('#body_comm') && !$('#markItUpbody_comm').length){
    $('#body_comm').markItUp(mySettings_cmt);
}

y borrarlo.
 
En el mismo archivo, buscar:

mydialog.buttons(true, true, 'Enviar', 'mensaje.enviar(0)', true, true, true, 'Cancelar', 'close', true, false);
mydialog.center();

y agregar debajo:

var messages = {buttons: "smilebox,|,bold,italic,underline,strike,sup,sub,|,img,video,link,|,removeFormat",resize_maxheight: 400,}
$('#msg_body').wyisbb(messages);

Un poco más abajo, buscar:

enviar: function (enviar){

debajo agregar:

wysi.on('msg_body');

y antes de que cierre la función (antes de "},"), agregar:

wysi.off('msg_body');

Quedaría algo así:
 
idwfa.png
 
Por último, siguiendo en el mismo archivo y dentro de la misma variable, buscar:

responder: function(mp_id){

debajo agregar:

wysi.on('respuesta');

después, dentro de la función buscar:

$('#respuesta').val(''); // LIMPIAMOS

y agregar debajo:

$('.wysibb-body').html(''); 

y antes de cerrar la función (antes de "},"), agregar:

wysi.off('respuesta');

Debería quedar así:
 
fft22.png
 
 Ahora, abrir el archivo funciones.js y buscar la función:

nuevo: function(mostrar_resp, comentarionum){

debajo agregar: 

wysi.on('body_comm');

y antes de que termine la función (antes de "},"), agregar: 

wysi.off('body_comm');

Así es como debe quedar:

f0837d4bbb.jpg


Por último, en el mismo archivo buscamos la función:

preview: function(id, type){

y debajo agregar: 

wysi.on('body_comm');

y antes de que termine la función (antes de "},"), agregar:  

wysi.off('body_comm');

Así es como debe quedar:

5fae6272bd.jpg




Paso 5 - Añadir nuevos bbcodes en PHP
 
Abrir el archivo bbcode.inc.php, buscar:

public $restriction = Array("url", "code", "quote", "quotePHPost", "font", "size", "color", "img", "b", "i", "u", "align", "spoiler", "swf", "goear", "hr", "li");

y añadir antes de ");" esto:

, "s", "sub", "sup", "table", "td", "tr", "ul", "ol", "li", "notice", "info", "warning", "error", "success"

En el mismo archivo, buscar:

array("name" => "b","pre" => "<b>","suf" => "</b>"),

y debajo añadir:

array("name" => "s","pre" => "<s>","suf" => "</s>"),
array("name" => "sub","pre" => "<sub>","suf" => "</sub>"),
array("name" => "sup","pre" => "<sup>","suf" => "</sup>"),
array("name" => "table","pre" => "<table class=\"bbctab\"><tbody>","suf" => "</tbody></table>"),
array("name" => "tr","pre" => "<tr>","suf" => "</tr>"),
array("name" => "td","pre" => "<td>","suf" => "</td>"),
array("name" => "ul","pre" => "<ul class=\"bbclist\">","suf" => "</ul>"),
array("name" => "ol","pre" => "<ol class=\"bbclist\">","suf" => "</ol>"),
array("name" => "li","pre" => "<li>","suf" => "</li>"),
array("name" => "notice","pre" => "<div class=\"bbcmsg notice\">","suf" => "</div>"),
array("name" => "info","pre" => "<div class=\"bbcmsg info\">","suf" => "</div>"),
array("name" => "warning","pre" => "<div class=\"bbcmsg warning\">","suf" => "</div>"),
array("name" => "error","pre" => "<div class=\"bbcmsg error\">","suf" => "</div>"),
array("name" => "success","pre" => "<div class=\"bbcmsg success\">","suf" => "</div>"),

Para acabar la instalación, abrir el archivo c.core.php y buscar:

case 'normal':

en el array que tiene debajo:

$parser->restriction = array('url', 'code', 'quote', 'quotePHPost', 'font', 'size', 'color', 'img', 'b', 'i', 'u', 'align', 'spoiler', 'swf', 'goear', 'hr', 'li');

añadir antes de ");" esto:

, 's', 'sup', 'sub', 'table', 'tr', 'td', 'ul', 'ol', 'li', 'notice', 'info', 'warning', 'error', 'success'

Y por fin tienes instalado el editor 3IXcv.gif
 
 
Demo y capturas:
 
r26cn.png
 
3kke9.png
 
qmc7p.png
 
 
Demo: wysibb.rcdesign.es
 
Usuario: demo
 
Contraseña: demo123

Editado por Rhuan
  • Me gusta 47

Compartir este post


Enlace al post
Compartir en otros sitios

Bárbaro aporte, muy buen trabajo hermano.

Aún no lo usaré necesito adaptarlo también para los temas, pero veo que ya está completo.

Sigo sin poder dar más uno pero en cuanto pueda me pasó y te lo dejo.

Salu2.

Compartir este post


Enlace al post
Compartir en otros sitios

Bárbaro aporte, muy buen trabajo hermano.

Aún no lo usaré necesito adaptarlo también para los temas, pero veo que ya está completo.

Sigo sin poder dar más uno pero en cuanto pueda me pasó y te lo dejo.

Salu2.

 

Gracias, no hace falta adaptarlo para los temas, no utiliza ningún estilo del tema default.

  • Me gusta 2

Compartir este post


Enlace al post
Compartir en otros sitios

Me has llamado impaciente pero no importa, lo que realmente importa es que por fin llegastes a tiempo +2  :)

 

PD: el unico complemento que espero tener en mi web y tú serás uno de los pocos invitados.

Compartir este post


Enlace al post
Compartir en otros sitios

Me has llamado impaciente pero no importa, lo que realmente importa es que por fin llegastes a tiempo +2  :)

 

PD: el unico complemento que espero tener en mi web y tú serás uno de los pocos invitados.

 

Ahora me has dejado curioso   :huh:

 

Rhuan no pusiste el archivo php en el zip ! Muy buen mod +1

 

Tienes razón, ya lo he actualizado, gracias  ;)

Editado por RhuanCarlos

Compartir este post


Enlace al post
Compartir en otros sitios

Registra una cuenta o conéctate para comentar

Debes ser un miembro de la comunidad para dejar un comentario

Crear una cuenta

Regístrate en nuestra comunidad. ¡Es fácil!

Registrar una cuenta nueva

Iniciar Sesión

¿Ya tienes cuenta? Conéctate aquí.

Iniciar Sesión

  • Similar Content

    • Por Miguel92
      Pedido: [Mod] Imagen de cabecera en comunidades
      Por: @fellomix
       
      Una segunda forma de poder hacerlo!
       
      1 -  Ejecutar esta consulta
      ALTER TABLE `c_comunidades` ADD `c_headercom` VARCHAR(255) NOT NULL AFTER `c_nombre_corto`; 2 -  Buscar en c.comunidades.php en la función nueva_comunidad()
                      'fecha' => time(),                 'nombre' => $tsCore->setSecure($tsCore->parseBadWords($_POST['nombre']), true),                 'ncorto' => $tsCore->setSeo($tsCore->setSecure($_POST['ncorto'], true)),
      y debajo agregamos
                      'headercom' => $tsCore->setSeo($tsCore->setSecure($_POST['headercom'], true)),
      un poco más abajo buscamos
                  // Insertamos             if(db_exec(array(__FILE__, __LINE__), 'query', 'INSERT INTO c_comunidades (c_autor, c_nombre, c_nombre_corto,
      y le agregamos a lado 
                   c_headercom,
      un poquito más abajo de
                      VALUES (                     \''.$tsUser->uid.'\',                     \''.$dato['nombre'].'\',                     \''.$dato['ncorto'].'\',
      agregamos
                          \''.$dato['headercom'].'\',
      Luego buscamos la función editar_comunidad($comid)
                          'pais' => $tsCore->setSecure($_POST['pais']),                         'desc' => $tsCore->setSecure($_POST['descripcion']),                     'color' => $tsCore->setSecure($_POST['back_color']),
      y debajo pegamos
                          'headercom' => $tsCore->setSecure($_POST['headercom']),
      más abajo buscamos 
                          c_acceso = \''.(int)$dato['acceso'].'\',                     c_permisos = \''.$dato['permisos'].'\',
      y debajo pegamos
       
                         c_headercom = \''.$dato['headercom'].'\',             
      3 - Después buscamos en c.crear_left.tpl
          <div class="item_form clearfix">         <label>Categoría</label>         <select name="categoria" id="ShowCats" class="required" onChange="com.subcat()" tabindex="3">             <option value="0">Selecciona una categoría</option>             {foreach from=$tsCats item=c}             <option value="{$c.cid}" {if $tsDato.c_categoria == $c.cid}selected="selected"{/if}>{$c.c_nombre}</option>             {/foreach}         </select>     </div>
      y debajo o arriba pegamos (se me olvido quitar los required, ya que no es obligatorio)
          <div class="item_form clearfix">         <label>Cabecera!</label>         <input type="text" name="headercom" tabindex="10" maxlength="180" size="60" class="required input_text https" placeholder="URL de portada (debe tener https://)" pattern="https://.*" value="{$tsDato.c_headercom}">         <small class="mg-lt">Solo admitirá los https!</small>     </div> 4 - Después buscamos c.com_info.tpl [línea 24 y 25]
      <div class="ver_com_info">     <div class="vci_left floatL">
      y la reemplazamos por
      <div class="ver_com_info" style="background-image: url({$tsCom.c_headercom});">     <div class="opacity">     <div class="vci_left floatL">
      luego debajo de la línea 61 agregaremos un 
          </div> 5 -  Por último agregaremos esto a comunidades.css
      .ver_com_info {     padding: 0; } .headercom {      background-position: center center;     background-size: cover;     background-repeat: no-repeat; } .opacity {     padding: 20px 8px;     background-color: rgba(255,255,255,.6); }  
    • Por Miguel92
      Bueno dice N°2 porque a la N°1 la tengo que adaptar a la default ya que tenia class de bootstrap!
       

      si no se ve clic
       
      1) Crean un archivo llamado panel.js y agregan esto dentro
       
      2) En extras.css agregan esto
       
      3) Ahora crearemos un archivo llamado head_usuario.tpl y lo colocaremos en sections y dentro agregaremos
      la parte del st-panel-footer la pueden sacar no hay problema
       
      4) Ahora en la misma carpeta sections buscamos main_footer.tpl y agregaremos esto arriba de </body>
      {include file='sections/head_usuario.tpl'} <script src="{$tsConfig.js}/panel.js" type="text/javascript"></script>  
      5) Para los iconos descarguen esto → ICONOS FUENTES  ← y lo descomprimen en css
       
      6) Busquen en main_header.tpl y debajo de
      <link href="{$tsConfig.tema.t_url}/extras.css" rel="stylesheet" type="text/css" /> colocan
      <link rel="stylesheet" href="{$tsConfig.css}/iconfont.css">  
      y eso sería todo
       
      En el caso que haya error avísenme!
      Esta es la N°1
       
      si no se ve clic
      Ver panel N°2 ir a Demo32.hol.es
      Usuario: Demo
      Pass: demouser
    • Por Rhuan
      Hola, este complemento podría considerarse en realidad una "plantilla" para el anterior RChat que publiqué ya que la mayor parte del funcionamiento es el mismo.
       
      Para instalar este chat no es necesario tener el anterior RChat y si lo tienes también puedes instalarlo sin problemas, los archivos se sobrescribirán.
       
       
      Actualización
      06/03/2015 a las 18:00 - Descarga actualizada: se ha corregido un fallo en el instalador que evita que aparezca el icono de los emoticonos. 08/03/2015 a las 22:10 - Descarga actualizada: se añadió seguridad adicional para evitar el flood. 09/03/2015 a las 23:15 - Descarga actualizada: ahora se muestran todos los emoticonos y se pueden agregar desde el chat.  
      Más capturas

        Caja de emoticonos abierta.
       

      Lista de moderación.
       

      Eliminar mensajes (onmouseover).
       

      Suspender usuario (onmouseover).
       
       
      Características
      Color de nick aleatorio como en grupos de WhatsApp. Suspender usuario por nick y por mensaje. Ver/editar/eliminar usuarios suspendidos. Borrar mensajes individualmente o todos de un usuario. Agrupar mensajes seguidos del mismo usuario. Mensajes propios diferenciados (alineado a la derecha en verde) BBCodes: [b], [i], [u], [br], [url], [color]. Imágenes y URLs automáticas. Censuras globales. Emoticonos globales a través de censuras. Antiflood, suspende durante 2 horas. El antiflood no afecta al staff. Diseño separado para funcionar con cualquier plantilla. Agregar emoticonos desde el chat. Selector de emoticonos.  
      Descarga
       
      Para Risus 1.2 o superior: rchat_whatsapp_1.2.zip
       
       
      Instrucciones
       
      Subir el directorio "install" a la raíz y acceder desde el navegador a http://www.tuweb.com/install/index.php
    • Por Altffenser
      Hola, traigo esta pequeña modificación, es un dialogo de confirmación para cerrar sesión. Utilizo el plugin "mydialog" que trae por default el script por lo que no hará falta nada más. Este MOD lo vi hace años, lo publicó un usuario llamado mega-lucas ((o algo así (aún mantengo su V5 ))
       
      Instrucciones.
      1. Abrir el archivo acciones.js y al ultimo del archivo colocar:
      /* Logout confirm by Altffenser */ function open_logout_box() { mydialog.show(); mydialog.title('Cerrar sesión'); mydialog.body('Estas a punto de salir de tu cuenta. <b>¿Seguro que deseas continuar?</b>'); mydialog.buttons(true, true, 'Cerrar sesión', 'logout_by_now()', true, false, true, 'No, permanecer aquí', 'close', true, true); mydialog.center(); } function logout_by_now(){ $(function (){ window.location.href = global_data.url + "/login-salir.php"; }); } 2. Abrir el archivo head_menu.tpl y buscar:
      <li class="logout"> <a href="{$tsConfig.url}/login-salir.php" style="vertical-align: middle" title="Salir"> <span class="systemicons logout"></span> </a> </li> a) Reemplazar por:
      <li class="logout"> <a href="#" onclick="open_logout_box();" style="vertical-align: middle" title="Salir"> <span class="systemicons logout"></span> </a> </li>  
      ¡Has terminado!
       
      Con eso lo tendrán, ahora cada que den clic en "salir"; primero aparecerá un dialogo como este:
       

       
      Es muy sencillo el MOD pero a mi parecer, se ve bien Saludos
       
  • Navegando Recientemente   0 miembros

    No registered users viewing this page.

  • Patrocinador



  • ×