npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-squire

v2.5.6

Published

angularjs directive for squire rich text editor

Downloads

99

Readme

angular-squire

angularjs directive for the squire rich text editor.

important

2.0.0 is the latest but you should use the 1.x.x release because all these docs go with that. thanks!

Features:

  • 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

install

bower install angular-squire --save
npm install angular-squire --save

or include the following in your code:

/dist/css/angular-squire.min.css
/dist/scripts/angular-squire.min.js

(or the non .min versions)

Don't forget to include squire-rte before this script!

usage

add an angular module dependency: angular-squire

basic usage of the directive looks like this:

<squire editor-class="foo" height="150px"
    ng-model="myModel" body="initialValue"
    placeholder="Type in here!">
</squire>

Attributes: 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 (optional) 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

The 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: true
    italic: true
    underline: true
    link: true
    ol: true
    ul: true
    quote: true
    header: true
    alignRight: true
    alignLeft: true
    alignCenter: true
    undo: true
    redo: true
}

With cover and controls

You can use <squire-cover> and <squire-controls> elements within the body of the <squire> tag.

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.

Example:

<squire height="150px" ng-model="bar" name="body" placeholder="why do you like cats?" required>
    <squire-cover>
        <div style="border: 1px solid #dde6e8; color: #bbb; padding: 10px; cursor: pointer;">Click if you like cats</div>
    </squire-cover>
    <squire-controls>
        <div class="form-group">
            <button class="btn btn-primary pull-right" style="margin-top: 10px;" type="button">Meow</button>
        </div>
    </squire-controls>
</squire>

squireServiceProvider

squireServiceProvider is available to configure the directive. It has the following methods:

Methods: setButtonDefaults(obj) object containing default button visibility for all editors. See 'Changing which buttons show on editor' section for key names

html sanitization

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 the $templateCache under the key /modules/angular-squire/editor.html after you include this directive's javascript.

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-squire-border-radius: 5px !default;
$angular-squire-container-bg: #dde6e8 !default;
$angular-squire-border-color: #dde6e8 !default;
$angular-squire-popover-bg: #FAFAFA !default;
$angular-squire-highlight-color: #55ACEE !default;
$angular-squire-wrapper-padding: 5px 0 !default;
$angular-squire-expanding-height-min: 70px !default;
$angular-squire-expanding-height-max: 150px !default;

depends on

"angular": ">=1.3.8",
"squire-rte": ">=1.3.0"

building

npm install
npm run build

sorry, it wont work on windows unless you have unix command line utils i use installed