https://github.com/sonirico/jiris
jQuery plugin for setting background styles and colors within contenteditable elements in a Twitter like way.
https://github.com/sonirico/jiris
contenteditable css jquery jquery-plugin styling
Last synced: 3 months ago
JSON representation
jQuery plugin for setting background styles and colors within contenteditable elements in a Twitter like way.
- Host: GitHub
- URL: https://github.com/sonirico/jiris
- Owner: sonirico
- License: gpl-3.0
- Created: 2017-02-11T23:10:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-18T23:25:26.000Z (over 9 years ago)
- Last Synced: 2026-01-03T18:51:39.810Z (6 months ago)
- Topics: contenteditable, css, jquery, jquery-plugin, styling
- Language: JavaScript
- Homepage: https://sonirico.github.io/jiris/
- Size: 44.9 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Jiris
Have you ever noticed that some apps set a different style to text excess in a form-like element? E.g: like Twitter, when the well-known 140 are exceeded, the background of the over-140 text is red. This inmature plugin intends to provide that functionality.
[Check out online working demo](https://sonirico.github.io/jiris/)
## Screenshot
## Quick start
Libraries required:
- jQuery ~> 1.9.\*
Code
```css
.ok {
}
.excess {
background-color: #f9f2f4;
color: #c7254e;
}
```
```javascript
var config = {
'segments': [
{'len': 140, 'className': 'ok', 'tag': 'span'},
{'len': 200, 'className': 'excess', 'tag': 'em'}
]
};
$('#sample').jiris(config);
```
## Additional/Default configuration
```javascript
$.fn.jiris.debugMode = false;
$.fn.jiris.defaultEditableClass = "editable-area";
$.fn.jiris.namespace = "jiris";
$.fn.jiris.defaults = {
'maxlength': 0,
'min-width': '100%',
'min-height': "100px",
'height': "auto",
'resize': "both",
'segments': [
{'len': 11, 'className': $.fn.jiris.namespace + ' jiris-default-1', 'tag': 'span'},
{'len': 13, 'className': $.fn.jiris.namespace + ' jiris-default-2', 'tag': 'span'},
{'len': 17, 'className': $.fn.jiris.namespace + ' jiris-default-3', 'tag': 'span'}
]
};
```
## TODO
- Implement **onSegmentChanged** method. Event fired whenever the number of styled elements changes.
- Evolve *len* property to something like `{'from': 20, 'len': 7}` to allow styling based in ranges.
### Contributing
... Have you got here? Be my guest.