Skip to content

Instantly share code, notes, and snippets.

@demonio

demonio/kuwy.css

Last active July 5, 2018 16:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save demonio/67371152b4f745263e9a32eb1c95b50a to your computer and use it in GitHub Desktop.
Save demonio/67371152b4f745263e9a32eb1c95b50a to your computer and use it in GitHub Desktop.
Download ZIP
KuWy 2.0 from KumbiaPHP developers
Raw
kuwy.css
.kuwy .kuwy-menu
{
background:#EEE;
padding:4px;
}
.kuwy .kuwy-menu .kuwy-btn
{
display:inline-block;
padding:0 4px;
width:24px;
height:24px;
line-height:24px;
box-shadow:0 0;
}
.kuwy .kuwy-menu .kuwy-btn:hover
{
background:#ccc;
/*box-shadow:0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);*/
}
.kuwy .kuwy-menu a.kuwy-toggle-options
{
position:relative;
}
.kuwy .kuwy-menu .kuwy-options
{
position:absolute; left:0px; top:24px; z-index:999;
display:none;
margin:0;
padding-bottom:4px;
padding-left:4px;
min-width:60px;
width:100px;
overflow-y:auto;
list-style:none;
background-color:#ccc;
text-transform:capitalize;
}
.kuwy .kuwy-menu .kuwy-options a
{
display:block;
}
.kuwy .kuwy-menu .kuwy-options a:hover
{
color:white;
text-shadow:none;
}
.kuwy .kuwy-menu input::-webkit-input-placeholder
{
color:#999;
}
.kuwy .kuwy-menu input::-moz-placeholder
{
color:#999;
}
.kuwy .kuwy-menu input:-ms-input-placeholder
{
color:#999;
}
.kuwy .kuwy-menu input:-moz-placeholder
{
color:#999;
}
.kuwy .kuwy-menu input
{
border:0;
display:block;
height:25px;
width:100%;
background-color:#fff;
color:#444;
}
.kuwy .kuwy-content,
.kuwy-textarea
{
background:#fafafa;
padding:4px;
border:1px solid #EEE;
min-height:4rem;
}
.kuwy-textarea
{
display:block;
width:100%;
}
.kuwy .kuwy-content img
{
max-width:100%;
}
.kuwy .kuwy-menu .kuwy-btn.html
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.removeformat
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.27 5L2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21 18 19.73 3.55 5.27 3.27 5zM6 5v.18L8.82 8h2.4l-.72 1.68 2.1 2.1L14.21 8H20V5H6z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.undo
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.redo
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.bold
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.italic
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.underline
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.strikeThrough
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.justifyLeft
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.justifyCenter
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.justifyRight
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.justifyFull
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.indent
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.outdent
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.insertUnorderedList
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.insertOrderedList
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.inserthorizontalrule
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.blockquote
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.h1
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.h2
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8c0 1.11-.9 2-2 2h-2v2h4v2H9v-4c0-1.11.9-2 2-2h2V9H9V7h4c1.1 0 2 .89 2 2v2z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.h3
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M.01 0h24v24h-24z" fill="none"/><path d="M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15c0 1.11-.9 2-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4c1.1 0 2 .89 2 2v1.5z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.h4
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14h-2v-4H9V7h2v4h2V7h2v10z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.h5
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2c1.1 0 2 .89 2 2v2c0 1.11-.9 2-2 2H9v-2h4v-2H9V7h6v2z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.h6
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M11 15h2v-2h-2v2zm8-12H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2c1.1 0 2 .89 2 2v2c0 1.11-.9 2-2 2h-2c-1.1 0-2-.89-2-2V9c0-1.11.9-2 2-2h4v2z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.p
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 3H6v18h4v-6h3c3.31 0 6-2.69 6-6s-2.69-6-6-6zm.2 8H10V7h3.2c1.1 0 2 .9 2 2s-.9 2-2 2z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.subscript
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/><path d="M0-.75h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.superscript
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.fontname:after
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98L13.87 11h-3.74L12 5.98z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.fontsize:after
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.forecolor
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M0 20h24v4H0z" fill-opacity=".36"/><path d="M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.backcolor
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z"/><path d="M0 20h24v4H0z" fill-opacity=".36"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.createLink
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>');
}
.kuwy .kuwy-menu .kuwy-btn.insertImage
{
content:url('data:image/svg+xml,<svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>');
}
Raw
kuwy.js
$.fn.kuwy = function()
{
return this.each(function()
{
//
// INICIALIZACIÓN
//
// Si el elemento que instancia el plugin ya ha sido inicializado, retornar.
if ($(this).data('data-kuwy'))
{
return this;
}
if (!$(this).is('textarea'))
{
throw new Error('El elemento debe ser un <textarea />.');
}
// Crear configuración de instancia
var conf =
{
$output: $(this),
id: 'kuwy-' + (new Date()).getTime() + Math.round(Math.random() * 10000),
};
// Guardar referencia de la instancia.
conf.$output.data('data-kuwy', conf);
//
// ESTRUCTURA
//
// Textarea.
$(conf.$output).addClass('kuwy-textarea');
$(conf.$output).hide(0);
// Editor.
conf.$container = $('<div class="kuwy-flow-text kuwy '+ conf.id +'"></div>');
conf.$editor = $('<div class="kuwy-content" contenteditable></div>');
conf.$container.append(conf.$editor);
conf.$output.before(conf.$container);
var currentContent = $(conf.$output).val();
$(conf.$editor).html(currentContent);
// Barra de menu.
conf.$menu = $('<div class="kuwy-menu"></div>');
$(conf.$editor).before(conf.$menu);
// Botones del menu.
$('<a class="kuwy-btn html" title="html" href="javascript:void(0)"></a>').appendTo(conf.$menu);
// Crear lista de botones del menú.
var btn =
[
{tag:'removeformat'},
{tag:'undo'},
{tag:'redo'},
{tag:'bold'},
{tag:'italic'},
{tag:'underline'},
{tag:'strikeThrough'},
{tag:'justifyLeft'},
{tag:'justifyCenter'},
{tag:'justifyRight'},
{tag:'justifyFull'},
{tag:'indent'},
{tag:'outdent'},
{tag:'insertUnorderedList'},
{tag:'insertOrderedList'},
{tag:'inserthorizontalrule'},
{tag:'blockquote'},
{tag:'h1'},
{tag:'h2'},
{tag:'h3'},
{tag:'h4'},
{tag:'h5'},
{tag:'h6'},
{tag:'p'},
{tag:'subscript'},
{tag:'superscript'},
{tag:'fontname', items:['cursive', 'fantasy', 'georgia', 'monospace', 'tahoma', 'times', 'verdana']},
{tag:'fontsize', items:[1,2,3,4,5,6,7]},
{tag:'forecolor'},
{tag:'backcolor'},
{tag:'createLink'},
{tag:'insertImage'},
];
var i;
var n_btn = btn.length;
for (i=0; i<n_btn; ++i)
{
var tag = btn[i].tag;
// ESTOS BOTONES INSERTAN UN PARAMETRO PREDEFINIDO EN UN COMBO
if (btn[i].items && btn[i].items.length)
{
// BOTON QUE ABRE UN COMBO
$('<a class="kuwy-btn '+tag+' kuwy-toggle-options" data-to="'+tag+'" title="'+tag+'" href="javascript:void(0)"></a>').appendTo(conf.$menu);
// COMBO PREDEFINIDO
var ii;
var n_items = btn[i].items.length;
$('<ul class="'+tag+' kuwy-options"></ul>').appendTo('.'+tag+'.kuwy-toggle-options');
for (ii=0; ii<n_items; ++ii)
{
var item = btn[i].items[ii];
$('<li><a class="kuwy-btn" data-role="'+tag+'" data-value="'+item+'" href="javascript:void(0)">'+item+'</a></li>').appendTo('ul.'+tag+'.kuwy-options');
}
}
else
{
// BOTON ESTANDAR
$('<a class="kuwy-btn '+tag+'" data-role="'+tag+'" title="'+tag+'" href="javascript:void(0)"></a>').appendTo(conf.$menu);
}
}
// CAMPO DE TEXTO PARA LOS BOTONES QUE NECESITAN UN PARAMETRO
conf.$input = $('<input class="kuwy '+conf.id+'" placeholder="Los 4 iconos de abajo necesitan un parametro aquí -> Después selecciona el texto -> Y haz click en uno de esos 4 botones.">');
$('.kuwy.'+conf.id+' a[data-role="forecolor"]').before(conf.$input);
//
// EVENTOS
//
// El boton para ver el HTML: oculta el editor y muestra el textarea o viceversa
conf.$menu.on('click', '.kuwy-btn.html', function()
{
conf.$editor[conf.$editor.is(':visible') ? 'hide' : 'show'](0);
conf.$output[conf.$output.is(':visible') ? 'hide' : 'show'](0);
});
// EL BOTON PARA VER EL HTML OCULTA EL EDITOR Y MUESTRA EL TEXTAREA
conf.$container.find('.kuwy-btn.kuwy-toggle-options').click(function()
{
var to = $(this).data('to');
conf.$container.find('ul.kuwy-options').not('.'+to+'.kuwy-options').hide();
conf.$container.find('.'+to+'.kuwy-options').toggle();
});
// LOS EFECTOS DE CADA BOTON SE APLICA SEGUN SU ROL Y EXCEPCIONES
conf.$menu.find('a').click(function()
{
var role = $(this).data('role');
var input_kuwy = conf.$input.val();
var value = $(this).data('value');
switch(role)
{
case 'blockquote':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
case 'p':
document.execCommand('formatBlock', false, role);
break;
case 'fontname':
case 'fontsize':
document.execCommand(role, false, value);
conf.$container.find('.kuwy-btn.toggle-options').trigger();
break;
case 'backcolor':
case 'createLink':
case 'forecolor':
case 'insertImage':
document.execCommand(role, false, input_kuwy);
break;
case 'removeformat':
document.execCommand(role, false, null);
document.execCommand('unlink', false, null);
break;
default:
document.execCommand(role, false, null);
break;
}
// ACTUALIZA EL AREA DE TEXTO EL FORMULARIO
conf.$editor.val( conf.$output.html() );
});
// EL EDITOR MANTIENE ACTUALIZADO EL AREA DE TEXTO EL FORMULARIO CON DIVERSOS EVENTOS
$(conf.$editor).on('blur keyup paste copy cut mouseup', function()
{
conf.$output.val( $(this).html() ).trigger('change');
});
// EL AREA DE TEXTO TAMBIEN ACTUALIZA EL EDITOR
$(conf.$output).on('blur keyup paste copy cut mouseup', function()
{
conf.$editor.html( $(this).val() );
});
return this;
});
};
$(function()
{
$('.kuwy-editor').kuwy();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment