使用 jquery.inline-edit.js 对 Textarea 进行内联编辑 - 获取 id 并保存

Question

我正在寻找一种在表中实现内联编辑的简单方法（使用 Django）。到目前为止，我还没有测试像Django-Front或django-inlineedit这样的东西。我已经发现，并非所有简单的解决方案都适合我。jqInlineEdit和 inline-edit.jquery.js 只适用于唯一的选择器，正如我在此处所述。

使用jQuery.editable（jquery.inline-edit.js），我没有这些问题，但我不知道如何获取id并保存数据。

<div id="remark4" class="editable" data-cid="4">Test #4</div>
<div id="remark5" class="editable" data-cid="5">Test #5</div>
<div id="remark6" class="editable" data-cid="6">Test #6</div>

<script src="file:jquery.inline-edit.js"></script>
<script>
    $('.remark').inlineEdit('click', {

        // use textarea instead of input field
        type: 'textarea',
        // attributes for input field or textarea
        attributes: {
            id: $(this).attr("data-cid"),
            class: 'input-class-1 input-class-2 input-class-3',
            style: 'background:#ffe;'
        }
    });
</script>

是$(this).attr("data-cid")部分正确的吗？alert(c_id + content)在表单中的内容发生更改后，我该如何运行？我没有找到相关的文档或示例，到目前为止，反复试验还没有成功。

跟进：

该文档确实给出了示例。令人难以置信的是我之前没有看到这一点，对此感到抱歉。

我尝试了以下代码而不是上面的代码：

    var option = { trigger: $(".editable"), action: "click" };
    $(".editable").editable(option, function (e) {
        alert(e.value);
    });

这是错误消息： TypeError: $(...).editable is not a function

还是有什么问题？

Answer 1

如果我可以建议使用HTMLElement.contentEditable API的替代方法。

$("[data-cid]").prop({tabindex: 1, contenteditable: true}).on({

  focusin() {
    this.__html = $(this).html(); // Store current HTML content
  },
  
  focusout() {
  
    const data = {
      cid: this.dataset.cid,
      html: this.innerHTML,
    };
    
    if (this.__html === data.html) return;  // Nothing has changed.
    
    console.log(data); // Something changed, send data to server.
  }
  
})

<div data-cid="4">Test #4</div>
<div data-cid="5">Test #5</div>
<div data-cid="6">Test #6</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

打造自己的图书馆

这是一个如何简单地创建自己的可重用函数的示例：

// Editable
function Editable(sel, options) {
  if (!(this instanceof Editable)) return new Editable(...arguments); 
  
  const attr = (EL, obj) => Object.entries(obj).forEach(([prop, val]) => EL.setAttribute(prop, val));

  Object.assign(this, {
    onStart() {},
    onInput() {},
    onEnd() {},
    classEditing: "is-editing", // added onStart
    classModified: "is-modified", // added onEnd if content changed
  }, options || {}, {
    elements: document.querySelectorAll(sel),
    element: null, // the latest edited Element
    isModified: false, // true if onEnd the HTML content has changed
  });

  const start = (ev) => {
    this.isModified = false;
    this.element = ev.currentTarget;
    this.element.classList.add(this.classEditing);
    this.text_before = ev.currentTarget.textContent;
    this.html_before = ev.currentTarget.innerHTML;
    this.onStart.call(this.element, ev, this);
  };
  
  const input = (ev) => {
    this.text = this.element.textContent;
    this.html = this.element.innerHTML;
    this.isModified = this.html !== this.html_before;
    this.element.classList.toggle(this.classModified, this.isModified);
    this.onInput.call(this.element, ev, this);
  }

  const end = (ev) => {
    this.element.classList.remove(this.classEditing);
    this.onEnd.call(this.element, ev, this);
  }

  this.elements.forEach(el => {
    attr(el, {tabindex: 1, contenteditable: true});
    el.addEventListener("focusin", start);
    el.addEventListener("input", input);
    el.addEventListener("focusout", end);
  });

  return this;
}

// Use like:
Editable(".editable", {
  onEnd(ev, UI) { // ev=Event UI=Editable this=HTMLElement
    if (!UI.isModified) return; // No change in content. Abort here.
    const data = {
      cid: this.dataset.cid,
      text: this.textContent, // or you can also use UI.text
    }
    console.log(data); // Submit your data to server
  }
});

/* Your styles */
.editable { 
  padding: 10px;
  background: #eee;
  display: inline-block;
}

/* this class is handled by Editable */
.is-modified { 
  background: #bff;
}

/* this class is handled by Editable */
.is-editing { 
  background: #bfb;
  outline: none;
}

<div class="editable" data-cid="4">Test #4</div>
<div class="editable" data-cid="5">Test #5</div>
<div class="editable" data-cid="6">Test #6</div>
<div class="editable" data-cid="7">Test #7</div>

可编辑功能：

Editable("selector", options);
返回： Editable 实例

选项对象：

特性：

classEditing:
串要在加入的focusIn类（缺省： - "is-editing"）

classModified:
字符串-类对事件的内容加入，如果内容已经改变（默认："is-modified"）

方法：

onStart(event, UI)
功能- 触发"focusin"事件
参数：event触发回调的事件
参数：UI可编辑实例对象
绑定：this绑定到关联的 HTMLElement

onInput(event, UI)
功能- 触发"input"事件
参数：event触发回调的事件
参数：UI可编辑实例对象
绑定：this绑定到关联的 HTMLElement

onEnd(event, UI)
功能- 触发"focusout"事件
参数：event触发回调的事件
参数：UI可编辑实例对象
绑定：this绑定到关联的 HTMLElement

参数UI（可编辑实例）属性：

text 字符串-在当前编辑元素的textContent
html 字符串-在当前编辑元素的innerHTML
text_before 字符串-元素的的textContent编辑之前
html_before 字符串-元素的innerHTML编辑之前
isModified 布尔-true如果innerHTML的不等于原
elements-静态元素的（非实时）节点列表
element-最新编辑的 HTMLElement