There's a newer version of our plugin. Take a look here.

jQuery: Content Editor plugin

edit your website content live in the browser.

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

1. Download the plugin #

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

Download v1.0.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 live on this page and through our demo 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.

Add options to our plugin: 

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

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

Option Type Default Description
enableUrlQuery boolean false Edit content on the page when the URL query is enabled, false by default.
urlQuery string "contentEditable" Specify the query to enter into the URL for editing content. Specify true as the value
removeFocus boolean false Remove focusable outline from editable content (not recommended).
excludeItems 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'.