Inline CSS Editor (ICE)

This plugin provides a simple way to edit the CSS properties of any element on the document, inline. The document can be set to EDIT mode on click of a button. Once in the EDIT mode, a click on any of the elements in the editable section would open up a dialog asking for the new CSS property for the clicked element.



Details

Author
Amit Kumar
GitHub
proxygeek/Inline-CSS-Editor--ICE-
Downloads
3061
Category
Utilities
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: mootools-1.2.4-core

How to use

Dependencies: mootools-1.2.4-core-nc (later versions of the MooTools core should work too)

Summary: Include ice.js along with mootools-1.2.4-core.js and call the create_ice() method on any element you want to be editable.

Also include a button/link which will toggle the state between Edit/Normal mode by calling edit_mode_toggle method.

Steps:

1) Download and extract the files(MooTools core & ice.js) in your project folder.

2) Include a link/button to toggle b/n EDIT/NORMAL modes by attaching the edit_mode_toggle method to it

    $('edit_button').addEvent('click', edit_mode_toggle);

3) Call the create_ice() method on the elements you want to support the CSS editing

    $('YourElementID').addEvent('click',function(){
                event.stopPropagation();
                this.create_ice();
    });

4) You can choose the CSS properties available for editing by sending them as options while calling create_ice()

   For example, to have color, width and height available, you can use:
            this.create_ice({
                css_prop_1:'color',
                css_prop_2:'width',
                css_prop_3:'height',
                css_prop_4:'background'
            });

Demo

You can check the code and the working demo at http://nextfive.net/projects/ice/ice_demo.html


Changes

Changes in this version: a) Code converted from inline to class b) Class provides options for choosing the CSS properties to be made editable


Issues

a) There probably will be many. Feel free to fork and change. Or drop me a line.

Notes

This plugin can be enhanced further to: a) Have a smoother user interaction using MooTools Fx b) create a online WYSIWYG editor, by combining with other plugins like color selector


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus