允许用户更改 div 中的文本答案

【问题标题】：allow user to change text in div允许用户更改 div 中的文本
【发布时间】：2016-10-18 13:06:19
【问题描述】：

大家好，我正在尝试在 js 中创建一个函数，允许用户在 div 中编辑文本。这是我的看法：

@endsection
 <div onload="InitEditable ();" id="content-link2"></div>
@show

这是我在 div id="content-link2":: 中加载的 HTML 文件

<!DOCTYPE html>

<html>
<head>
    <title>Template 1</title>
  <link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">

</head>
<body class="pink">
<div  contenteditable="true" id="content" class="draggable ui-widget-content pink"><p>hello</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment(e);" />
</div>

</form>
</body>
</html>

JS::

var editorDoc;
 function InitEditable () {
var editor = document.getElementsById('content-link2');
 editorDoc = editor.contentWindow.document;          
            var editorBody = editorDoc.div;

                // turn off spellcheck
            if ('spellcheck' in editorBody) {    // Firefox
                editorBody.spellcheck = false;
            }

            if ('contentEditable' in editorBody) {
                    // allow contentEditable
                editorBody.contentEditable = true;
            }
            else {  // Firefox earlier than version 3
                if ('designMode' in editorDoc) {
                        // turn on designMode
                    editorDoc.designMode = "on";                
                }
            }
        }

我将解释一个过程。客户点击加载 div 内的 html 文件的图像。然后我允许用户移动带有 html 文件的 div，现在我想允许客户更改该 div 内的文本

【问题讨论】：

您需要提供minimal complete and verifiable仅相关代码的示例。现在你已经包含了太多的代码，并没有将其缩小到“编辑 div 内的文本”部分。
完成。我认为只需要这个，我已经包含了 html 来显示应该能够编辑的内容
document中没有div这样的属性，如果要访问页面上的第一个div或要使用jQuery，则需要调用document.getElementsByTagName('div')[0]$('div')[0]
如果我想访问文档中的所有 div 怎么办？因此能够编辑超过 1 个 div？
这样？？ function InitEditable () { var editor = document.getElementsByTagName('div')[0]; editorDoc = editor.contentWindow.document; var editorBody = editorDoc.$('div')[0];

标签： javascript jquery html css

【解决方案1】：

你为什么不试试contenteditable。

例如：

&lt;div contenteditable="true"&gt;Type to edit...&lt;/div&gt;

正如MDN - Making Content Editable 所说：

在 HTML 中，任何元素都是可编辑的。通过使用一些 JavaScript 事件处理程序，您可以将您的网页转换为完整且快速的丰富文本编辑器。本文提供了一些关于此的信息功能。

【讨论】：

这是我目前正在使用的，但我还必须实现一个功能来保存数据库中该 div（html 页面）的更改
为什么不使用 web 标准——get() 并将其发送到 php 文件。在那里，告诉 php 访问数据库并在那里写表？