使用jquery.内联编辑对文本区域进行内联编辑.js – 获取 id 并保存

Question

我正在寻找一种简单的方法来在表格中实现内联编辑（使用Django）。到目前为止，我还没有测试像詹戈阵线或詹戈内联编辑这样的东西。我已经发现，并非所有简单的解决方案都适合我。正如我在这里描述的那样，jqInline编辑和内联编辑.jquery.js只使用唯一的选择器。

使用jQuery.可编辑（jquery.内联编辑.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

如果我可以建议使用HTML元素可编辑API的替代方案。$("[data-cid]").prop({tabindex: 1, contenteditable: true}).on({&nbsp; focusin() {&nbsp; &nbsp; this.__html = $(this).html(); // Store current HTML content&nbsp; },&nbsp;&nbsp;&nbsp; focusout() {&nbsp;&nbsp;&nbsp; &nbsp; const data = {&nbsp; &nbsp; &nbsp; cid: this.dataset.cid,&nbsp; &nbsp; &nbsp; html: this.innerHTML,&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if (this.__html === data.html) return;&nbsp; // Nothing has changed.&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; console.log(data); // Something changed, send data to server.&nbsp; }&nbsp;&nbsp;})<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>创建自己的库下面是一个示例，说明如何简单地创建自己的可重用函数：// Editablefunction Editable(sel, options) {&nbsp; if (!(this instanceof Editable)) return new Editable(...arguments);&nbsp;&nbsp;&nbsp;&nbsp; const attr = (EL, obj) => Object.entries(obj).forEach(([prop, val]) => EL.setAttribute(prop, val));&nbsp; Object.assign(this, {&nbsp; &nbsp; onStart() {},&nbsp; &nbsp; onInput() {},&nbsp; &nbsp; onEnd() {},&nbsp; &nbsp; classEditing: "is-editing", // added onStart&nbsp; &nbsp; classModified: "is-modified", // added onEnd if content changed&nbsp; }, options || {}, {&nbsp; &nbsp; elements: document.querySelectorAll(sel),&nbsp; &nbsp; element: null, // the latest edited Element&nbsp; &nbsp; isModified: false, // true if onEnd the HTML content has changed&nbsp; });&nbsp; const start = (ev) => {&nbsp; &nbsp; this.isModified = false;&nbsp; &nbsp; this.element = ev.currentTarget;&nbsp; &nbsp; this.element.classList.add(this.classEditing);&nbsp; &nbsp; this.text_before = ev.currentTarget.textContent;&nbsp; &nbsp; this.html_before = ev.currentTarget.innerHTML;&nbsp; &nbsp; this.onStart.call(this.element, ev, this);&nbsp; };&nbsp;&nbsp;&nbsp; const input = (ev) => {&nbsp; &nbsp; this.text = this.element.textContent;&nbsp; &nbsp; this.html = this.element.innerHTML;&nbsp; &nbsp; this.isModified = this.html !== this.html_before;&nbsp; &nbsp; this.element.classList.toggle(this.classModified, this.isModified);&nbsp; &nbsp; this.onInput.call(this.element, ev, this);&nbsp; }&nbsp; const end = (ev) => {&nbsp; &nbsp; this.element.classList.remove(this.classEditing);&nbsp; &nbsp; this.onEnd.call(this.element, ev, this);&nbsp; }&nbsp; this.elements.forEach(el => {&nbsp; &nbsp; attr(el, {tabindex: 1, contenteditable: true});&nbsp; &nbsp; el.addEventListener("focusin", start);&nbsp; &nbsp; el.addEventListener("input", input);&nbsp; &nbsp; el.addEventListener("focusout", end);&nbsp; });&nbsp; return this;}// Use like:Editable(".editable", {&nbsp; onEnd(ev, UI) { // ev=Event UI=Editable this=HTMLElement&nbsp; &nbsp; if (!UI.isModified) return; // No change in content. Abort here.&nbsp; &nbsp; const data = {&nbsp; &nbsp; &nbsp; cid: this.dataset.cid,&nbsp; &nbsp; &nbsp; text: this.textContent, // or you can also use UI.text&nbsp; &nbsp; }&nbsp; &nbsp; console.log(data); // Submit your data to server&nbsp; }});/* Your styles */.editable {&nbsp;&nbsp; padding: 10px;&nbsp; background: #eee;&nbsp; display: inline-block;}/* this class is handled by Editable */.is-modified {&nbsp;&nbsp; background: #bff;}/* this class is handled by Editable */.is-editing {&nbsp;&nbsp; background: #bfb;&nbsp; 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);返回：可编辑实例选项对象：性能：classEditing:字符串&nbsp;- 要在焦点上添加的类（默认值："is-editing")classModified:字符串&nbsp;- 如果内容已更改，则要在焦点上添加的类（默认值："is-modified")方法：onStart(event, UI)函数&nbsp;- 事件参数上的触发器：触发回调参数的事件：可编辑实例对象绑定：绑定到关联的 HTML 元素"focusin"eventUIthisonInput(event, UI)函数&nbsp;- 事件参数上的触发器：触发回调参数的事件：可编辑实例对象绑定：绑定到关联的 HTML 元素"input"eventUIthisonEnd(event, UI)函数&nbsp;- 事件参数上的触发器：触发回调参数的事件：可编辑实例对象绑定：绑定到关联的 HTML 元素"focusout"eventUIthis参数（可编辑实例）属性：UItext&nbsp;字符串&nbsp;- 当前编辑的元素的文本内容字符串&nbsp;- 当前编辑的元素的内HTML字符串&nbsp;- 元素的文本在编辑之前的内容&nbsp;字符串&nbsp;- 元素的内HTML 在编辑布尔值之前 - 如果 innerHTML 不等于原始- 静态（非实时） 元素的节点列表 - 最新编辑的 HTML 元素htmltext_beforehtml_beforeisModifiedtrueelementselement