Как выделить образцы кода через AngularJS с помощью Prismjs и TinyMCE

У меня есть плагин tinyMCE в моем угловом приложении, где пользователь может вставить код в базу данных mysql.Как выделить образцы кода через AngularJS с помощью Prismjs и TinyMCE

Я хочу выделить те вставленные коды, извлеченные из моей базы данных.

По этой причине я использовал prismjs, поскольку TinyMCE использует его по default. Я могу настроить и выделить образец кода непосредственно с TinyMCE. Но как только вставляется в базу данных и получить его для отображения образец кода could't выделен хотя я импортировал prism.css и prism.js, а также в моей index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="prism.css" rel="stylesheet" /> 
     //... 
    </head> 
    //... 
    <body> 
     //... 
     <script src="angular_1_6.min.js"></script> 
     <script src="MyCtrl.js"></script> 
     <script src="prism.js"></script> 
    </body> 
</html>

Вот пример в результате строка из моей базы данных:

<pre class="language-markup"><code>&lt;div class="alert alert-danger" id="question-error" role="alert" ng-if="showQuestionError"&gt; 
     &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="showQuestionError=false"&gt; 
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; 
     &lt;/button&gt; 
     &lt;strong&gt;Erreur ! Merci de v&eacute;rifier que le titre de la question : &lt;/strong&gt; 
     &lt;ul &gt; 
      &lt;li&gt;Se termnine par un point d'interrogation (?).&lt;/li&gt; 
      &lt;li&gt;Ne d&eacute;passe pas 150 caract&egrave;res.&lt;/li&gt; 
      &lt;li&gt;Et n'est pas vide.&lt;/li&gt; 
     &lt;/ul&gt; 
    &lt;/div&gt;</code></pre>

PS: SO разбирает его, как правило, тег DIV тег чуть выше обернут:

<pre class="language-markup"></pre>

Пожалуйста, что я могу сделать?

источник

2017-02-05 kabrice

Пожалуйста, добавьте результирующую строку, которую вы извлекаете из БД. – lin

Выполнено, см. Édit please – kabrice

Я верю, что вам нужно вставить данные в виде неэкранированной строки в TinyMCE. Вы пробовали это? – lin

Когда содержимое загружается на «обычной» веб-страницы, Вам необходимо убедиться в двух вещах:

файлы призмы загружаются на странице
Вы говорите Prism для поиска страницы и разметки содержимое, которое является образцом кода.

Первая часть обсуждается здесь:

https://www.tinymce.com/docs/plugins/codesample/#usingprismjsonyourwebpage

В конкретных вам нужно иметь CSS и JS файл на странице:

<link rel="stylesheet" type="text/css" href="prism.css"> 
<script src="prism.js"></script>

Если у вас есть это на до того, как будет загружен HTML-текст, который должен быть все, что вам нужно сделать. Если вы загружаете код динамически вы можете вручную сказать Prism для поиска страницы для кода разметки:

http://prismjs.com/extending.html#api

Команда Prism.highlightAll() покажет Prism искать всю страницу и сделать свою магию на любые образцы кода.

источник

2017-02-07 15:39:43

Удивительно! Он отлично работает супер Thx – kabrice

Как выделить образцы кода через AngularJS с помощью Prismjs и TinyMCE

ответ

Смежные вопросы