Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/claystreet/bootstrap-rta
Bootstrap Rich TextArea (RTA)
https://github.com/claystreet/bootstrap-rta
Last synced: 12 days ago
JSON representation
Bootstrap Rich TextArea (RTA)
- Host: GitHub
- URL: https://github.com/claystreet/bootstrap-rta
- Owner: claystreet
- License: mit
- Created: 2013-05-21T00:18:21.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2013-06-19T04:27:52.000Z (over 11 years ago)
- Last Synced: 2024-08-01T22:54:06.692Z (3 months ago)
- Language: JavaScript
- Size: 142 KB
- Stars: 9
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
#Bootstrap Rich TextArea (RTA)
**Provided by [Clay Street Online](http://www.claystreet.com) under an MIT License**
Visit the [live demo site](http://www.claystreet.com/sites/claystreet/dev/bootstrap/rta/demo.html) for an interactive demo.
### Purpose
Provides a rich text edit capability using Bootstrap styling and markup.
### How?
Chosen `` fields are replaced with `
` fields. A configurable set of edit
buttons provides an interface to the JavaScript `document.execCommand()` function which provides the rich text editing
capabilities. All content entered into the `` (the resultant source html) is copied
back to the original `` for seamless form behavior.
**Notes:**
* Because the code relies on the browser's built-in `contenteditable` functionality, the level of feature
support and the type of markup generated varies from browser to browser. *However*, most browsers are pretty good
at supporting the basic functionality such as bold and italic text and ordered and unordered lists. Much of the functionality
even works in IE7 albeit a little awkwardly sometimes.
* Server side code should ensure the submitted HTML is clean.
### What's needed?
Obviously this code depends on the main Bootstrap CSS file.
The Bootstrap Responsive CSS file is optional as is the Bootstrap JS file.
The RTA code also depends on JQuery. Testing was performed with JQuery 1.9.1.
In addition to the dependencies, three RTA specific files are required:
1. css/bootstrap-rta.css - Provides the contenteditable and button styling
2. js/bootstrap-rta.js - Provides the supporting JavaScript code
3. img/rta-icons.png - Provides a set of 15x15 images for the edit buttons
### Getting Started
1. Include the css/bootstrap-rta.css file *after* the standard bootstrap css files.
2. Include the js/bootstrap-rta.js file *after* JQuery.
3. Add a `class="rta"` to any `` fields you want converted to RTA
4. Initialize the chosen `` fields in the JQuery `$(document).ready()` handler.
```html
Bootstrap Rich TextArea
textarea {
width: 300px;
}
Bootstrap Rich TextArea
Sample TextArea
$(document).ready(function() {
$.rta(); // The simplest initialization... default button set on all class="rta" textarea's
});
```
Which produces the following browser output (screenshot shown below):
The code above displays the default set of edit buttons. To show all available edit buttons
change the initialization code as follows:
```html
$(document).ready(function() {
$.rta($.rta.allButtons); // Make all edit buttons available
});
```
Which produces the following browser output (screenshot shown below):
A custom set of buttons can be specified by passing a simple string parameter containing the button names.
Use commas to group the buttons. The code below creates 7 buttons organized into 3 groups (via comma separators).
```html
$(document).ready(function() {
$.rta('bold italic, align-left align-center align-right, link image'); // A custom set of buttons
});
```
Which produces the following browser output (screenshot shown below):
CSS selectors can be used to identify particular `` fields to initialize in a particular way.
The code below adds a second `` field (not shown in the code) and uses a CSS selector to target
only ``.
```html
$(document).ready(function() {
$('#TextArea2').rta('bold italic'); // Initialize only id="TextArea2" with the bold and italic buttons
});
```
Which produces the following browser output (screenshot shown below):
Hopefully that's enough to get you started! Enjoy!!!