jQuery: Content Editor plugin

edit your website content live in the browser.

Download v1.1.2 Demo 
npm install @ryan.holton/content-editor --save

1. Download the plugin #

Download the jQuery content editor plugin through NPM or through our Github page. Link to our content-editor-min.js and ensure to load jQuery before calling the plugin.

Download v1.1.2 View NPM page

2. Initialise it #

Once installed, initialise the plugin before the closing </body> tag. 

<script>
  $(function() {
    $('body').contentEditor();
  });
</script>

We initialise the plugin on the <body> so that everything is editble, however you can change this to another class or ID selector.

3. You're all set! #

And that's it! Simply edit content on your website. Next, take a look at our options.

Demo #

Try editing content below:

Edit this title

Edit this subtitle

Quisque id tellus non est porttitor viverra. Phasellus porttitor ut ligula quis mollis. Morbi eros risus, vulputate eu congue quis, interdum nec nisi. Donec ex purus, ullamcorper placerat tellus non, volutpat luctus sem. Curabitur facilisis enim vitae magna porta, non ullamcorper metus viverra. Donec et vulputate est. Donec nulla ligula, vehicula vitae dolor a, fermentum blandit nisl. Nam pulvinar neque quis mollis pulvinar.

Quisque id tellus non est porttitor viverra. Phasellus porttitor ut ligula quis mollis. Morbi eros risus, vulputate eu congue quis, interdum nec nisi. Donec ex purus, ullamcorper placerat tellus non, volutpat luctus sem. Curabitur facilisis enim vitae magna porta, non ullamcorper metus viverra. Donec et vulputate est. Donec nulla ligula, vehicula vitae dolor a, fermentum blandit nisl. Nam pulvinar neque quis mollis pulvinar.

https://example.com/

Quisque id tellus non est porttitor viverra. Phasellus porttitor ut ligula quis mollis. Morbi eros risus, vulputate eu congue quis, interdum nec nisi. Donec ex purus, ullamcorper placerat tellus non, volutpat luctus sem. Curabitur facilisis enim vitae magna porta, non ullamcorper metus viverra. Donec et vulputate est. Donec nulla ligula, vehicula vitae dolor a, fermentum blandit nisl. Nam pulvinar neque quis mollis pulvinar.

Plugin Options #

Configure the plugin using our provided options.

updated 1.1.0

Add options to our plugin: 

<script>
  $(function() {
    $('body').contentEditor({
      option: value
    });
  });
</script>

Use our options for choosing how you want to use our plugin:

Option Type Default Description
url string null Specify the query to enter into the URL for editing content.This cannot be a number.
focusable boolean false Remove outline from editable content (not recommended).
exclude string null Specify elements to exclude such as buttons or anchors. The string provided is the name of the element and can be multiple, e.g: 'a, button, div'.