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

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

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

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

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

javascript textarea tinymce
person Morten Christiansen    schedule 28.01.2009    source источник
comment
Ваше текстовое поле находится внутри элемента ‹form›?   -  person Adam F    schedule 22.10.2015

Ответы (8)


arrow_upward
17
arrow_downward

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

Если у вас на странице только один блок 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()">

Если вы не хотите использовать событие page onload, у tinymce есть параметр инициализации oninit, который работает аналогично.

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

person gradbot    schedule 28.01.2009
comment
У вас есть несколько хороших моментов, но я все же предпочел бы вообще избегать использования javascript. Я думаю, что единственный способ, который может быть возможен, - это если кто-то сможет выяснить, как заставить TinyMCE не объединять два тега textarea в один. - person Morten Christiansen; 29.01.2009
comment
это работает только в том случае, если tinyMce уже инициализирован. но когда вы инициализируете tinyMce, а затем в следующей строке задаете значение, это не сработает. потому что для запуска тинимса требуется некоторое время около 0,5 секунды (может быть). - person Muaaz Khalid; 07.04.2015

arrow_upward
2
arrow_downward

Учитывая, что наличие тегов <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() перед отображением его на странице.

person eswald    schedule 29.06.2009

arrow_upward
1
arrow_downward

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

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

Эрик

person epascarello    schedule 28.01.2009
comment
Проблема в том, что код TinyMCE изменяет исходное текстовое поле на один закрытый тег. Первый фрагмент кода - это мой код в том виде, в каком я его написал, а второй фрагмент - после того, как TinyMCE изменил его. - person Morten Christiansen; 28.01.2009

arrow_upward
1
arrow_downward

tinyMCE.activeEditor.setContent ('some') у меня работает.

person kta    schedule 22.12.2010

arrow_upward
0
arrow_downward

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

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

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

person Morten Christiansen    schedule 29.01.2009

arrow_upward
0
arrow_downward

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

person Alejandro B.    schedule 16.01.2018

arrow_upward
0
arrow_downward

установлен в tinyMCE.init -

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

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

arrow_upward
-1
arrow_downward

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

tinyMCE.get('editing_field').setContent('your default text');
person Rodrigo Camargo Filho    schedule 07.11.2016
comment
В вашем случае в setContent не установлен текст по умолчанию, нам понадобится текст типа html, например: tinyMCE.get ('edit_field'). SetContent ('‹p› здесь какой-то текст ‹/p›'); - person Umer Zaman; 27.05.2019