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

[MOD] Insertar Video Reproductor Iframe Embed [No Youtube] con boton incluido en el editor wysibb

Recommended Posts

Hola amigos les traigo un mod complemento que pidio oiramsomel
el este  cual consiste en que podamos introducir videos iframe embed de reproductores tales como nowvideo, allmyvideo entre muchos otros.

Bueno empezamos

1º vamos a bbcode.inc.php que esta en la carpeta ext en la ruta inc/ext desde la raiz del sitio y buscamos

class BBCode {
    /**
     * @name $restriction
     * @description Que BBCodes podrán ser convertidos
     */
    public $restriction = Array("url", "code", "quote", "quotePHPost", "font", "size", "color", "img", "b", "i", "u", "align", "spoiler", "swf", "goear", "hr", "li", "s", "sub", "sup", "table", "td", "tr", "ul", "ol", "notice", "info", "warning", "error", "success"); 

y despues de 

, "success"

ponemos 

, "ifra" 

quedando asi

class BBCode {
    /**
     * @name $restriction
     * @description Que BBCodes podrán ser convertidos
     */
    public $restriction = Array("url", "code", "quote", "quotePHPost", "font", "size", "color", "img", "b", "i", "u", "align", "spoiler", "swf", "goear", "hr", "li", "s", "sub", "sup", "table", "td", "tr", "ul", "ol", "notice", "info", "warning", "error", "success", "ifra" ); 

2º Un poco mas abajo buscamos

