Editable Element

editable-element is a lightweight JavaScript plugin that allows you to create and manage editable content within your HTML templates. This plugin enables inline editing of specific elements by using the data-editable attribute.

Features

• Attribute-Based Editing: Easily make any HTML element editable by adding data-editable="title" or other similar attributes.
• HTML Template Editing: Modify and update content directly within your HTML templates.
• Toolbar Integration: Includes a toolbar with text formatting options (bold, italic, underline, etc.).
• Custom Event Handling: Supports onClickSave callbacks for handling content changes.
• Preview and Save: Built-in buttons for previewing and saving the edited content.
• Customizable: Highly customizable to suit various editing needs.

Installation

You can install the plugin via npm:

npm install editable-element

Current Version

The current version is v${nextRelease.version}.

1.Getting Started

Add CSS file

Include the necessary CSS file in your HTML:

 <link rel="stylesheet" href="https://unpkg.com/editable-element/dist/umd/style.css">

Add JS file

Include the JavaScript file and initialize the EditableElement:

 <script src="https://unpkg.com/editable-element/dist/umd/editable-element.min.js"></script>
 <script>
   new EditableElement.EditableElement({
    onClickSave:(values)=>console.log(values),
    onClickPublish:(values)=>console.log(values),
    onClickPreview:(values)=>console.log(values),
    onClickBack:()=>console.log('Clicked Back'),
    onClickClose:(e)=>console.log("Closed")
   })
 </script>

1.Set up your HTML - Text

Make any text element editable by using the data-editable attribute:

<div data-editable="any_name"> </div>

1.Set up your HTML - Image

For image editing, add the data-editable-type='image' attribute:

<div data-editable="any_name" data-editable-type="image">
  <img src="image_url" alt="image_alt">
</div>