在TinyMCE初始化后，使用javascript设置textarea值 [英] Set textarea value with javascript after TinyMCE initializing

问题描述

我有一个文本区域，并且正在该文本区域上使用tinyMCE.

I hava an textarea and I am using tinyMCE on that 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.

问题是当我试图在tinyMCE初始化后更改textarea的值时，什么也没发生.

The problem is when I am trying to change the value of the textarea after tinyMCE initializing, then nothing happens.

这里是一个例子.

1. 创建文本区域:

1. Creating the textarea:

<textarea style="width: 95%;" name="title"  id="title"></textarea>

填充文本区域:

Populating the textarea:

$('#title').html("someText");

初始化tinyMCE

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"
    });

我想更改textview的内容(但不起作用)

I would like to change the content of the textview (but it is not working)

我尝试使用与初始化tinyMCE之前相同的方式

I have tryed to use the same as before init the tinyMCE

    $('#title').html("someModifiedText"); // does not work

我也试图删除tinyMCE:

I have also tryed to remove tinyMCE:

    if(tinyMCE.getInstanceById('title'))
    removeTinyMCE("title");

使用

function removeTinyMCE (dialogName) {
    tinyMCE.execCommand('mceFocus', false, dialogName);
    tinyMCE.execCommand('mceRemoveControl', false, dialogName);

}

然后重用:

    $('#title').html("someModifiedText"); // does not work

我没有主意...非常感谢您的帮助....

I am out of ideas... Thank you very much for your help....

推荐答案

问题是，如果您在textarea中输入text或html，您将看不到任何内容. 当tinymce初始化时，您的文本区域将被隐藏.然后，您将看到一个内容可编辑的iframe，该框架用于编辑内容并设置其样式.有几个事件会导致tinymce将其内容写入编辑器的html source元素(在您的情况下为textarea).

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).

如果要设置编辑器的内容(可见)，则需要调用类似的内容

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>');

您还可以使用以下内容直接访问dom元素

You may also acces the dom elements directly using the following

tinymce.get('title').getBody().innerHTML = '<p>This is my new content!</p>';

或使用jQuery

$(tinymce.get('title').getBody()).html('<p>This is my new content!</p>');

这篇关于在TinyMCE初始化后，使用javascript设置textarea值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！