如何在 TinyMCE 文本区域中设置初始文本?

Posted

技术标签:

【中文标题】如何在 TinyMCE 文本区域中设置初始文本?【英文标题】:How to set the initial text in a TinyMCE textarea? 【发布时间】:2010-10-04 01:02:52 【问题描述】:

我处于一种奇怪的情况,以前我在实现我所寻找的东西时没有任何问题。以下代码是托管 TinyMCE 富文本框的 html 页面的一部分:

...
<textarea id="editing_field">This text is supposed to appear in the rich textbox</textarea>
...

起初,这按预期工作,创建了一个包含文本的富文本框。不过,在某些时候,TinyMCE 代码决定将 textarea HTML 转换为以下内容:

<textarea id="editing_field" style="display: none;"/>
This text is supposed to appear in the rich textbox

这会渲染文本框下方的文本,这并不完全理想。我不知道是什么导致了这种行为变化,但如果这可能会产生任何影响,我也在使用 jQuery。

我可以通过在页面加载后使用 javascript 将内容加载到文本框中来解决此问题,方法是使用 ajax 或将文本隐藏在 HTML 中并仅移动它。但是,如果可能的话,我想直接从 php 将文本发送到文本框中。任何人都知道这里发生了什么以及如何解决它?

更新 2: 我已经成功地重现了导致行为改变的情况:起初我只是在 textarea 中有纯文本,就像在第一个代码 sn-p 中一样。但是,保存内容后,文本将如下所示:

<p>This text is supposed to appear in the rich textbox</p>

p 标签的存在导致 TinyMCE 触发封闭文本区域到只是单个标签的文本区域之间的转换(如上图所示)。

更新 1: 添加 TinyMCE 配置文件:

tinyMCE.init(
        // General options
        mode : "exact",
        elements : "editing_field",
        theme : "advanced",
        skin : "o2k7",
        skin_variant : "black",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        save_onsavecallback : "saveContent",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull", 
        theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor", 
        theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,fullscreen,code", 
        theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_toolbar_location : "top", 
        theme_advanced_toolbar_align : "left", 
        theme_advanced_statusbar_location : "bottom", 
        theme_advanced_resizing : false,

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : 
            username : "Some User",
            staffid : "991234"
        ,

        width : "450",
        height : "500"
    );

【问题讨论】:

您的 Textarea 是否在
元素内?
【参考方案1】:

如果不调用 tinyMCE 的 JavaScript 函数,可能需要处理浏览器兼容性问题。

如果页面上只有一个 tinymce 框,则可以这样做:

tinyMCE.activeEditor.setContent('<span>some</span>');

您还可以设置格式,例如 BBCode。查看setContent 文档。

我会让你的 PHP 代码将 HTML 回显到一个 JavaScript 函数中,并用 onload 调用它:

function loadTinyMCE($html) 
    echo "
        <script type="text/javascript">function loadDefaultTinyMCEContent()
             tinyMCE.activeEditor.setContent('$html');
        </script>
    ";

然后

<body onload="loadDefaultTinyMCEContent()">

如果您不想使用页面onload 事件,tinymce 有一个名为oninit 的初始化选项,其功能类似。

或者,setupcontent_callback 让您可以直接访问 iframe。

【讨论】:

您有一些优点,但我仍然希望完全避免使用 javascript。我认为唯一可能的方法是,如果有人能弄清楚如何让 TinyMCE 不将两个 textarea 标签合并为一个。 只有在 tinyMce 已经初始化的情况下才有效。但是当您初始化 tinyMce 然后在下一行中设置值时,它将不起作用。因为,它需要一些时间来初始化大约 0.5 秒(可能)的 tinymce。【参考方案2】:

鉴于 &lt;p&gt; 标记的存在会导致转换,我怀疑您的 HTML 最终看起来像:

...
<textarea id="editing_field"><p>This text is supposed to appear in the rich textbox</p></textarea>
...

不幸的是,从技术上讲,&lt;textarea&gt; 标签内不允许使用 HTML 元素,因此可能会将 &lt;p&gt; 标签视为新块元素的开始,从而隐式关闭您的文本区域。要解决此问题,您可以对尖括号进行编码:

...
<textarea id="editing_field">&lt;p&gt;This text is supposed to appear in the rich textbox&lt;/p&gt;</textarea>
...

使用 PHP,这可以通过在将值回显到页面之前通过 htmlspecialchars() 发送您的值来完成。

【讨论】:

【参考方案3】:

第二个例子 是空标签符号。如果您希望文本位于标签内,您需要像第一种方式 foo

什么是输出 textarea 标签?你能调试一下看看它是否在做空标签符号吗?

埃里克

【讨论】:

问题在于 TinyMCE 代码将原始 textarea 修改为单个封闭标记。第一个代码 sn-p 是我编写的代码,第二个 sn-p 是在 TinyMCE 修改后的代码。【参考方案4】:

tinyMCE.activeEditor.setContent('some') 对我有用。干杯

【讨论】:

【参考方案5】:

看来我已经解决了这个问题,除非有任何破坏解决方案的极端情况。在将页面内容保存到数据库之前,我在页面内容上使用了以下 PHP 代码:

$content = str_replace(chr(10), "", $content);
$content = str_replace(chr(13), "", $content);
$content = str_ireplace('<','&#x200B;<',$content);

它的作用是删除所有换行符,然后在任何开始标记之前添加一个零宽度的不可见字符。然后,在 TinyMCE 发挥作用之前,此文本将插入到 textarea 标记之间。我不知道为什么,但这并没有触发问题,并且附加的字符没有显示在最终的 html 或 TinyMCE 的 html 视图中,所以我可以看到这个解决方案的唯一问题是性能下降。一个细节是,似乎只有开始标记需要以这种方式添加,但为了简单起见,我在这里没有考虑到这一点。

【讨论】:

【参考方案6】:

我在使用 React 时遇到了同样的问题,可能与此有关。传递给组件的初始值是原始值。一旦收到,组件将接管并处理内容,无论是否传递了新值。因此,如果您要传递一个字符串,那么它就是一个常量,并且它存在于您的组件的初始渲染中。但是,如果您要传递一个变量,则该变量的初始值可能与您要显示的值不同(例如,在您收到要显示的值之前,它可能为 null 或未定义)。在我的情况下,我收到一个带有页面内容的对象,其中之一是要显示为初始内容的 html。但是 render 方法首先被一个空对象触发,然后是带有数据的实际对象。

【讨论】:

【参考方案7】:

在 tinyMCE.init 中设置 -

init_instance_callback: function (editor) 
                AFunction();
            

function AFunction()
//your code here
tinyMCE.get('youtinytextareaname').setContent("your text here");

【讨论】:

【参考方案8】:

要更改特定的 tinymce 字段,您可以这样做:

tinyMCE.get('editing_field').setContent('your default text');

【讨论】:

在你的情况下,它没有在 setContent 中设置默认文本,我们应该需要 html 类型的文本,例如: tinyMCE.get('editing_field').setContent('

some text here

' );

以上是关于如何在 TinyMCE 文本区域中设置初始文本?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery在文本区域中设置光标位置

在文本区域中设置文本光标位置

使用引导程序在表单组中设置输入/文本区域的宽度

如何在资源管理器的文本区域中设置占位符的样式?

TinyMCE 在动态生成的文本区域上不可点击和编辑

以编程方式将数据加载到 TinyMCE