https://github.com/benallfree/bootstrap-richarea
https://github.com/benallfree/bootstrap-richarea
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/benallfree/bootstrap-richarea
- Owner: benallfree
- License: mit
- Created: 2016-12-05T20:01:35.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-11-09T14:22:10.000Z (almost 6 years ago)
- Last Synced: 2025-02-26T02:04:43.371Z (8 months ago)
- Language: HTML
- Size: 23.2 MB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# RichArea Content Editor for Bootstrap
RichArea offers a component-based approach to editing layouts and content in a WYSIWYG fashion. Instead of allowing the user complete control over markup and layout like a standard WYSIWYG editor, RichArea takes a different approach: it uses layout components where the layout is fixed but the content is editable via either standard text/textarea, Markdown, or more advanced controls.
## Installation
```
npm i bootstrap-richarea @fortawesome\font-awesome-free bootstrap
```
Then, create your first editor!
```html
```
```javascript
RichArea.create({
container: document.getElementById("richarea")
});
```
## Layouts
RichArea comes with 300 responsive layout components with these edit controls:
- Text
- Text area
- Markdown area
- Images
- YouTube video embeds
- Dropdown lists
- Hyperlinks
Features:
- Full WYSIWYG content editing
- Retrieve both HTML output and RichArea content data structures
- Render mobile-first Bootstrap components
## Quickstart
See the RichArea Starter Kit for a working demo:
git clone git@github.com:benallfree/bootstrap-richarea-starter.git
cd bootstrap-richarea-starter
npm run build
### Creating
RichArea.create({
container: document.getElementById('richarea'),
});
### Events
To get notified when content changes:
RichArea.create({
onChange: function(content)
{
console.log(content.html); // Plain HTML rendering
console.log(content.data); // Item data array (JSON compatible)
}
});
### Custom Layouts
To use a custom set of layouts (please note, you are responsible for loading them however you need to):
var myLayouts = {...};
RichArea.create({
layouts: myLayouts,
});
### Custom Categories
To use a custom set of categories:
var mycats = [...];
RichArea.create({
categories: myCats,
});
### Images
If you want RichArea to upload them to your server instead, use this:
$('#richarea').richarea({
imageUploadUrl: '/my/upload/handler',
});
RichArea will `POST` to the URL specified and expects back a JSON response:
{
status: "success|error",
url: "/path/to/image/on/server.png",
}
## Customizing CSS
If you're using a Bootstrap theme and can build your own RichArea CSS, include your `variables.scss` and then `./src/sass/_richarea.scss`.
It might be easier though just to override RichArea's color choices:
.richarea
{
&.richarea-editor {
ul.sortable {
li {
.tools {
background: rgba($gray, 0.2);
}
&.active {
.item
{
&:after
{
background: rgba($gray-lighter, 0.44);
}
}
}
}
}
.modal-body.component-selector {
background-color: $gray-lighter;
color: $gray-darker;
}
img {
&.component {
border: 1px solid $gray-lighter;
}
}
}
}
Or just the plain old CSS:
.richarea.richarea-editor ul.sortable li .tools {
background: rgba(85, 85, 85, 0.2); }
.richarea.richarea-editor ul.sortable li.active .item:after {
background: rgba(238, 238, 238, 0.44); }
.richarea.richarea-editor .modal-body.component-selector {
background-color: #eeeeee;
color: #222222; }
.richarea.richarea-editor img.component {
border: 1px solid #eeeeee; }
## Building
RichArea is built via Webpack. See the RichArea Starter Kit for details.
### Generating Thumbnails:
brew install imagemagick
brew install graphicsmagick
node ./scripts/thumbnails.js