在 TinyMCE 初始化后使用 javascript 设置 textarea 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11793368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set textarea value with javascript after TinyMCE initializing
提问by Milo?
I hava an textarea and I am using tinyMCE on that textarea.
我有一个 textarea，我在那个 textarea 上使用 tinyMCE。
What I am doing actually is that when the page is opened, I am populating the textarea with some text, and after that I am initializing the tinyMCE.
我实际上在做的是，当页面打开时，我用一些文本填充 textarea，然后我正在初始化 tinyMCE。
The problem is when I am trying to change the value of the textarea after tinyMCE initializing, then nothing happens.
问题是当我尝试在 tinyMCE 初始化后更改 textarea 的值时，没有任何反应。
Here is an example.
这是一个例子。
Creating the textarea:
<textarea style="width: 95%;" name="title" id="title"></textarea>Populating the textarea:
$('#title').html("someText");Initializing tinyMCE
tinyMCE.init({ // General options mode : "specific_textareas", theme : "advanced", width: "100%", plugins : "pagebreak,paste,fullscreen,visualchars", // Theme options theme_advanced_buttons1 : "code,|,bold,italic,underline,|,sub,sup,|,charmap,|,fullscreen,|,bullist,numlist,|,pasteword", theme_advanced_buttons2 :"", theme_advanced_buttons3 :"", theme_advanced_buttons4 :"", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", valid_elements : "i,sub,sup", invalid_elements : "p, script", editor_deselector : "mceOthers" });I would like to change the content of the textview (but it is not working)
创建文本区域：
<textarea style="width: 95%;" name="title" id="title"></textarea>填充文本区域：
$('#title').html("someText");初始化 tinyMCE
tinyMCE.init({ // General options mode : "specific_textareas", theme : "advanced", width: "100%", plugins : "pagebreak,paste,fullscreen,visualchars", // Theme options theme_advanced_buttons1 : "code,|,bold,italic,underline,|,sub,sup,|,charmap,|,fullscreen,|,bullist,numlist,|,pasteword", theme_advanced_buttons2 :"", theme_advanced_buttons3 :"", theme_advanced_buttons4 :"", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", valid_elements : "i,sub,sup", invalid_elements : "p, script", editor_deselector : "mceOthers" });我想更改 textview 的内容（但它不起作用）
I have tryed to use the same as before init the tinyMCE
我已经尝试使用与之前相同的方法来初始化 tinyMCE
$('#title').html("someModifiedText"); // does not work
I have also tryed to remove tinyMCE:
我也尝试删除 tinyMCE：
if(tinyMCE.getInstanceById('title'))
removeTinyMCE("title");
With
和
function removeTinyMCE (dialogName) {
tinyMCE.execCommand('mceFocus', false, dialogName);
tinyMCE.execCommand('mceRemoveControl', false, dialogName);
}
}
And thet to reuse:
然后重用：
$('#title').html("someModifiedText"); // does not work
I am out of ideas... Thank you very much for your help....
我没有想法......非常感谢你的帮助......
回答by Thariama
Problem here is you won't see anything if you enter text or html into your textarea. Your textarea gets hidden when tinymce gets initialized. What you see then is a content editable iframe, which is used to edit and style content. There are several events which will cause tinymce to write its content to the html source element of the editor (in your case your textarea).
这里的问题是，如果您在 textarea 中输入文本或 html，您将看不到任何内容。当 tinymce 被初始化时，你的 textarea 被隐藏。然后你看到的是一个内容可编辑的 iframe，它用于编辑和设置内容样式。有几个事件会导致 tinymce 将其内容写入编辑器的 html 源元素（在您的情况下是您的 textarea）。
If you want to set the content of the editor (which is visible) you will need to call something like
如果要设置编辑器的内容（可见），则需要调用类似
tinymce.get('title').setContent('<p>This is my new content!</p>');
You may also acces the dom elements directly using the following
您还可以使用以下命令直接访问 dom 元素
tinymce.get('title').getBody().innerHTML = '<p>This is my new content!</p>';
or using jQuery
或使用 jQuery
$(tinymce.get('title').getBody()).html('<p>This is my new content!</p>');
回答by Ryan Monreal
You can use the tinyMCE.activeEditor.setContent('<span>some</span> html');
您可以使用 tinyMCE.activeEditor.setContent('<span>some</span> html');
回答by AtanuCSE
Simply this works for me
只是这对我有用
$("#description").val(content);
回答by Rosidin Bima
<textarea id="content" name="content">{{html_entity_decode($yourstringdata)}}</textarea>
This is work for me, Decode your html data and place it between start and closing textarea tags.
这对我有用，解码您的 html 数据并将其放置在开始和结束 textarea 标签之间。
回答by Jeffrey Davidsz
I had the same problem solved by making sure the setContentwas done after the document is ready, so first;
通过确保setContent在文档准备好后完成，我解决了同样的问题，所以首先；
script(type="text/javascript").
tinymce.init({
selector: '#title',
height: 350,
menubar: false
});
then
然后
script(type='text/javascript').
$(document).ready(function(){
tinymce.get('title').setContent('<span>someText</span> is html');
})
Above is code for pug, but the key is -as mentioned- to load it on document ready.
以上是 pug 的代码，但关键是 - 如前所述 - 在文档准备好时加载它。
回答by user2556716
It works for me. Just place it inside your html code instead of going tinymce
这个对我有用。只需将它放在您的 html 代码中，而不是使用 tinymce
<textarea> html CONTENT</textarea>
