在TinyMCE初始化之后用javascript设置textarea值

时间:2022-11-12 15:35:12

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.

这是一个例子。

  1. Creating the textarea:

    创建textarea:

    <textarea style="width: 95%;" name="title"  id="title"></textarea>
    
  2. Populating the textarea:

    填充textarea:

    $('#title').html("someText");
    
  3. Initializing tinyMCE

    初始化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"
        });
    
  4. I would like to change the content of the textview (but it is not working)

    我想更改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....

我没有想法......非常感谢你的帮助....

4 个解决方案

#1


27  

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 contenteditable 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中输入text或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>');

#2


9  

You can use the tinyMCE.activeEditor.setContent('<span>some</span> html');

您可以使用tinyMCE.activeEditor.setContent(' some html');

Check this Answer

检查此答案

#3


3  

Simply this works for me

这对我有用

$("#description").val(content);

#4


0  

It works for me. Just place it inside your html code instead of going tinymce

这个对我有用。只需将它放在您的HTML代码中,而不是将其放入

    <textarea> html CONTENT</textarea>

#1


27  

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 contenteditable 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中输入text或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>');

#2


9  

You can use the tinyMCE.activeEditor.setContent('<span>some</span> html');

您可以使用tinyMCE.activeEditor.setContent(' some html');

Check this Answer

检查此答案

#3


3  

Simply this works for me

这对我有用

$("#description").val(content);

#4


0  

It works for me. Just place it inside your html code instead of going tinymce

这个对我有用。只需将它放在您的HTML代码中,而不是将其放入

    <textarea> html CONTENT</textarea>