TinyMCE Очистка ввода

Я пытаюсь использовать TinyMCE (версия 4.1.2) в качестве редактора WYSIWYG. Вошедшие в систему пользователи могут создавать свои собственные страницы и напрямую видеть, что будет отображаться на странице при посещении посетителем.

Теперь я хотел бы, чтобы html сохранялся напрямую. Например:

Вошедший пользователь видит This is my text!, но на самом деле TinyMCE отображает его как <p>This is my text!</p>. Есть также определенные стили, такие как <h1> и ссылки, которые можно добавить.

Теперь пользователь может вставить гиперссылку, указав ссылку и текст, которые должны отображаться. Однако проблема в том, что если пользователь вручную пишет <a href='example.com'>Example</a>, он отображается в редакторе вот так, но также сохраняется в чистом html, поэтому при отображении это будет просто гиперссылка с текстом Example.

Вот как выглядит мой код (без конфигурации):

tinymce.init({
    setup: function(editor){
        editor.on('change', function(e){
            $('[name="'+editor.id+'"]').next("textarea").html(editor.getContent({format: 'html'}));
        });
    }
});

Таким образом, текст из поля TinyMCE копируется в <textarea>, который находится внутри <form>, который отправляется при сохранении.

Что-то вроде этого:

TinyMCE ввод пользователя

сохраняется как:

<h1>Title</h1>
<p><a href="example.com">example</a></p>
<p><a href="example.com">test</a></p>

Что не оставляет мне возможности отличить настоящие ссылки от чистого текста, поэтому я не могу его обработать после сохранения данных.

Я уже возился с параметрами формата editor.getContent({format: 'html'}), например format: 'raw', но безрезультатно. Что я делаю не так?


javascript html jquery tinymce-4
person jdepypere    schedule 10.09.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Надеюсь, я правильно понимаю ваш вопрос.

Похоже, вы хотите отображать все, что вводит ваш пользователь, ТОЧНО, как они его вводят, без фактической обработки любого HTML, который пользователь написал как HTML. Я прав? Я считаю, что это решает проблему, с которой вы столкнулись:

https://kokoblog.net/php/fix-tinymce-auto-convert-html-code-to-element-tag

Однако, если вас беспокоит только то, как он выглядит там, где он хранится, а не то, как он выглядит, когда он обрабатывается, вам нужно добавить блоки кода в tinyMCE и убедиться, что ваши пользователи понимают, что им нужно выбирать опцию кода всякий раз. они собираются писать необработанный HTML.

    style_formats : [{title : 'Code', inline : 'code'}]

src: Добавить кнопку кода в wordpress tinyMCE

Надеюсь, это поможет! :)

person Ethan    schedule 10.09.2014
comment
Спасибо, но это не совсем то, что я ищу. Код, стилизованный в редакторе, на самом деле, например, <h1>Title</h1>, что хорошо. Однако, когда пользователь вручную пишет <h1>Title</h1>, я хочу отобразить его в таком виде. Таким образом, только то, что пишет пользователь, должно обрабатываться чем-то вроде htmlspecialchars(), чтобы предотвратить случайное закрытие лишних тегов и разрешить только те теги, которые поддерживает редактор. - person jdepypere; 11.09.2014
comment
Хорошо, да, это была моя мысль... В этом случае вам нужно включить формат тега кода, чтобы ваши пользователи использовали его. Поскольку единственное, что делает TinyMCE, — это оборачивает ваш текст в HTML, у него нет никакого способа определить, перепаковывает ли он предварительно отформатированный HTML. Это то же самое, что и большинство других подобных редакторов, на самом деле немногие заставляют отображать html-код, а не анализировать его. - person Ethan; 11.09.2014
comment
Я полагаю, что другим вариантом было бы написать расширение javascript, которое будет искать теги html по мере того, как вы пишете, и, если тег найден, автоматически помещать его в сегмент [code]...[/code]. - person Ethan; 11.09.2014
comment
Хм, я думал, что, поскольку он называется редактором WYSIWYG, он действительно будет WYSIWYG... Другой вариант - использовать BBCodes, поэтому весь отформатированный текст, например, [h1]Title[/h1]. В этом случае я мог бы использовать htmlspecialchars() и парсер BBCode, чтобы правильно отобразить все. - person jdepypere; 11.09.2014
comment
Неважно, я думаю, это приведет к тем же проблемам, но вместо этого с BBCode. - person jdepypere; 11.09.2014
comment
К сожалению, я считаю, что большинство WYSIWYG-редакторов имеют такое же ограничение. Wordpress делает то же самое, и единственная причина, по которой stackoverflow этого не делает, заключается в том, что он был изменен, чтобы распознавать теги и оставлять их в покое. Мне было бы интересно услышать о том, что нативлей действовал иначе. Так что, возможно, кто-то еще ответит с предложением :) Или дайте нам знать, если вы найдете способ удовлетворить свои потребности! - person Ethan; 12.09.2014