Question

我处于一种奇怪的境地，我之前没有遇到任何问题，实现了我正在寻找的东西。以下代码是HTML页面的一部分，用于托管TinyMCE富文本框：

...
<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中只有第一个代码片段中的纯文本。但是，保存内容后，文本将如下所示：

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

p标签的存在会导致TinyMCE触发封闭的textarea与textarea之间的转换，而textarea只是一个标签（如上图所示）。

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

Answer 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的init选项，其功能类似。

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

Answer 2

鉴于<p>标签的存在会导致转换，我怀疑您的HTML最终看起来像：

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

不幸的是，在<textarea>标记内部技术上不允许使用HTML元素，因此可能会将<p>标记视为新块元素的开头，隐式关闭textarea。要解决此问题，您可以对尖括号进行编码：

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

使用PHP，可以通过htmlspecialchars()发送您的值，然后将其回显到页面来完成。

Answer 3

第二个例子＆lt; textarea ... /＆gt;是空标记符号。如果你想让文字在tage中，你需要像第一种方式那样做＆lt; teatarea ....＆gt; foo＆lt; / textarea＆gt;

什么是输出textarea标签？你可以调试它以查看它是否正在执行空标记符号吗？

埃里克

Answer 4

tinyMCE.activeEditor.setContent（'some'）适合我。欢呼

Answer 5

我们最近也在这里使用TinyMCE。我特别困惑的是改变textarea的style属性来隐藏元素。很奇怪。

我很好奇您的配置文件是什么样的（有关配置文件的一些文档：django）

<小时/> UPDATE

哇...你正在使用很多tinyMCE插件。当我有一些时间，我会尝试进一步研究，看看我是否能找出一些可能的嫌疑人。

Answer 6

似乎我已经解决了这个问题，除非有任何边缘情况破坏了解决方案。在将其保存到数据库之前，我在页面内容上使用以下PHP代码：

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

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

Answer 7

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

Answer 8

在tinyMCE.init中设置-

init_instance_callback: function (editor) {
                AFunction();
            }

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

Answer 9

要更改特定的tinymce字段，您可以执行以下操作：

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

如何在TinyMCE textarea中设置初始文本？

9 个答案: