文本区域内容可编辑

问题描述 投票:0回答:5

我正在尝试使文本区域内容可编辑,但失败了。我正在使用此代码:

<textarea id='' class='' name='notes' rows='12' cols='67' contenteditable='true' ></textarea>

我期待像 http://html5demos.com/contenteditable

这样的结果

有人知道为什么它不起作用吗?

编辑:

我这样做是因为我试图做一个 oneliner 以将控件添加到表单中,在该表单中可以粘贴 (HTML) 格式的内容并保留其格式。我试图做到这一点,无需大惊小怪,无需 JavaScript 代码。看来这是不可能的。如果没有添加相反的进一步输入,我将在一天内关闭这个问题。

html textarea contenteditable
5个回答
4
投票

您是否在页面顶部设置了正确的文档类型?对于 HTML5,您需要以下文档类型:

<!DOCTYPE html>

另外,为什么是文本区域?文本区域已经可以编辑。


1
投票

他们没有使用文本区域,文本区域已经是可编辑的。这就是他们正在使用的

<section contenteditable="true" id="editable">
    <h2>Go ahead, edit away!</h2>
    <p>Here's a typical paragraph element</p>
    <ol>
      <li>and now a list</li>
      <li>with only</li>
      <li>three items</li>
    </ol>
  </section>

1
投票

我不想重复任何事情,但我已经制作了一个演示来展示正在发生的事情。

http://gist.github.com/210327

只需运行该程序,编辑您想要的内容,然后单击“输出格式化内容”语句即可接收一条警报消息,其中包含 contenteditable 元素中实际 html 格式内容的输出。 至于添加格式等,您需要制作在突出显示的内容上调用文本修改功能的按钮。 是的,那部分会很有趣。

尽管如此,我希望这会有所帮助。


0
投票

鉴于您的评论回复,我会推荐任何优秀的所见即所得编辑器。不需要重新发明轮子,而且我认为

contenteditable
无论如何也不能满足你的需求。

我个人最喜欢的是CKEditor,但还有很多很多其他的。 TinyMCE也很受欢迎。


0
投票

Textarea 已经是输入字段,不接受 html 标签。要传递 html,只需使用 contenteditable div 并使其看起来像带有 CSS 的输入字段。然后你可以将 div 的 innerHTML 值传递到你的表单。

<style>
.contenteditable {
    display: block;
    width: 100%;
    height: 200px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #cccccc;
    overflow:auto;
    -webkit-transition: border 500ms ease-out;
    -moz-transition: border 500ms ease-out;
    -o-transition: border 500ms ease-out;
}
    .contenteditable:focus {
        outline: none;
        box-shadow: 0 0 5px #529cdc80;
        border: 1px solid #529cdc;
    }
</style>

<div class='contenteditablestyle' contenteditable='true'><b>Bold</b> Test</div
© www.soinside.com 2019 - 2024. All rights reserved.