Inital
This commit is contained in:
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Core | Trumbowyg: A lightweight WYSIWYG editor | Alex-D / Alexandre Demode</title>
|
||||
<meta name="description" content="Trumbowyg is a jQuery plugin for create WYSIWYG editor">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" href="../../favicon.png">
|
||||
|
||||
<link rel="stylesheet" href="../../css/main.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body class="documentation-body">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;visibility: hidden;height: 0;width: 0;">
|
||||
<symbol id="trumbowyg-link" viewBox="0 0 72 72">
|
||||
<path d="M30.9 49.1l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9l-5.2-5.2c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L10.8 42c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7C38 50.5 38.6 46.3 37 43l-6.1 6.1zM38.5 22.7l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2-6.5 6.5c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1z"></path>
|
||||
<path d="M44.1 30.7c.2-.2.4-.6.4-.9 0-.3-.1-.6-.4-.9l-2.3-2.3c-.2-.2-.6-.4-.9-.4-.3 0-.6.1-.9.4L25.8 40.8c-.2.2-.4.6-.4.9 0 .3.1.6.4.9l2.3 2.3c.2.2.6.4.9.4.3 0 .6-.1.9-.4l14.2-14.2z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-inner">
|
||||
<header class="header-documentation">
|
||||
<a href="../../" class="documentation-logo-link">
|
||||
<img src="../../img/logo-doc.svg" alt="" class="documentation-logo">
|
||||
</a>
|
||||
<h1 class="documentation-title">
|
||||
Core
|
||||
</h1>
|
||||
<nav class="documentation-menu">
|
||||
<a href="../">Docs</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="../plugins/">Plugins</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="./">Core</a><span class="documentation-menu-dot"> •</span>
|
||||
<a href="../../demos/">Demos</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<aside class="documentation-summary">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#core">Core</a>
|
||||
<ul>
|
||||
<li><a href="#modal-box">Modal box</a></li>
|
||||
<li><a href="#range">Range</a></li>
|
||||
<li><a href="#manage-content">Manage content</a></li>
|
||||
<li><a href="#empty">Empty</a></li>
|
||||
<li><a href="#enable-disable-edition">Enable/disable edition</a></li>
|
||||
<li><a href="#toggle">Toggle HTML/WYSIWYG</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<div class="documentation-sidebar-beer">
|
||||
<a href="../../#donate">
|
||||
<img src="../../img/beer.svg" alt="" class="beer-icon">
|
||||
<span class="beer-label">
|
||||
Do you enjoy Trumbowyg? <br>
|
||||
Buy me some beers :)
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="main">
|
||||
<section id="core" class="wrapper section">
|
||||
<h2 class="section-title">Core</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="modal-box">Modal box</h3>
|
||||
<p>
|
||||
When you want create your custom extension for Trumbowyg, you can open and close a modal box with custom
|
||||
inner HTML code, listen events and more.
|
||||
</p>
|
||||
|
||||
<h4>Open and close</h4>
|
||||
<p>
|
||||
For that use the right method: <code>openModal</code> or <code>closeModal</code> like that:
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
// Open a modal box
|
||||
var $modal = trumbowyg.openModal({
|
||||
title: 'A title for modal box',
|
||||
content: '<p>Content in HTML which you want include in created modal box</p>'
|
||||
});
|
||||
|
||||
// Close current modal box
|
||||
trumbowyg.closeModal();
|
||||
</code></pre>
|
||||
<p>
|
||||
An <code>openModal</code> call returns a jQuery object which contains the modal box. You need this
|
||||
object if you want to use listen events (see below).
|
||||
</p>
|
||||
<p class="note">
|
||||
Only one modal box can open at any given moment. So, <code>openModal</code> return false if a modal is
|
||||
currently opened.
|
||||
</p>
|
||||
|
||||
<h4>Events on modal box</h4>
|
||||
<p>
|
||||
Modal boxes in Trumbowy come with two buttons: "Confirm" and "Cancel". An event is associated to each
|
||||
one:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>tbwsubmit</code>: triggered when form is submit</li>
|
||||
<li><code>tbwreset</code>: triggered when user cancels operation</li>
|
||||
</ul>
|
||||
<pre><code class="javascript">
|
||||
// Open a modal box
|
||||
var $modal = trumbowyg.openModal({
|
||||
title: 'A title for modal box',
|
||||
content: '<p>Content in HTML which you want include in created modal box</p>'
|
||||
});
|
||||
|
||||
// Listen clicks on modal box buttons
|
||||
$modal.on('tbwconfirm', function(e){
|
||||
// Do what you want
|
||||
trumbowyg.closeModal();
|
||||
});
|
||||
$modal.on('tbwcancel', function(e){
|
||||
trumbowyg.closeModal();
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<h4>Only build inputs in modal</h4>
|
||||
<p>
|
||||
If you want to only add inputs in the modal box, this function is more simple. Indeed, you do not manage
|
||||
confirm and close buttons, and get all input value on confirm.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
var img = $('img#an-img');
|
||||
$modal = trumbowyg.openModalInsert({
|
||||
title: 'A title for modal box',
|
||||
fields: {
|
||||
url: {
|
||||
value: img.attr('src')
|
||||
},
|
||||
alt: {
|
||||
label: 'Alt',
|
||||
name: 'alt',
|
||||
value: img.attr('alt'),
|
||||
type: 'text',
|
||||
attributes: {}
|
||||
},
|
||||
|
||||
// Build your own input by setting type as a function and returning the html
|
||||
referrerpolicy: {
|
||||
label: 'Referrer Policy',
|
||||
name: 'referrerpolicy',
|
||||
type: function(field, fieldId, prefix, lg) {
|
||||
var html += '<div class="' + prefix + 'input-row">' +
|
||||
'<div class="' + prefix + 'input-infos">' +
|
||||
'<label for="' + fieldId + '">' +
|
||||
'<span>' + (lg[field.label] ? lg[field.label] : field.label) + '</span>' +
|
||||
'</label>' +
|
||||
'</div>' +
|
||||
'<div class="' + prefix + 'input-html">' +
|
||||
'<select id="' + fieldId + '" name="' + field.name + '">' +
|
||||
'<option' + (field.value === 'no-referrer' ? ' selected="selected"' : '') + '>no-referrer</option>' +
|
||||
'<option' + (field.value === 'no-referrer-when-downgrade' ? ' selected="selected"' : '') + '>no-referrer-when-downgrade</option>' +
|
||||
'<option' + (field.value === 'origin' ? ' selected="selected"' : '') + '>origin</option>' +
|
||||
'<option' + (field.value === 'origin-when-cross-origin' ? ' selected="selected"' : '') + '>origin-when-cross-origin</option>' +
|
||||
'<option' + (field.value === 'unsafe-url' ? ' selected="selected"' : '') + '>unsafe-url</option>' +
|
||||
'</select>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
},
|
||||
example: {
|
||||
// Missing label is replaced by the key of this object (here 'example')
|
||||
// Missing name is the key
|
||||
// When value is missing, value = ''
|
||||
// When type is missing, 'text' is assumed. You can use all the input field types,
|
||||
// plus checkbox and radio (select and textarea are not supported)
|
||||
// When attributes is missing, {} is used. Attributes are added as attributes to
|
||||
// the input element.
|
||||
// For radio and checkbox fields, you will need to use attributes if you want it
|
||||
// to be checked by default.
|
||||
}
|
||||
},
|
||||
// Callback is called when user confirms
|
||||
callback: function(values){
|
||||
img.attr('src', values['url']);
|
||||
img.attr('alt', values['alt']);
|
||||
|
||||
return true; // Return true if you have finished with this modal box
|
||||
// If you do not return anything, you must manage the closing of the modal box yourself
|
||||
}
|
||||
});
|
||||
|
||||
// You can also listen for modal confirm/cancel events to do some custom things
|
||||
// Note: the openModalInsert callback is called on tbwconfirm
|
||||
$modal.on('tbwconfirm', function(e){
|
||||
// Do what you want
|
||||
});
|
||||
$modal.on('tbwcancel', function(e){
|
||||
trumbowyg.closeModal();
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="range">Range</h3>
|
||||
|
||||
<p>
|
||||
Managing correctly text range, is not so trivial. Trumbowyg has a system to save and restore
|
||||
selection range which does not involve typical getter/setter.
|
||||
</p>
|
||||
|
||||
<h4>Save and get current range</h4>
|
||||
<pre><code class="javascript">
|
||||
// Save current range
|
||||
trumbowyg.saveRange();
|
||||
|
||||
// Restore last saved range
|
||||
trumbowyg.restoreRange();
|
||||
</code></pre>
|
||||
|
||||
<h4>Get selection range</h4>
|
||||
<pre><code class="javascript">
|
||||
// range contains a JavaScript range
|
||||
var range = trumbowyg.getRange();
|
||||
</code></pre>
|
||||
|
||||
<h4>Get last saved range text (aka selected text)</h4>
|
||||
<pre><code class="javascript">
|
||||
var text = trumbowyg.getRangeText();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="manage-content">Manage content</h3>
|
||||
<p>
|
||||
You can set and get current HTML content of the editor with a getter/setter:
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
// Get HTML content
|
||||
trumbowyg.html();
|
||||
|
||||
// Set HTML content
|
||||
trumbowyg.html('<p>Your content here</p>');
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="empty">Empty</h3>
|
||||
<p>
|
||||
You can empty the content of the editor.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
trumbowyg.empty();
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="enable-disable-edition">Enable/disable edition</h3>
|
||||
<p class="added-feature">Added in 2.1.0</p>
|
||||
<p>
|
||||
As you can disable editor by using <a href="../#disabled">disabled</a> option, you can also switch between
|
||||
enabled and disabled states by using API.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
trumbowyg.setDisabled(true);
|
||||
trumbowyg.setDisabled(false);
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="feature">
|
||||
<h3 id="toggle">Toggle between HTML & WYSIWYG modes</h3>
|
||||
<p>
|
||||
You can switch between HTML view and WYSIWYG view via toggle method.
|
||||
</p>
|
||||
<pre><code class="javascript">
|
||||
trumbowyg.toggle();
|
||||
</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
|
||||
|
||||
<script src="../../js/vendor/highlight.js"></script>
|
||||
<script src="../../js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user