    private function complexParse(&$st, $t){
        // ELEMNTOS BBCode
        $elements = array(
        	array("url", "/(?i)(\[url\])(http|https|ftp|irc|ed2k|gopher|telnet)(\:\/\/)([^\<\>[:space:]]+?)(\[\/url\])/i", "<a href=\"\\2\\3\\4\" target=\"_blank\">\\2\\3\\4</a>"),
        	array("url", "/(?i)\[url\=(http|https|ftp|irc|ed2k|gopher|telnet|gopher|telnet)(\:\/\/)([^\<\>[:space:]]+?)\](.+?)(\[\/url\])/i", "<a href=\"\\1\\2\\3\" target=\"_blank\">\\4</a>"),

justo debajo de la ultima coma ponemos

array("ifra", "/(?i)\[ifra\=(.+?)\]/i", "<iframe width=\"780\" height=\"480\" src=\"\\1\" marginheight=\"0\" align=\"top\" scrolling=\"no\" frameborder=\"0\" hspace=\"0\" vspace=\"0\" allowfullscreen></iframe><br />"),

array("ifra", "/(?i)\[goear\]([a-z0-9]{7})\[\/ifra\]/i", "<iframe width=\"780\" height=\"480\" src=\"\\1\" marginheight=\"0\" align=\"top\" scrolling=\"no\" frameborder=\"0\" hspace=\"0\" vspace=\"0\" allowfullscreen></iframe><br />"),

bueno por ahora acabamos en bbcode.inc.php 

 

3ºAhora nos vamos al archivo c.core.php que esta en la carpteta class en en la ruta inc/class desde la raiz del sitio y buscamos

	function parseBBCode($bbcode, $type = 'normal', $t){
        // CLASS BBCode
        include_once(TS_EXTRA . 'bbcode.inc.php');
        $parser =& BBCode::getInstance();
        switch($type){
            // NORMAL
            case 'normal':
                // RESTRICTIONS
                $parser->restriction = array('url', 'code', 'quote', 'quotePHPost', 'font', 'size', 'color', 'img', 'b', 'i', 'u', 'align', 'spoiler', 'swf', 'goear', 'hr', 'li', 's', 'sup', 'sub', 'table', 'tr', 'td', 'ul', 'ol', 'notice', 'info', 'warning', 'error', 'success');

despues de 

, 'success'

ponemos

, 'ifra'

con esto acabamos en el archivo c.core.php y por consiquiente con los archivos php

 

4º ahora subimos esta imagen  a la carpeta wysibb que esta en la ruta themes/TUTHEME/images/wysibb/ desde la raiz del sitio web y la guardamos con el nombre de IfraVideo.png

 

post-526172-0-15832800-1431962177.png 

WP4L0Ry.png

 

5º vamos al archivo wysibb.css que esta en la carpeta css en la ruta themes/TUTHEME/css/

y al final del todo agregamos

.ifravideo{background-image:url('../images/wysibb/IfraVideo.png');background-position:-17px 0px;background-position:top left;background-repeat:no-repeat;margin:4px 2px!important;height:20px!important;}

6º ahora vamos al archivo wysibb.js que esta en la carpeta css en la ruta themes/TUTHEME/js/ 

y buscamos

video: "Vídeo de YouTube",

debajo ponemos

ifra: "Insertar Reproductor  Video Iframe",

buscamos

modal_video_text:"URL del vídeo",

y debajo ponemos

modal_ifra_text:"URL del Video Reproductor Iframe a Insertar",

mas abajo buscamos

			//END img upload config 
			buttons: "bold,italic,underline,strike,sup,sub,|,img,video,link,|,fontcolor,fontsize,fontfamily,|,smileBox,bullist,numlist,|,spoiler,messages,table,|,justifyleft,justifycenter,justifyright,justify,|,hr,quote,code,goear,swf,|,removeFormat,fullscreen",

y despues de 

video,

ponemos

ifra,

quedando asi

			//END img upload config 
			buttons: "bold,italic,underline,strike,sup,sub,|,img,video,ifra,link,|,fontcolor,fontsize,fontfamily,|,smileBox,bullist,numlist,|,spoiler,messages,table,|,justifyleft,justifycenter,justifyright,justify,|,hr,quote,code,goear,swf,|,removeFormat,fullscreen",

ahora mas abajo buscamos

video: {
					title: CURLANG.video,
					buttonHTML: '<span class="fonticon ve-tlb-video1">\uE008</span>',
					modal: {
						title: CURLANG.video,
						width: "600px",
						tabs: [
							{
								title: CURLANG.video,
								input: [
									{param: "SRC",title:CURLANG.modal_video_text}
								]
							}
						],
						onSubmit: function(cmd,opt,queryState) {
							var url = this.$modal.find('input[name="SRC"]').val();
							if (url) {
								url = url.replace(/^\s+/,"").replace(/\s+$/,"");
							}
							var a;
							if (url.indexOf("youtu.be")!=-1) {
								a = url.match(/^http[s]*:\/\/youtu\.be\/([a-z0-9_-]+)/i);
							}else{
								a = url.match(/^http[s]*:\/\/www\.youtube\.com\/watch\?.*?v=([a-z0-9_-]+)/i);
							}
							if (a && a.length==2) {
								var code = a[1];
								this.insertAtCursor(this.getCodeByCommand(cmd,{src:code}));
							}
							this.closeModal();
							this.updateUI();
							return false;
						}
					},
					transform: {
						'<iframe src="http://www.youtube.com/embed/{SRC}" width="640" height="360" frameborder="0" allowfullscreen></iframe>':'[swf=http://www.youtube.com/watch?v={SRC}]'
					}
				},

y debajo ponemos

ifra : {
					title: CURLANG.ifra,
					buttonHTML: '<span class="ifravideo"></span>',
					modal: {
						title: CURLANG.ifra,
						width: "600px",
						tabs: [
							{
								title: CURLANG.video,
								input: [
									{param: "SRC",title:CURLANG.modal_ifra_text,validation: '^http(s)?://'}
								]
							}
						]
					},
					transform : {
						'<iframe src="{SRC}" width="780" height="480" scrolling="no" frameborder="0"></iframe>':"[ifra={SRC}]"
					}
				},

bueno espero no haberme olvidado de nada si es asi reportenlo y lo corregire

por ahora unas capturas de como queda

 

HPaaJut.jpg

 

CMQGnM7.jpg

 

kH5663C.jpg

 

Previsualizaion en posts

MWsbwdY.jpg

Visualizacion en posts

OXYgFnx.jpg

 

P.D 

Un saludo 

  • Like 4

Share this post


Link to post
Share on other sites

Hasta el momento lo he probado con xvideos y redtube, en el primero me ha funcionado la inserción del videos, pero se sale del ancho del área del post. De qué forma se puede editar para que el video no pase de los 500 px de ancho y que funcione con los sitios de videos más populares XXX.

 

Gracias de nuevo.

Share this post


Link to post
Share on other sites

Hasta el momento lo he probado con xvideos y redtube, en el primero me ha funcionado la inserción del videos, pero se sale del ancho del área del post. De qué forma se puede editar para que el video no pase de los 500 px de ancho y que funcione con los sitios de videos más populares XXX.

 

Gracias de nuevo.

Busca 780 y 480 en toda la edición del código, son los tamaños para ancho y alto respectivamente.

Share this post


Link to post
Share on other sites

Gracias Kmario19, ahora me he dado cuenta que el video se previsualiza bien, pero cuando se va a publicar no aparece nada. No se cómo lo logré pero el primer video que publiqué si lo hizo, el resto no y sale un mensaje en rojo que dice que en el cuerpo del post, "este campo es obligatorio" aunque tenga texto y el enlace al video.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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->setSecure($tsCore->parseBadWords($_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); }  
    • By 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
    • By 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
    • By 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
       
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×