In-place Editing With Bootstrap 5 And Pure JavaScript – dark-editable

dark-editable is a rewritten version of the x-editable jQuery plugin that enables dynamic in-place editing in your web app.

Based on Bootstrap 5 and moment.js (for datetime handling).

Supported Input Types:

• text
• textarea
• select
• date
• time
• datetime
• password
• email
• url
• tel
• number
• range

How to use it:

1. Load the necessary Bootstrap framework and moment.js library in the document.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Moment.js -->
<script src="/path/to/cdn/moment.min.js"></script>

2. Load the dark-editable’s JavaScript and CSS files.

<link rel="stylesheet" href="./dist/dark-editable/dark-editable.css" />
<script src="./dist/dark-editable/dark-editable.js"></script>

3. Initialize the DarkEditable on the editable element and specify the input type.

<span id="text"></span>

const text = document.getElementById("text");
const popover = new DarkEditable(text, {
      type: "text",
      value: "cssscript",
});

4. Communicate the data with your server.

const popover = new DarkEditable(text, {
      type: "text",
      value: "cssscript",
      url: "/path/to/api/",
      ajaxOptions: null, // ajax options here
});

5. More configuration options.

const popover = new DarkEditable(text, {
      type: "text",
      value: "cssscript",
      disabled: false,
      emptytext: 'Empty',
      name: null, // name of the field
      pk: null, // primary key
      send: true, // send data to server
      mode: 'popup', // or 'inline'
      success: function(response, newValue) {
        if(response.status == 'error') return response.msg; //msg will be shown in editable form
      },
      error: function(response, newValue) {
        // do something
      },
});

6. Additional options which are available based on the input type.

// text
const popover = new DarkEditable(text, {
      type: "text",
      placeholder: "placeholder",
});

// textarea
const popover = new DarkEditable(text, {
      type: "textarea",
      placeholder: "placeholder",
});

// select
const popover = new DarkEditable(text, {
      type: "select",
      source: [
       {value: 1, text: "text1"}, {value: 2, text: "text2"}
      ],
});

// date
const popover = new DarkEditable(text, {
      type: "date",
      format: "YYYY-MM-DD",
      viewformat: "YYYY-MM-DD",
});

// time
const popover = new DarkEditable(text, {
      type: "time",
      placeholder: "placeholder",
});

// datetime
const popover = new DarkEditable(text, {
      type: "datetime",
      format: "YYYY-MM-DD",
      viewformat: "YYYY-MM-DD",
});

// password
const popover = new DarkEditable(text, {
      type: "password",
      placeholder: "placeholder",
});

// email
const popover = new DarkEditable(text, {
      type: "email",
      placeholder: "placeholder",
});

// url
const popover = new DarkEditable(text, {
      type: "url",
      placeholder: "placeholder",
});

// tel
const popover = new DarkEditable(text, {
      type: "tel",
      placeholder: "placeholder",
});

// number
const popover = new DarkEditable(text, {
      type: "number",
      placeholder: "placeholder",
});

// range
const popover = new DarkEditable(text, {
      type: "range",
      placeholder: "placeholder",
});

7. API methods.

// disable
popover.disable();

// enable
enable();

// get the current values
getValue();

// set value
setValue(value);

8. Events.

document.getElementById("targetElement").addEventListener("show", function(e){
  // show
});

document.getElementById("targetElement").addEventListener("shown", function(e){
  // shown
});

document.getElementById("targetElement").addEventListener("hide", function(e){
  // hide
});

document.getElementById("targetElement").addEventListener("hidden", function(e){
  // hidden
});

document.getElementById("targetElement").addEventListener("save", function(e){
  // save
});

document.getElementById("targetElement").addEventListener("init", function(e){
  // init
});

Changelog:

v2.1.5 (04/22/2025)

• bugfix

v2.1.4 (04/19/2025)

• Minor update

03/04/2025

• Fix date and datetime fields

02/24/2025

• Deleted value and moved it to options.

01/09/2025

• Bugfixed

09/26/2023

• Added inline mode

The post In-place Editing With Bootstrap 5 And Pure JavaScript – dark-editable appeared first on CSS Script.