Как установить исходный текст в текстовой области TinyMCE?

Я в любопытной ситуации, когда у меня раньше не было проблем с достижением того, что я ищу. Следующий код является частью HTML-страницы, на которой размещается текстовое поле с поддержкой TinyMCE:

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

Сначала это работало по назначению, создавая в нем богатый текстовый ящик с вложенным текстом. Однако в какой-то момент код TinyMCE решил, что HTML-код textarea должен быть преобразован в следующее:

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

Это отображает текст под текстовым полем, который не является идеальным. Я не знаю, что вызвало это изменение поведения, хотя я также использую jQuery вместе с ним, если это может иметь какой-то эффект.

Я могу обойти проблему, загрузив содержимое в текстовое поле с помощью javascript после загрузки страницы, либо используя ajax, либо скрыв текст в HTML и просто переместив его. Тем не менее, я хотел бы выпустить текст в текстовое поле непосредственно из PHP, если это вообще возможно. Кто-нибудь знает, что здесь происходит и как это исправить?

Обновление 2: Я успешно воспроизвел ситуацию, которая вызывает изменение поведения. Сначала у меня был простой текст в текстовом поле, как в первом фрагменте кода. Однако после сохранения содержимого текст будет выглядеть следующим образом:

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

Ответ 1

Похоже, что я решил проблему, если нет каких-либо краевых случаев, которые разрушают решение. Я использую следующий код PHP на странице, прежде чем я сохраню его в базе данных:

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

Что он делает, так это удаление любых новых строк, а затем добавление невидимого символа нулевой ширины перед любым началом. Затем этот текст будет вставлен между тегами textarea, прежде чем TinyMCE сделает свою магию. Я не знаю, почему, но это не вызывает проблему, и добавленные символы не отображаются в финальном html или в html-представлении TinyMCE, поэтому единственными проблемами, которые я вижу с этим решением, является поражение производительности. Деталь заключается в том, что, по-видимому, только стартовые теги должны быть добавлены таким образом, но я не учитывал это здесь для простоты.

Ответ 2

Если вы не вызываете функцию tinyMCE JavaScript, вам, возможно, придется иметь дело с проблемами совместимости браузера.

Если на странице есть только одно поле для тинимы, вы можете просто сделать это:

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 имеет параметр init, называемый oninit, который работает аналогично,

В качестве альтернативы setupcontent_callback дает вам прямой доступ к iframe.

Ответ 3

Учитывая, что наличие тегов <p> вызывает преобразование, я подозреваю, что ваш HTML выглядит следующим образом:

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

К сожалению, элементы HTML не допускаются технически внутри тегов <textarea>, поэтому что-то может рассматривать теги <p> как начало нового элемента блока, неявно закрывая ваше текстовое поле. Чтобы исправить это, вы можете закодировать угловые скобки:

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

Используя PHP, это можно сделать, отправив свое значение через htmlspecialchars(), прежде чем повторять его на странице.

Ответ 4

Второй пример < textarea.../" > - это пустое обозначение тега. Если вы хотите, чтобы текст находился внутри тага, вам нужно сделать это, как первый путь < teatarea.... > foo </textarea>

Что выводит теги textarea? Можете ли вы отладить это, чтобы увидеть, выполняет ли оно пустую нотацию тега?

Эрик

Ответ 5

tinyMCE.activeEditor.setContent('some') работает для me.Cheers

Ответ 6

В последнее время мы используем TinyMCE. Я особенно озадачен изменением атрибута style текстового поля, чтобы скрыть элемент. Очень странно.

Мне любопытно, как выглядит ваш файл конфигурации (некоторая документация по файлам конфигурации по адресу: django)

ОБНОВЛЕНИЕ

wow... вы используете много плагинов tinyMCE. Я попытаюсь продолжить исследование, когда я получу какое-то время, и посмотрю, не могу ли я выяснить некоторых вероятных подозреваемых.

Ответ 7

Чтобы изменить конкретное поле tinymce, вы можете сделать это:

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

Ответ 8

Я пришел к одной и той же проблеме при использовании React, возможно, это связано с этим. Начальное значение, переданное компоненту, является исходным значением. После получения компонента компонент будет обрабатывать и обрабатывать контент независимо от того, передается ли ему новое значение. Поэтому, если вы передаете строку, то она является константой и существует при первоначальном рендеринге вашего компонента. Но если вы передаете переменную, возможно, что начальное значение переменной отличается от значения, которое вы хотите отобразить (например, оно возможно null или undefined, пока вы не получите отображаемое значение). В моем случае я получаю объект с содержимым страницы, одним из которых является html для отображения в качестве исходного содержимого. Но метод рендеринга сначала запускался с пустым объектом, а затем с фактическим объектом с данными.