javascript - 允许用户更改 div 中的文本

标签 javascript jquery html css

大家好,我正在尝试在 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 中的文本

So I want to change text inside a red div

最佳答案

你为什么不试试 contenteditable

例如:

<div contenteditable="true">Type to edit...</div>

正如 MDN - Making Content Editable 中所说:

In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.

关于javascript - 允许用户更改 div 中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40109150/

相关文章:

javascript - jquery API 请求错误/不会显示 giphy

javascript - jQuery 中的 .html() 不起作用

javascript - 使用 jQuery 遍历同级元素来查找下一个和上一个 div

html - 链接适合 100% 的空间

javascript - 更改图像的特定区域并在该区域填充颜色

javascript - Ajax 数据未到达后端 C# 代码

javascript - 在draggable + jquery ui中用内部元素画线

javascript - 远程javascript html代码注入(inject)

javascript - 为什么 Node.js 无法处理 Vue.js 的请求?

javascript - 使文本框的*只有一部分*不可编辑