Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@romelperez

romelperez/demos.html

Forked from demonio/kuwy.css
Last active June 25, 2017 00:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save romelperez/bdf0cd333e999a276888237b4169cc63 to your computer and use it in GitHub Desktop.
Save romelperez/bdf0cd333e999a276888237b4169cc63 to your computer and use it in GitHub Desktop.
Download ZIP
KuWy from KumbiaPHP developers
Raw
demos.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kuwy</title>
<link rel="stylesheet" href="./kuwy.css">
<style>
body { margin: 20px; font-family: sans-serif; }
.example-editor { display: block; margin-bottom: 20px; }
</style>
</head>
<body>
<header>
<h1>Kuwy</h1>
</header>
<main>
<div class="example-editor">
<h2>Editor 1</h2>
<textarea class="kuwy-editor"></textarea>
</div>
<div class="example-editor">
<h2>Editor 2</h2>
<textarea class="editor"></textarea>
</div>
<div class="example-editor">
<h2>Editor 3</h2>
<textarea class="editor">
<h3>Kuwy Editor</h3>
<p>El más <b>increible</b> editor en el mundo!</p>
<img src="https://img.memecdn.com/not-impressed-cat-is-not-impressed_o_328037.gif" />
<ul>
<li>Es asombroso</li>
<li>Es maravilloso</li>
<li>Te deja impresionado</li>
</ul>
</textarea>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./kuwy.js"></script>
<script>
(function () {
// Todos los <textarea /> con clase .kuwy-editor son instanciados.
// Instanciar otros elementos textarea.
$('.editor').kuwy();
})();
</script>
</body>
</html>
Raw
kuwi.css
.kuwy .kuwy-menu {
background: #EEE;
padding: 4px;
}
.kuwy .kuwy-menu .kuwy-btn {
display: inline-block;
margin-top: 2px !important;
margin-right: 4px;
padding: 0 4px;
width: 24px;
height: 24px;
line-height: 24px;
box-shadow: 0 0;
}
.kuwy .kuwy-menu .kuwy-btn:hover {
background: #e53935;
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 {
z-index: 999;
position: absolute;
left: 0px;
top: 15px;
display: none;
margin: 0;
padding-bottom: 4px;
padding-left: 4px;
min-width: 60px;
max-height: 150px;
width: auto;
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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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="#ccc" 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
// Edited by Romel Pérez, 2017 (https://romelperez.com)
// TODO: Compatibilidad con Firefox.
$.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="Set a parameter here -> Select a text -> Click a action">');
$('.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