Как я могу реализовать <pre>с tinymce

Question

Рад видеть много постов о tinymce, но здесь нет ничего, что помогло бы мне решить мою текущую проблему.

Я пытаюсь понять, как добавить «код» в мой текст с помощью tinymce.

Something like this

Кто-нибудь знает, как я могу это сделать?

Помощь будет оценена.

Мэнди

Answer 1

Вам нужно будет добавить pre к параметру инициализации tinymce valid_elements

Answer 2

Вам необходимо добавить в редактор плагин Code Sample к своему редактору.

Это пример кода для добавления плагина с сайта TinyMCE.

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "codesample",
  toolbar: "codesample"
});

Плагин для примеров кода использует http://prismjs.com/ для встраивания примеров кода в редакторе и работает из коробки. То есть, когда пользователь копирует правильный синтаксис кода в редактируемую область, код будет автоматически отформатирован в соответствии с правилами CSS Prism по умолчанию.

Вам нужно добавить prism.js и prism.css на свою страницу, чтобы подсветка синтаксиса работала.

Тогда вы получите кнопку примера кода в интерфейсе вашего редактора.

Здесь вы можете найти Документацию о.