34

我有一个 textarea,我在那个 textarea 上使用 tinyMCE。

我实际上正在做的是,当页面打开时,我正在用一些文本填充文本区域,然后我正在初始化 tinyMCE。

问题是当我尝试在 tinyMCE 初始化后更改 textarea 的值时,什么也没有发生。

这是一个例子。

  1. 创建文本区域:

    <textarea style="width: 95%;" name="title"  id="title"></textarea>
    
  2. 填充文本区域:

    $('#title').html("someText");
    
  3. 初始化 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. 我想更改 textview 的内容(但它不起作用)

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

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

我也尝试删除 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

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

4

7 回答 7

41

这里的问题是,如果您在 textarea 中输入文本或 html,您将看不到任何内容。当 tinymce 初始化时,您的 textarea 会被隐藏。然后您看到的是一个内容可编辑的 iframe,用于编辑和设置内容样式。有几个事件会导致 tinymce 将其内容写入编辑器的 html 源元素(在您的情况下是您的 textarea)。

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

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

您也可以使用以下命令直接访问 dom 元素

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>');
于 2012-08-03T10:00:09.023 回答
13

您可以使用tinyMCE.activeEditor.setContent('<span>some</span> html');

检查这个答案

于 2015-12-02T03:05:55.110 回答
3

这对我有用

$("#description").val(content);
于 2013-09-27T11:54:24.757 回答
0
<textarea id="content" name="content">{{html_entity_decode($yourstringdata)}}</textarea>

这对我有用,解码您的 html 数据并将其放在开始和结束 textarea 标记之间。

于 2019-03-24T16:05:26.047 回答
0

通过确保setContent在文档准备好后完成,我解决了同样的问题,所以首先;

script(type="text/javascript").
  tinymce.init({
    selector: '#title',
    height: 350,
    menubar: false
  });

然后

script(type='text/javascript').
  $(document).ready(function(){
    tinymce.get('title').setContent('<span>someText</span> is html');
  })

上面是哈巴狗的代码,但关键是 - 如前所述 - 将其加载到准备好的文档中。

于 2020-05-04T12:02:53.953 回答
0

一旦调用这个

tinymce.triggerSave();

然后 tinymce 的值将被转移到原始的 textarea 值。因此,您可以从普通的 textarea 获得它。

于 2021-11-08T13:01:11.313 回答
-4

这个对我有用。只需将其放在您的 html 代码中,而不是使用 tinymce

    <textarea> html CONTENT</textarea>
于 2013-07-10T00:57:08.573 回答