Question2Answer: Różnice pomiędzy wersjami

Z ToProste
Skocz do: nawigacji, wyszukiwania
m
m
Linia 38: Linia 38:
  
  
 +
Dodaliśmy już obsługę kodu do CKEditor. Trzeba jeszcze zrobić coś, aby wyświetlany kod miał pokolorowaną składnię. Do tego wykorzystamy pliku z drugiej paczki '''syntaxhighlighter_3.0.83.zip'''
 +
 +
* W katalogu używanej skórki tworzymy katalogi '''css''' i '''javascript'''.
 +
** zawartość katalogu '''styles''' z paczki kopiujemy do katalogu '''css''',
 +
** zawartość katalogu '''scripts''' z paczki kopiujemy do katalogu '''javascript'''.
 +
* Logujemy się do panelu administratora skryptu, wchodzimy w '''Wygląd''' i w pole '''Własny kod HTML w sekcji <head> każdej strony:''' wklejmy poniższy kod. Wcześniej zamieniając '''%THEME%''' na nazwę katalogu z używaną skórką.
 +
 +
<syntaxhighlight lang="html4strict">
 +
<link rel="stylesheet" href="/qa-theme/%THEME%/css/shCore.css" type="text/css">
 +
<link rel="stylesheet" href="/qa-theme/%THEME%/css/shThemeDefault.css" type="text/css">
 +
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shCore.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shAutoloader.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shLegacy.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAppleScript.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAS3.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushBash.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushColdFusion.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCpp.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCSharp.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCss.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDelphi.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDiff.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushErlang.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushGroovy.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJavaFX.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJava.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJScript.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPerl.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPhp.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPlain.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPowerShell.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPython.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushRuby.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSass.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushScala.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSql.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushVb.js"></script>
 +
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushXml.js"></script>
 +
 +
<script type="text/javascript">
 +
    SyntaxHighlighter.all()
 +
</script>
 +
</syntaxhighlight>
  
Dodaliśmy już obsługę kodu do CKEditor. Trzeba jeszcze zrobić coś, aby wyświetlany kod miał pokolorowaną składnię.
 
  
 
== Zobacz też ==
 
== Zobacz też ==

Wersja z 15:54, 21 maj 2014

Question2Answer to skrypt serwisu pytania i odpowiedzi. Jest on rozpowszechniany ma licencji GPL.


Integracja Question2Answer z SyntaxHiglighter

Jakiś czas temu była dostępna wtyczka kolorująca składnię kodów różnych języków skryptowych i programowania. Ale nie jest ona już rozwijana i nie da się jej zintegrować z nowymi wersjami skryptu.

Rozwiązaniem jest dodanie SyntaxHighlighter do CKEditor, którego używa skrypt.

  • Pobierz paczki dodatków i wypakuj je.
  • Zawartość archiwum ckeditor-syntaxhighlight.zip z katalogu /plugins/syntaxhighlight/ przekopiuj do katalogu /qa-plugin/wysiwyg-editor/plugins/.
    • Otwórz plik /qa-plugin/wysiwyg-editor/config.js, do edycji polecam Notepad++, i dodaj poniższy kod:
 
    config.extraPlugins = 'syntaxhighlight';
    config.toolbar_Full.push(['Code']);


Zawartość pliku po modyfikacji powinna wyglądać mniej więcej tak:
 
    CKEDITOR.editorConfig = function( config )
    {
      // Define changes to default configuration here. For example:
      // config.language = 'fr';
      // config.uiColor = '#AADC6E';
      config.extraPlugins = 'syntaxhighlight';
      config.toolbar_Full.push(['Code']);
    };


    • Otwórz plik /qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php.
      • W funkcji get_field odszukaj wiersz zawierający "['RemoveFormat', 'Maximize']".
      • Zamień go na "['RemoveFormat', 'Maximize', 'Code']" - dodanie przycisku "Code" do paska funkcji w CKEditor.


Dodaliśmy już obsługę kodu do CKEditor. Trzeba jeszcze zrobić coś, aby wyświetlany kod miał pokolorowaną składnię. Do tego wykorzystamy pliku z drugiej paczki syntaxhighlighter_3.0.83.zip

  • W katalogu używanej skórki tworzymy katalogi css i javascript.
    • zawartość katalogu styles z paczki kopiujemy do katalogu css,
    • zawartość katalogu scripts z paczki kopiujemy do katalogu javascript.
  • Logujemy się do panelu administratora skryptu, wchodzimy w Wygląd i w pole Własny kod HTML w sekcji <head> każdej strony: wklejmy poniższy kod. Wcześniej zamieniając %THEME% na nazwę katalogu z używaną skórką.
 
<link rel="stylesheet" href="/qa-theme/%THEME%/css/shCore.css" type="text/css">
<link rel="stylesheet" href="/qa-theme/%THEME%/css/shThemeDefault.css" type="text/css">
 
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shCore.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shAutoloader.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shLegacy.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAppleScript.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushAS3.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushBash.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushColdFusion.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCpp.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCSharp.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushCss.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDelphi.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushDiff.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushErlang.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushGroovy.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJavaFX.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJava.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushJScript.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPerl.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPhp.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPlain.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPowerShell.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushPython.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushRuby.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSass.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushScala.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushSql.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushVb.js"></script>
<script type="text/javascript" src="/qa-theme/%THEME%/javascript/shBrushXml.js"></script>
 
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>


Zobacz też

<htmlet>zobacz-tez</htmlet>

Linki zewnętrznie