如何使用 JavaScript 获取 Tinymce 文本区域的内容答案

【问题标题】：How to get the content of a Tinymce textarea with JavaScript如何使用 JavaScript 获取 Tinymce 文本区域的内容
【发布时间】：2010-12-29 06:03:25
【问题描述】：

我有一个内容数组，然后我们如何在 javascript 中获取 Tinymce textarea 的内容

【问题讨论】：

标签： javascript tinymce

【解决方案1】：

我用代码解决了：

// Get the HTML contents of the currently active editor
tinyMCE.activeEditor.getContent();

// Get the raw contents of the currently active editor
tinyMCE.activeEditor.getContent({format : 'raw'});

// Get content of a specific editor:
tinyMCE.get('content id').getContent()

activeEditor 是当前编辑器，但是我用 tinyMCE.get('editor1').getContent() 无法获取我的编辑器的值，希望对你有帮助

Tinymce API：http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

【讨论】：

如果版本 >= 4.5 则使用 tinymce 而不是 tinyMCE
@Mitoxys 对于版本 >= 5，这似乎仍然失败
@Mitoxys 哦没关系...这很奇怪，但tinymce 在我调用init 之前具有这些属性，但之后它似乎引用了一个没有这些属性的元素。
刚刚在 V5 上测试。使用tinymce（没有大写），它工作正常。 More info here.
{format : 'raw'} 解决了无法从编辑器中获取彩色文本等问题。

【解决方案2】：

假设您的 mce textarea 实例是：

<textarea id="editor1" ....></textarea>

那么你得到的内容如下：

var content =  tinyMCE.getContent('editor1');

如果您的意思是在一个页面上有多个 mce 编辑器实例并且您想要获取内容，请尝试以下方法：

var inst, contents = new Object();
for (inst in tinyMCE.editors) {
    if (tinyMCE.editors[inst].getContent)
        contents[inst] = tinyMCE.editors[inst].getContent();
}

以上代码将每个编辑器内容添加到一个数组中

【讨论】：

这个答案很可能是针对旧版本的 TinyMCE。要使用最新的（4.x）做到这一点，@jqpress 的答案是正确的。
未捕获的类型错误：tinyMCE.getContent 不是函数

【解决方案3】：

我遇到了同样的问题。我已经用这段代码解决了：

tinyMCE.get('editor1').getContent();

来源：spocke is the author

【讨论】：

【解决方案4】：

你可以使用：

tinymce.get(editorid).getContent();

【讨论】：

【解决方案5】：

在我的情况下（v4.3.12），以上都不起作用，所以我做了一个解决方法：

HTML代码：

<div id="wrapper">
    <textarea id="editable_container" name="editable_container"></textarea>
</div>

JQuery 代码：

var iframe = $('#editable_container_ifr');
var editorContent = $('#tinymce[data-id="editable_container"]', iframe.contents()).html();
console.log(editorContent);

editable_container 是我的 tinyMCE 编辑器的占位符文本区域，可编辑区域的 iframe id 是通过将 _ifr 后缀添加到占位符的 id 生成的，content-editable 容器（包含格式化文本）有一个 id tinymce 带有占位符 ID 的 data-id 属性。

【讨论】：

【解决方案6】：

使用 TinyMCE API 中的 getContent() 方法。

假设您已经在 id=”myTextarea” 的 textarea 上初始化了编辑器。首先使用相同的 id 访问编辑器，然后调用 getContent()。例如：

var myContent = tinymce.get('myTextarea').getContent();

或者，您可以访问 活动编辑器，而不是通过 id 访问编辑器：

var myContent = tinymce.activeEditor.getContent();

如果要获取不带 HTML 标记的 TinyMCE 内容，可以传入一个参数以指示您想要纯文本的结果。例如：

var myContent = tinymce.get('myTextarea').getContent({format: 'text'});

更多信息和示例在这里：https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce。

【讨论】：

除了另一个答案建议的 {format: 'text'} 或 {format: 'raw'} 之外，还有哪些可用选项？ doc 不是很有帮助，因为它只声明有一个 format:text 选项。
当我查看 DEV 构建的 tinymce.js 时，我发现 tree 是第三个选项。

【解决方案7】：

tinymce.get('editorId').setContent(response.data);

【讨论】：

请附上解释

【解决方案8】：

这对我来说适用于版本 4 (9.8)：

var Content = tinyMCE.editors['Your_ID'].getContent();

【讨论】：

【解决方案9】：


tinymce.activeEditor.getContent();

【讨论】：

【解决方案10】：

如果您更熟悉（并且正在使用 jquery 包装器），您也可以这样做：

$('#editor1').tinymce().getContent();

其中 (editor1) 是您的选择器。

【讨论】：