文本框的 Javascript 值转换为其他 html 标记 (td) onclick

Posted 2023-05-07

【中文标题】文本框的 Javascript 值转换为其他 html 标记 (td) onclick

【英文标题】：Javascript value of textbox into other html tag (td) onclick

【发布时间】：2020-09-29 20:08:26

【问题描述】：

我在文本框中有一些价值，下面有按钮。 Onclick 我需要用这个值更新内部（这将是 html 标签） 我试过了：

javascript：

<script>
function copyfunction() 
    var textarea = document.getElementById('mytextarea');
    var preview = document.getElementById('html_preview');
    preview.innerHTML = textarea.value;

</script>

html:

<textarea id=mytextarea name=text>some initial text</textarea>
<button type=button onclick=\"copyfunction();\">Preview</button>

<table><tr>
    <td id=html_preview></td>
</tr></table>

但它什么也没做

编辑：很抱歉离开转义\但我在 php 中这样做，所以：

echo "<button type=button onclick=\"copyfunction();\">Preview</button>";

- 它不起作用，但是当我在简单的 html 中执行此操作时，它会执行 :(

EDIT2：我很抱歉你的所有努力，它工作正常，但是我实现TinyMCE 并且它不适用于这个应用程序:(

【问题讨论】：

请向我们展示完整的 php 代码及其生成的 html 输出。

【参考方案1】：

一旦 TinyMCE 被初始化并在页面上可见，原来的 textarea 就不再可见了。当您初始化 TinyMCE 时，它会将iframe 渲染为内容编辑区域（有效地隐藏了textarea）。

如果您想提取 TinyMCE 内容，您需要使用 TinyMCE API 来执行此操作。您可以使用getContent() 来检索编辑器的当前内容：

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getcontent

例如：

tinymce.activeEditor.getContent(); 

这是一个工作示例，说明如何将相邻 DIV 与 TinyMCE 中的内容同步：

http://fiddle.tinymce.com/HLgaab/5

【讨论】：

在fiddle中，将innerText改为innerHTML即可看到浏览器渲染的内容。

【参考方案2】：

对您的代码进行了一些更改，它可以工作。在onclick=\"copyfunction();\ 中，您需要删除\s

function copyfunction() 
  var textarea = document.getElementById('mytextarea');
  var preview = document.getElementById('html_preview');
  preview.innerHTML = textarea.value;

<textarea id=mytextarea name=text>some initial text</textarea>
<button type=button onclick= "copyfunction()">Preview</button>

<table>
  <tr>
    <td id=html_preview></td>
  </tr>
</table>

【参考方案3】：

在您的 HTML 属性中省略那些转义的反斜杠。 此外，您应该将所有属性值放在双引号中。

function copyfunction() 
    var textarea = document.getElementById('mytextarea');
    var preview = document.getElementById('html_preview');
    preview.innerHTML = textarea.value;

<textarea id="mytextarea" name="text">some initial text</textarea>
<button type="button" onclick="copyfunction();">Preview</button>

<table><tr>
    <td id="html_preview"></td>
</tr></table>

【讨论】：

我迟到了 3 秒 :(