angularjs directive for the squire rich text editor.
2.0.0 is the latest but you should use the 1.x.x release because all these docs go with that. thanks!
- a more functional ui than squire's example
- minimal look and feel
- my cat loves it
- optional configurable html sanitization (requires sanatize.js - which is not included)
Check out the DEMO
bower install angular-squire --savenpm install angular-squire --save
or include the following in your code:
(or the non
Don't forget to include squire-rte before this script!
add an angular module dependency:
basic usage of the directive looks like this:
editor-class - class given to the editor container (optional)
height - css height for the editor (optional)
width - css width for the editor (optional)
body - binding that contains the initial html contents of the editor, if different from
ng-model - where does the html go? required
placeholder - placeholder text (optional)
buttons - object containing button visibility options, see below (optional)
purifyPaste - boolean or object. If true enable DOMPurify on paste, if object, use as options to DOMPurify (needs DOMPurify)
focusExpand - boolean when true add listener for focus of this element and children that cause editor to expand open and close on blur while form is still clean
Changing which buttons show on editor
buttons attribute on the directive can be an object where you can set any of the following keys to false.
All keys are optional
bold: trueitalic: trueunderline: truelink: trueol: trueul: truequote: trueheader: truealignRight: truealignLeft: truealignCenter: trueundo: trueredo: true
With cover and controls
You can use
<squire-controls> elements within the body of the
squire-cover will display its contents instead of the editor until you click on it, at which point it will hide and show you the editor and the controls (optional)
squire-controls will place it's contents within the squire div. Its purpose is to add buttons under the editor which you can hide and show together with the editor.
Click if you like catsMeow
squireServiceProvider is available to configure the directive. It has the following methods:
setButtonDefaults(obj) object containing default button visibility for all editors. See 'Changing which buttons show on editor' section for key names
input is sanitized if you include DOMPurify (either having it in your node_modules or be on window)
changing the template
If you want to change the editor's template html, you can do so by putting your custom template into
$templateCache under the key
/modules/angular-squire/editor.html after you include this
For example html template see current template
For advanced usage see demo.
customizing scss styles
The dist dir comes with the original sass stylesheet used to generate the css. You may elect to include this instead of the css if you already use sass in your project.
The scss file
dist/css/angular_squire.scss contains some variables which you may override:
"angular": ">=1.3.8""squire-rte": ">=1.3.0"
npm installnpm run build
sorry, it wont work on windows unless you have unix command line utils i use installed