Как установить начальный текст в TinyMCE textarea?

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

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

сначала это работало по назначению, создавая rich textbox с вложенным текстом в нем. В какой-то момент, однако, код 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: я успешно воспроизвел ситуацию, которая вызывает изменение поведения: сначала у меня был простой текст в текстовом поле, как в первом фрагменте кода. Однако после сохранения содержимого текст будет выглядеть следующим образом:

<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"
    });
10
javascript textarea tinymce

9 ответов

если вы не вызываете функцию 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()">

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

кроме того, setupcontent_callback дает вам прямой доступ к форме.

15

учитывая, что присутствие <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() перед тем, как повторить это на странице.

2

этот второй пример

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

Эрик

1

в TinyMCE.activeEditor.setContent ('some') работает для меня.Ура!--1-->

1

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

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

обновление

вау... вы используете много плагинов tinyMCE. Я попытаюсь исследовать дальше, когда у меня будет время, и посмотреть, не могу ли я выяснить некоторые вероятные полагать.

0

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

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

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

0

чтобы изменить определенное поле tinymce, вы можете сделать следующее:

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

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

0

установить в tinyMCE.init -

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

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