Wikizone - Benutzerbeiträge [de]

https://wiki.stephanschlegel.de/api.php?action=feedcontributions&feedformat=atom&user=37.49.33.174 Wikizone - Benutzerbeiträge [de] 2026-05-06T13:57:30Z Benutzerbeiträge MediaWiki 1.35.14 https://wiki.stephanschlegel.de/index.php?title=Processwire_-_Backend_Felder&diff=23276 Processwire - Backend Felder 2018-08-18T14:11:32Z

<p>37.49.33.174: </p> <hr /> <div>Hier geht es um die Konfiguration des Backend Editors. Für technische Infos zu Feldern im allgemeinen siehe <br /> == Typ Textarea ==<br /> === Details ===<br /> '''HTML Entity Encoder''' - sollte gewählt werden wenn das Textfeld nicht auf HTML Markup steht.<br /> '''Input Field Type''' - auf CK Editor <br /> === Input ===<br /> * Visibility<br /> * Rows & Columns Width und Height einstellen<br /> === Access ===<br /> * Userroles die Zugriff haben einstellen<br /> <br /> == CK Editor konfigurieren ==<br /> === HTML mit Klassen etc. erlauben ===<br /> <br /> === Eigene Stile / Klassen ===<br /> https://processwire.com/talk/topic/8342-adding-css-classes-to-ckeditor/<br /> <br /> === Schaltflächen ===<br /> Im Bereich Input<br /> <br /> Standard<br /> <pre><br /> Format, Styles, -, Bold, Italic, -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Beispiel inkl. Absatzausrichtung<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === ProcessWire - Backend anpassen ===<br /> [[ProcessWire - Backend anpassen]]</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Fields&diff=23275 ProcessWire - Fields 2018-08-18T13:06:50Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „http://www.flamingruby.com/blog/anatomy-of-fields-in-processwire/“</p> <hr /> <div>http://www.flamingruby.com/blog/anatomy-of-fields-in-processwire/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Field_Types&diff=23274 ProcessWire - Field Types 2018-08-18T13:04:07Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[ProcessWire - Fields]]<br /> <br /> Hier werden ausgewählte Felder Beschrieben und in kurzen Beispielen erklärt wie man Sie nutzen kann.<br /> == Select Options ==<br /> https://processwire.com/api/modules/select-options-fieldtype/<br /> <br /> Beispiele<br /> // Does field has option selected ?<br /> $page->fieldname->has(#idofselectoption#);<br /> <br /> // filter page objects by option id<br /> $pa = $homepage->and($homepage->children("menus.id=1"));<br /> $pa = $homepage->children("menus.id=1");//only if main menu is checked</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Field_Rendering&diff=23273 ProcessWire - Field Rendering 2018-08-18T13:03:53Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[ProcessWire - Fields]]<br /> <br /> == Field Templates ==<br /> In Processwire kann man (zumindest ab Version 3.x) eine verbesserte render() Funktion nutzen. <br /> Dabei '''sucht ProcessWire automatisch''' in verschiedenen Verzeichnissen nach einem passenden Template File.<br /> <br /> Angenommen man möchte ein Textfeld mit dem Namen "body" im Template basic_page.php rendern.<br /> echo $page->render('body'); // looks for /site/templates/fields/body.php to return markup<br /> Dann sucht PW nach dem passenden Subtemplete im fields Verzeichnis.<br /> <br /> Ab 3.0.7 sucht Processwire außerdem in <br /> /site/templates/fields/body/basic-page.php<br /> /site/templates/fields/basic-page/body.php<br /> /site/templates/fields/body.php (default/fallback) <br /> bis es eine Definition findet. Außderdem kann man jetzt auch auf einfache Art Varianten erzeugen. https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#field-rendering-with-template-files<br /> <br /> == Custom Views ==<br /> https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#field-rendering-with-template-files<br /> <br /> Es gibt viele Möglichkeiten sehr Komplexe Setups mit Varianten aufzusetzen. Der Link oben gibt einen guten Einstieg.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Field_Types&diff=23272 ProcessWire - Field Types 2018-08-18T13:02:17Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[ProcessWire - Fields]]<br /> == Select Options ==<br /> https://processwire.com/api/modules/select-options-fieldtype/<br /> <br /> Beispiele<br /> // Does field has option selected ?<br /> $page->fieldname->has(#idofselectoption#);<br /> <br /> // filter page objects by option id<br /> $pa = $homepage->and($homepage->children("menus.id=1"));<br /> $pa = $homepage->children("menus.id=1");//only if main menu is checked</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Wartung&diff=23271 ProcessWire - Wartung 2018-08-18T11:01:28Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „Tools Original Bilder Resizen Wenn der Kunde zu große Bilder hochgeladen hat und diese nicht Resized werden.“</p> <hr /> <div>Tools<br /> Original Bilder Resizen<br /> <br /> Wenn der Kunde zu große Bilder hochgeladen hat und diese nicht Resized werden.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Cache&diff=23270 ProcessWire - Cache 2018-08-18T10:59:13Z

<p>37.49.33.174: </p> <hr /> <div>== Page Cache ==<br /> /site/assets/cache/Page<br /> == Template Cache ==<br /> <br /> == Cache Tables ==<br /> Kann gelöscht werden (evtl. Backup machen) Danach evtl. nach neuen Modulen suchen (Forum)<br /> * Information about FileCompiler (which files it compiled and when), <br /> * module infos, <br /> * caches saved using $cache variable etc. <br /> When you refresh, you may experience a bit of delay before all caches (accessed during current request) are generated again.<br /> <br /> == Clear ProcessWire Cache ==<br /> /site/assets/cache/Page<br /> <br /> Template cache you would go to the PageRender module settings and delete cache.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Backend_anpassen&diff=23269 ProcessWire - Backend anpassen 2018-08-18T09:48:03Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „== Templates für Backend Files == https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#field-rendering-wit…“</p> <hr /> <div>== Templates für Backend Files ==<br /> https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#field-rendering-with-template-files</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Processwire_-_Backend_Felder&diff=23268 Processwire - Backend Felder 2018-08-18T09:45:50Z

<p>37.49.33.174: </p> <hr /> <div>== Typ Textarea ==<br /> === Details ===<br /> '''HTML Entity Encoder''' - sollte gewählt werden wenn das Textfeld nicht auf HTML Markup steht.<br /> '''Input Field Type''' - auf CK Editor <br /> === Input ===<br /> * Visibility<br /> * Rows & Columns Width und Height einstellen<br /> === Access ===<br /> * Userroles die Zugriff haben einstellen<br /> <br /> == CK Editor konfigurieren ==<br /> === HTML mit Klassen etc. erlauben ===<br /> <br /> === Eigene Stile / Klassen ===<br /> https://processwire.com/talk/topic/8342-adding-css-classes-to-ckeditor/<br /> <br /> === Schaltflächen ===<br /> Im Bereich Input<br /> <br /> Standard<br /> <pre><br /> Format, Styles, -, Bold, Italic, -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Beispiel inkl. Absatzausrichtung<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === ProcessWire - Backend anpassen ===<br /> [[ProcessWire - Backend anpassen]]</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Siehe_CSS_-_Flexbox&diff=23267 Siehe CSS - Flexbox 2018-08-16T21:32:03Z

<p>37.49.33.174: Der Seiteninhalt wurde durch einen anderen Text ersetzt: „Siehe CSS - Flexbox“</p> <hr /> <div>Siehe [[CSS - Flexbox]]</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=CSS_-_Flexbox&diff=23266 CSS - Flexbox 2018-08-16T21:31:48Z

<p>37.49.33.174: </p> <hr /> <div>https://css-tricks.com/snippets/css/a-guide-to-flexbox/<br /> <br /> == Links ==<br /> https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676<br /> https://www.w3schools.com/css/css3_flexbox.asp<br /> <br /> == Einleitung ==<br /> Before the Flexbox Layout module, there were four layout modes:<br /> <br /> <pre><br /> Block, for sections in a webpage<br /> Inline, for text<br /> Table, for two-dimensional table data<br /> Positioned, for explicit position of an element<br /> </pre><br /> The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.<br /> == Properties ==<br /> <pre><br /> flex-direction<br /> flex-wrap<br /> flex-flow<br /> justify-content<br /> align-items<br /> align-content<br /> </pre><br /> <br /> The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.<br /> column<br /> row<br /> column-reverse<br /> row-reverse<br /> <br /> The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.<br /> wrap<br /> nowrap<br /> wrap-reverse<br /> <br /> The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.<br /> row wrap<br /> ...<br /> <br /> The '''justify-content''' property is used to '''align''' the flex items:<br /> center<br /> flex-start<br /> flex-end<br /> space-around<br /> space-between<br /> <br /> The '''align-items''' property is used to '''align''' the flex items '''vertically'''<br /> center<br /> flex-start<br /> flex-end<br /> stretch<br /> baseline<br /> <br /> The '''align-content''' property is used to '''align the flex lines'''.<br /> space-between<br /> space-around<br /> stretch<br /> center<br /> flex-start<br /> flex-end<br /> <br /> '''Child Elements (Items)'''<br /> <br /> The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.<br /> <br /> The '''order property''' specifies the order of the flex items.<br /> <pre><br /> <div class="flex-container"><br /> <div style="order: 3">1</div><br /> <div style="order: 2">2</div><br /> <div style="order: 4">3</div> <br /> <div style="order: 1">4</div><br /> </div><br /> </pre><br /> <br /> The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.<br /> <br /> Make the third flex item grow eight times faster than the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div style="flex-grow: 1">1</div><br /> <div style="flex-grow: 1">2</div><br /> <div style="flex-grow: 8">3</div> <br /> </div><br /> </pre><br /> <br /> The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.<br /> Do not let the third flex item shrink as much as the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div>1</div><br /> <div>2</div><br /> <div style="flex-shrink: 0">3</div><br /> <div>4</div><br /> </pre><br /> <br /> The '''flex-basis''' property specifies the '''initial length''' of a flex item.<br /> <div style="flex-basis: 200px">3</div><br /> <br /> The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties<br /> <div style="flex: 0 0 200px">3</div><br /> <br /> The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.<br /> <br /> The align-self property overrides the default alignment set by the container's align-items property.<br /> <br /> == Beispiele ==<br /> === Fotogrid ===<br /> <syntaxhighlight lang="html5"><br /> <!DOCTYPE html><br /> <html><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> body {<br /> margin: 0;<br /> font-family: Arial;<br /> }<br /> <br /> .header {<br /> text-align: center;<br /> padding: 32px;<br /> }<br /> <br /> .row {<br /> display: flex;<br /> flex-wrap: wrap;<br /> padding: 0 4px;<br /> }<br /> <br /> /* Create four equal columns that sits next to each other */<br /> .column {<br /> flex: 25%;<br /> max-width: 25%;<br /> padding: 0 4px;<br /> }<br /> <br /> .column img {<br /> margin-top: 8px;<br /> vertical-align: middle;<br /> }<br /> <br /> /* Responsive layout - makes a two column-layout instead of four columns */<br /> @media (max-width: 800px) {<br /> .column {<br /> flex: 50%;<br /> max-width: 50%;<br /> }<br /> }<br /> <br /> /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */<br /> @media (max-width: 600px) {<br /> .column {<br /> flex: 100%;<br /> max-width: 100%;<br /> }<br /> }<br /> </style><br /> <body><br /> <br /> <br /> <div class="header"><br /> <h1>Responsive Image Grid</h1><br /> <p>Resize the browser window to see the responsive effect.</p><br /> </div><br /> <br /> <br /> <div class="row"> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight><br /> <br /> === Homepage Layout ===<br /> <syntaxhighlight lang="html5"><br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <title>Page Title</title><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* Style the body */<br /> body {<br /> font-family: Arial;<br /> margin: 0;<br /> }<br /> <br /> /* Header/logo Title */<br /> .header {<br /> padding: 60px;<br /> text-align: center;<br /> background: #1abc9c;<br /> color: white;<br /> }<br /> <br /> /* Style the top navigation bar */<br /> .navbar {<br /> display: flex;<br /> background-color: #333;<br /> }<br /> <br /> /* Style the navigation bar links */<br /> .navbar a {<br /> color: white;<br /> padding: 14px 20px;<br /> text-decoration: none;<br /> text-align: center;<br /> }<br /> <br /> /* Change color on hover */<br /> .navbar a:hover {<br /> background-color: #ddd;<br /> color: black;<br /> }<br /> <br /> /* Column container */<br /> .row { <br /> display: flex;<br /> flex-wrap: wrap;<br /> }<br /> <br /> /* Create two unequal columns that sits next to each other */<br /> /* Sidebar/left column */<br /> .side {<br /> flex: 30%;<br /> background-color: #f1f1f1;<br /> padding: 20px;<br /> }<br /> <br /> /* Main column */<br /> .main {<br /> flex: 70%;<br /> background-color: white;<br /> padding: 20px;<br /> }<br /> <br /> /* Fake image, just for this example */<br /> .fakeimg {<br /> background-color: #aaa;<br /> width: 100%;<br /> padding: 20px;<br /> }<br /> <br /> /* Footer */<br /> .footer {<br /> padding: 20px;<br /> text-align: center;<br /> background: #ddd;<br /> }<br /> <br /> /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */<br /> @media screen and (max-width: 700px) {<br /> .row, .navbar { <br /> flex-direction: column;<br /> }<br /> }<br /> </style><br /> </head><br /> <body><br /> <br /> <br /> <div style="background:yellow;padding:5px"><br /> <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4><br /> </div><br /> <br /> <br /> <div class="header"><br /> <h1>My Website</h1><br /> <p>With a <b>flexible</b> layout.</p><br /> </div><br /> <br /> <br /> <div class="navbar"><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> </div><br /> <br /> <br /> <div class="row"><br /> <div class="side"><br /> <h2>About Me</h2><br /> <h5>Photo of me:</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text about me in culpa qui officia deserunt mollit anim..</p><br /> <h3>More Text</h3><br /> <p>Lorem ipsum dolor sit ame.</p><br /> <div class="fakeimg" style="height:60px;">Image</div><br><br /> <div class="fakeimg" style="height:60px;">Image</div><br><br /> <div class="fakeimg" style="height:60px;">Image</div><br /> </div><br /> <div class="main"><br /> <h2>TITLE HEADING</h2><br /> <h5>Title description, Dec 7, 2017</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text..</p><br /> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p><br /> <br><br /> <h2>TITLE HEADING</h2><br /> <h5>Title description, Sep 2, 2017</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text..</p><br /> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p><br /> </div><br /> </div><br /> <br /> <br /> <div class="footer"><br /> <h2>Footer</h2><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Siehe_CSS_-_Flexbox&diff=23265 Siehe CSS - Flexbox 2018-08-16T21:31:30Z

<p>37.49.33.174: </p> <hr /> <div>Siehe [[CSS - Flexbox]]<br /> == Links ==<br /> https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676<br /> https://www.w3schools.com/css/css3_flexbox.asp<br /> <br /> == Einleitung ==<br /> Before the Flexbox Layout module, there were four layout modes:<br /> <br /> <pre><br /> Block, for sections in a webpage<br /> Inline, for text<br /> Table, for two-dimensional table data<br /> Positioned, for explicit position of an element<br /> </pre><br /> The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.<br /> == Properties ==<br /> <pre><br /> flex-direction<br /> flex-wrap<br /> flex-flow<br /> justify-content<br /> align-items<br /> align-content<br /> </pre><br /> <br /> The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.<br /> column<br /> row<br /> column-reverse<br /> row-reverse<br /> <br /> The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.<br /> wrap<br /> nowrap<br /> wrap-reverse<br /> <br /> The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.<br /> row wrap<br /> ...<br /> <br /> The '''justify-content''' property is used to '''align''' the flex items:<br /> center<br /> flex-start<br /> flex-end<br /> space-around<br /> space-between<br /> <br /> The '''align-items''' property is used to '''align''' the flex items '''vertically'''<br /> center<br /> flex-start<br /> flex-end<br /> stretch<br /> baseline<br /> <br /> The '''align-content''' property is used to '''align the flex lines'''.<br /> space-between<br /> space-around<br /> stretch<br /> center<br /> flex-start<br /> flex-end<br /> <br /> '''Child Elements (Items)'''<br /> <br /> The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.<br /> <br /> The '''order property''' specifies the order of the flex items.<br /> <pre><br /> <div class="flex-container"><br /> <div style="order: 3">1</div><br /> <div style="order: 2">2</div><br /> <div style="order: 4">3</div> <br /> <div style="order: 1">4</div><br /> </div><br /> </pre><br /> <br /> The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.<br /> <br /> Make the third flex item grow eight times faster than the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div style="flex-grow: 1">1</div><br /> <div style="flex-grow: 1">2</div><br /> <div style="flex-grow: 8">3</div> <br /> </div><br /> </pre><br /> <br /> The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.<br /> Do not let the third flex item shrink as much as the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div>1</div><br /> <div>2</div><br /> <div style="flex-shrink: 0">3</div><br /> <div>4</div><br /> </pre><br /> <br /> The '''flex-basis''' property specifies the '''initial length''' of a flex item.<br /> <div style="flex-basis: 200px">3</div><br /> <br /> The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties<br /> <div style="flex: 0 0 200px">3</div><br /> <br /> The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.<br /> <br /> The align-self property overrides the default alignment set by the container's align-items property.<br /> <br /> == Beispiele ==<br /> === Fotogrid ===<br /> <syntaxhighlight lang="html5"><br /> <!DOCTYPE html><br /> <html><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> body {<br /> margin: 0;<br /> font-family: Arial;<br /> }<br /> <br /> .header {<br /> text-align: center;<br /> padding: 32px;<br /> }<br /> <br /> .row {<br /> display: flex;<br /> flex-wrap: wrap;<br /> padding: 0 4px;<br /> }<br /> <br /> /* Create four equal columns that sits next to each other */<br /> .column {<br /> flex: 25%;<br /> max-width: 25%;<br /> padding: 0 4px;<br /> }<br /> <br /> .column img {<br /> margin-top: 8px;<br /> vertical-align: middle;<br /> }<br /> <br /> /* Responsive layout - makes a two column-layout instead of four columns */<br /> @media (max-width: 800px) {<br /> .column {<br /> flex: 50%;<br /> max-width: 50%;<br /> }<br /> }<br /> <br /> /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */<br /> @media (max-width: 600px) {<br /> .column {<br /> flex: 100%;<br /> max-width: 100%;<br /> }<br /> }<br /> </style><br /> <body><br /> <br /> <br /> <div class="header"><br /> <h1>Responsive Image Grid</h1><br /> <p>Resize the browser window to see the responsive effect.</p><br /> </div><br /> <br /> <br /> <div class="row"> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight><br /> <br /> === Homepage Layout ===<br /> <syntaxhighlight lang="html5"><br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <title>Page Title</title><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* Style the body */<br /> body {<br /> font-family: Arial;<br /> margin: 0;<br /> }<br /> <br /> /* Header/logo Title */<br /> .header {<br /> padding: 60px;<br /> text-align: center;<br /> background: #1abc9c;<br /> color: white;<br /> }<br /> <br /> /* Style the top navigation bar */<br /> .navbar {<br /> display: flex;<br /> background-color: #333;<br /> }<br /> <br /> /* Style the navigation bar links */<br /> .navbar a {<br /> color: white;<br /> padding: 14px 20px;<br /> text-decoration: none;<br /> text-align: center;<br /> }<br /> <br /> /* Change color on hover */<br /> .navbar a:hover {<br /> background-color: #ddd;<br /> color: black;<br /> }<br /> <br /> /* Column container */<br /> .row { <br /> display: flex;<br /> flex-wrap: wrap;<br /> }<br /> <br /> /* Create two unequal columns that sits next to each other */<br /> /* Sidebar/left column */<br /> .side {<br /> flex: 30%;<br /> background-color: #f1f1f1;<br /> padding: 20px;<br /> }<br /> <br /> /* Main column */<br /> .main {<br /> flex: 70%;<br /> background-color: white;<br /> padding: 20px;<br /> }<br /> <br /> /* Fake image, just for this example */<br /> .fakeimg {<br /> background-color: #aaa;<br /> width: 100%;<br /> padding: 20px;<br /> }<br /> <br /> /* Footer */<br /> .footer {<br /> padding: 20px;<br /> text-align: center;<br /> background: #ddd;<br /> }<br /> <br /> /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */<br /> @media screen and (max-width: 700px) {<br /> .row, .navbar { <br /> flex-direction: column;<br /> }<br /> }<br /> </style><br /> </head><br /> <body><br /> <br /> <br /> <div style="background:yellow;padding:5px"><br /> <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4><br /> </div><br /> <br /> <br /> <div class="header"><br /> <h1>My Website</h1><br /> <p>With a <b>flexible</b> layout.</p><br /> </div><br /> <br /> <br /> <div class="navbar"><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> </div><br /> <br /> <br /> <div class="row"><br /> <div class="side"><br /> <h2>About Me</h2><br /> <h5>Photo of me:</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text about me in culpa qui officia deserunt mollit anim..</p><br /> <h3>More Text</h3><br /> <p>Lorem ipsum dolor sit ame.</p><br /> <div class="fakeimg" style="height:60px;">Image</div><br><br /> <div class="fakeimg" style="height:60px;">Image</div><br><br /> <div class="fakeimg" style="height:60px;">Image</div><br /> </div><br /> <div class="main"><br /> <h2>TITLE HEADING</h2><br /> <h5>Title description, Dec 7, 2017</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text..</p><br /> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p><br /> <br><br /> <h2>TITLE HEADING</h2><br /> <h5>Title description, Sep 2, 2017</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text..</p><br /> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p><br /> </div><br /> </div><br /> <br /> <br /> <div class="footer"><br /> <h2>Footer</h2><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=SPF_(Sender_Policy_Framework)&diff=23264 SPF (Sender Policy Framework) 2018-08-15T11:52:49Z

<p>37.49.33.174: /* Links */</p> <hr /> <div>SPF wird von vielen IT-lern als in der Praxis unwirksam angesehen. Wenn man Weiterleitungen über Newsletterdienstleister oder auch manuelle in der Praxis einbezieht, kann man praktisch nicht mehr hart blockieren (-all). Es kann allerdings als Beweis dafür gelten, das die Mail original ist, wenn sie tatsächlich über den Original-Server versendet wurde. Das ist aber nur dann sinnvoll, wenn dem Empfänger der Absender bekannt ist. Als reiner Schutz gegen Spam funktioniert das nicht, da auch ein Spammer sich eine Domain mit SPF Eintrag billig und Anonym zulegen kann.<br /> <br /> Alternative [[DKIM]]<br /> <br /> Siehe auch<br /> == Links ==<br /> https://all-inkl.com/wichtig/anleitungen/kas/tools/dns-werkzeuge/spf_482.html<br /> https://www.youtube.com/watch?v=T1d7wTgBi28<br /> https://switchie.ch/was-bedeutet-spf-sender-policy-framework/# (Quelle dieses Artikels / Zugriff: 2018-01)<br /> <br /> == Beispiel erklärt ==<br /> === Problem ===<br /> Absender können gefälscht werden. Es darf jeder alles verschicken.<br /> === Lösung ???===<br /> TXT (SPF) DNS Eintrag gibt vor wer versenden darf.<br /> heinlein-support.de. IN TXT "v=spf1 ip4:213.203.238.0/25 ip4:195.10.208.0/24 mx include:jpberlin.de ?all"<br /> Hier wird quasi hinterlegt wer versenden darf<br /> v=spf1 -> Version (SPF-Record Version 1)<br /> ip4:xxx:xxx:xxx:xxx/xx -> IP Bereich<br /> include:... -> Ein SPF-Reord einer anderen Domain wird included<br /> mx -> Server die auch als MX-Recrds definiert sind dürfen verschicken<br /> ?all -> Keine Aussage was andere Server dürfen (-all = kein anderer Server darf versenden, +all = alle anderen dürfen sind dann halt nicht verifiziert)<br /> <br /> == Hinweise ==<br /> * Die Einstellung TXT statt SPF ist wichtig, da TXT seit rfc7208 der einzig standardkonforme Record für SPF ist! Der dedizierte SPF-Record ist damit obsolet und wird daher nicht breitflächig unterstützt. <br /> <br /> == Übersicht von switcher.ch ==<br /> SPF (Sender Policy Framework) ist ein Protokoll, mit dem ein Halter einer DOMAIN festlegen kann, welche IP-Adressen E-Mails im Namen seiner DOMAINs verschicken dürfen und steht für „Sender Policy Framework“. Wenn jemand also eine E-Mail erhält, die behauptet von der DOMAIN ihr-unternehmen.ch versendet worden zu sein, so kann man mittels SPF prüfen, ob dies wirklich der Fall ist. Wenn die entsprechende IP-Adresse nicht durch den SPF-Eintrag autorisiert wurde, so ist die Wahrscheinlichkeit sehr gross, dass die versendete E-Mail ohne Zustimmung des Halter der DOMAIN verschickt wurde. Die Deutung dieser Information liegt letztlich immer im Verantwortungsbereich des Empfängers, ein fehlgeschlagener SPF-Test ist jedoch definitiv ein sehr deutliches Indiz für Spam.<br /> <br /> == So funktioniert es ==<br /> <br /> <br /> Die Funktionalität von SPF setzt zwei Bedingungen voraus:<br /> <br /> Jeder Halter des DOMAINs sollte einen korrekten SPF-Eintrag für seine DOMAIN haben, um eine möglichst grosse Flächenabdeckung von SPF gewährleisten zu können.<br /> Mailserver müssen die SPF-Prüfung durchführen.<br /> <br /> Die Erstellung eines SPF-Eintrages für die DOMAIN kann problemlos über das Benutzerkonto vorgenommen werden. Der zweite Teil ist jedoch der kompliziertere Teil. Es gibt zwar immer mehr Mailserverbetreiber, die anfangen, SPF-Einträge zu prüfen, von einer flächendeckenden Installation kann jedoch momentan noch bei weitem keine Rede sein.<br /> <br /> Trotz allem ist es sehr empfehlenswert, einen SPF-Eintrag für jede DOMAIN zu hinterlegen. Die Verbreitung von SPF nimmt stetig zu. Je mehr DOMAINs SPF-Einträge haben, umso schneller werden auch die Mailserver beginnen, diese Einträge auszuwerten!<br /> <br /> Unter den folgenden Links können Sie weitere Informationen zum Thema SPF in Erfahrung bringen:<br /> <br /> http://www.openspf.org<br /> http://www.baschny.de/spf/<br /> <br /> === Kann SPF Spam verhindern ? ===<br /> <br /> Auch SPF ist leider kein Allheilmittel gegen Spam. Indirekt kann SPF jedoch sehr viel hierzu beitragen. E-Mails werden mittels „Simple Mail Transfer Protocol“ (SMTP) versendet. Bei diesem Protokoll handelt es sich um einen mehr als 20 Jahre alten Standard, der aus einer Zeit stammt, in der es noch keinen Spam gab und man sich „gegenseitig vertrauen“ konnte. Deshalb verfügt das SMTP-Protokoll auch über kein Verfahren, E-Mails versendende Rechner entsprechend zu authentifizieren.<br /> <br /> Genau an dieser Stelle setzt „SPF“ an: Bei Definition eines SPF-Eintrages für eine DOMAIN kann einwandfrei festgestellt werden, ob ein Rechner, von dem eine E-Mail versendet wurde, auch tatsächlich für die entsprechende DOMAIN autorisiert ist.<br /> <br /> Dies heisst also, dass der SPF-Eintrag für Ihre DOMAIN keine Wirkung hat auf E-Mails die Sie empfangen. Der SPF-Eintrag ist für E-Mails, die Sie versenden. Wenn ein Empfänger eine E-Mail von Ihnen erhält und Ihre DOMAIN einen SPF-Eintrag besitzt, so kann der Empfänger dieser E-Mail prüfen, ob die E-Mail tatsächlich von Ihnen versendet wurde.<br /> Kann ich überprüfen, ob mein SPF-Eintrag funktioniert ?<br /> <br /> Ja, das ist möglich. Hier können Sie die Funktionalität des SPF-Eintrags überprüfen.<br /> Wie lautet der SPF-Eintrag, wenn ich MAIL von switchplus nutze ?<br /> <br /> Der SPF-Eintrag für das Versenden über die switchplus E-Mailkonten lautet:<br /> <br /> v=spf1 a mx include:spf.switchplus-mail.ch ~all<br /> <br /> Bitte kopieren Sie diesen mit genau dieser Syntax in die Eingabemaske und speichern Sie die Änderung.<br /> <br /> Im unserem GUI können Sie „nur“ einen SPF-Record eintragen (es kann also kein zweiter SPF-Record erstellt werden). Sollten zwei Einträge gesetzt werden müssen, können Sie den SPF-Eintrag wie nachfolgendes Beispiel zeigt ergänzen (hier wird z.B. eine zusätzliche IP-Adresse hinzugefügt):<br /> v=spf1 a mx include:spf.switchplus-mail.ch ip4:xxx.xxx.xxx.xxx ~all<br /> <br /> === Wie erstelle ich einen SPF-Eintrag für eine DOMAIN ? ===<br /> <br /> Um für eine bestimmte DOMAIN einen SPF-Eintrag zu erstellen, gehen Sie bitte wie folgt vor:<br /> <br /> Loggen Sie sich auf www.switchplus.ch in Ihr Benutzerkonto ein, klicken Sie links in der Navigationsleiste auf „Grundkonfiguration“. Gehen Sie anschliessend rechts am Zeilenende der jeweiligen DOMAIN auf das Editierungssymbol und wählen Sie „Nameserver editieren“. In der Folge-Maske finden Sie alle Records. Klicken Sie nun unten links auf „Eintrag hinzufügen“ und wählen Sie nun beim neu erschienenem Eintrag den Typ „SPF“. Klicken Sie danach auf das nun erschienene Auflistungs-Symbol rechts.<br /> <br /> Folgende Konfigurationsmöglichkeiten stehen über die Eingabemaske (Auflistungs-Symbol) zur Verfügung:<br /> <br /> 1. Meine Webseiten verschicken E-Mails, z.B. über Formmailskripte oder als Teil der installierten Programme wie Forum, Shoplösung etc.<br /> Geben Sie hier bitte an, ob E-Mails von Ihrer DOMAIN auch über Formmailer, Shopsoftware o.ä. Anwendungen verschickt werden. So können Sie bestimmen, ob die IP-Adresse des Webservers in den SPF-Eintrag aufgenommen werden soll.<br /> <br /> 2. Wenn ich E-Mails verschicke, verwende ich die SMTP-Server von switchplus<br /> Definieren Sie hier, ob Sie beim Versand von E-Mails die Mailserver von switchplus verwenden. Sofern Sie keinen eigenen Mailserver in Ihrem Hause betreiben, ist hier standardmässig die Einstellung „JA“ vorzunehmen.<br /> <br /> 2a. Wenn Sie Frage 2 mit „Nein“ beantwortet haben:<br /> Die folgende IP-Adresse versendet E-Mails für meine DOMAIN:<br /> Bitte so eingeben: 123.46.78.0 oder 123.43.12.0/24<br /> Sofern Sie für den Versand von E-Mails nicht die Mailserver von switchplus verwenden und bei der vorhergehenden Option „NEIN“ gewählt haben, so können Sie hier die IP-Adressen angeben, über welche Ihre E-Mails versendet werden.<br /> <br /> 3. Von anderen IP-Adressen werden niemals E-Mails für meine DOMAIN verschickt.<br /> Hier können Sie bestimmen, ob neben den über die obigen Konfigurationsmöglichkeiten angegebenen Mailservern noch weitere Mailserver für den Versand Ihrer E-Mails zuständig sind.<br /> <br /> Klicken Sie auf „speichern“, um den SPF-Eintrag für Ihre DOMAIN einzutragen und zu aktivieren.<br /> <br /> ===Wie kann ein bestehender SPF-Eintrag geändert werden ? ===<br /> <br /> Loggen Sie sich auf www.switchplus.ch in Ihr Benutzerkonto ein und klicken Sie links in der Navigationsleiste auf „Grundkonfiguration“. Gehen Sie anschliessend rechts am Zeilenende der jeweiligen DOMAIN auf das Editierungssymbol und wählen Sie „Nameserver editieren“. In der Folge-Maske finden Sie alle Records. Beim bestehenden SPF-Record können Sie nun die gewünschten Einstellungen vornehmen in dem Sie auf das Auflistungs-Symbol klicken.<br /> Der SPF-Assistent erzeugt einen korrekten SPF-Eintrag, den Sie nach Belieben ändern können. Sie sollten dies jedoch nur dann machen, wenn Sie SPF und seine Parameter wirklich kennen. Der SPF-Eintrag wird aber immer auf Korrektheit überprüft. Sollten Sie daher Fehler bei der individuellen Eingabe machen, werden Sie über die Fehler informiert und der Eintrag wird nicht aktiviert.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=SASS&diff=23263 SASS 2018-08-15T11:48:33Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[SCSS]]<br /> [[LESS]]<br /> [[SASS vs SCSS vs LESS vs ?]]<br /> https://gist.github.com/chriseppstein/674726 (Super Übersicht über LESS / SCSS Syntax)<br /> == Links ==<br /> * Sass Dokumentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html<br /> * Sass on the fly https://www.sassmeister.com/<br /> * https://scotch.io/tutorials/getting-started-with-sass (Syntax Tutorial)<br /> * https://medium.com/@jstubblefield7939/getting-started-with-sass-scss-and-nodejs-6f7b4589aaf2 (Basis Kompilieren mit node-js)<br /> * [[Sass mit node-sass (Node.js)]] RECOMMENDED<br /> * https://github.com/scout-app/scout-app oder http://scout-app.io/<br /> * http://noeticforce.com/best-sass-tools-for-modern-web-design<br /> Zu Compass<br /> * http://compass-style.org/install/<br /> Scout-App<br /> * http://Scout-App.io<br /> * https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/ '''(auch eine gute Sass Einführung)'''<br /> <br /> == Übersicht ==<br /> Die Grundidee hinter der Entwicklung von Sass war es, die Arbeit mit CSS einfacher zu machen, aber gleichzeitig auch den Funktionsumfang zu erhöhen. Daher wurden in Sass '''Klammern sowie Semikolons entfernt'''. Kurze Zeit später entstand die '''SCSS Variante''' die '''Klammern''' wieder einführt und auch '''normales CSS''' erlaubt. <br /> <br /> Wie alle CSS Präprozessoren erweitert SASS den Funktionsumfang um Variablen, Mixins, Farb und Zahlenberechnungen und Vererbung von Eigenschaften.<br /> <br /> <br /> <br /> Es gibt gute '''Erweiterungen''' die z.B. '''Mixins''' (s.u.) liefern oder zusätzliche Funktionalität. <br /> <br /> Früher lief es nur unter Ruby unter der Konsole. Heute gibt es z.B. libsass eine C Bibliothek auf die diverse '''Sass Tools''' zurückgreifen. Compass 2.0 soll z.B. auch auf libsass zurückgreifen. Auch NodeJS bringt eine eigene Umsetzung. Auch '''Tools mit grafischer Oberfläche''' gibt es mitlerweile. Z.B. Scout-App.<br /> <br /> === Was bringt es ===<br /> '''Vorteile''':<br /> * Wartbarer Code<br /> * Wiederverwenden von Code<br /> * Übersicht<br /> * Gute Erweiterungen z.B. mit Compass<br /> '''Nachteile''':<br /> * Man wird faul und achtet nicht mehr auf schönen CSS Code<br /> * Abhängigkeit der Webprojekte von weiteren Tools. Z.B. aufpassen bei Änderungen auf dem Server die dann wieder überschrieben werden. Tipp - eine Datei zum Überschreiben die nicht von Sass generiert wird. z.B. custom.css<br /> * Man geht vor allem beim Old-School Ansatz mit Ruby viele Abhängigkeiten ein (rvm, evtl. homebrew, ...) Das kann extrem Zeit kosten bis alles läuft.<br /> <br /> * Schneller Start mit der '''Scout App''' (Sass und Compass und alle Abhängigen Libs) Hier wird keine weitere Installation benötigt. In der neuen Version (2016) Läuft es ohne Ruby dafür mit NW.js, Node. Aber oft ist es besser die Sache von der Pike anzugehen.<br /> * Ruby wird für SASS benötigt (Test in der Konsole mit ruby -v)<br /> ** Ausnahme: Manche Sass Tools bringen Ruby bereits mit. Z.B. '''Scout welches Compass und Ruby''' mitbringt.<br /> <br /> == Quickstart ==<br /> === Ohne Konsole ===<br /> https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/<br /> <br /> Scout App<br /> <br /> Hier ist die Frage wie man Ruby Gems nutzen kann. Wahrscheinlich muß man schauen daß man die relevanten Files einfach selbst runterlädt und aufräumt. Ist vielleicht eh im Sinne der Übersichtlichkeit und des geringen Overloads.<br /> <br /> === New-School ===<br /> * libsass oder node.js <br /> * gulp-sass (siehe [[gulp]])<br /> <br /> === Old-School - Ruby based ===<br /> * '''Ruby Installieren'''<br /> ** Siehe [[Ruby]]<br /> ** Ruby, Sass und Compass installieren (hier findest du eine Anleitung http://compass-style.org/install/). Wenn die Rechte nicht passen immer vorne sudo eingeben um mit Admin Rechten auf der Konsole zu arbeiten.<br /> ** Ruby Updaten falls nötig:<br /> gem update --system<br /> ** Wenn Homebrew installiert ist (Paketmanager): brew install ruby<br /> * Compass Framework als Ruby Gem installieren<br /> gem install compass<br /> gem compass -v<br /> * Ordnerstruktur (hängt von der Sass Konfiguration ab.<br /> ** scss Ordner - enthält die Sass Dateien<br /> ** css Ordner - enthält css dateien<br /> ** config.rb - Einstellungen für den Sass Compiler<br /> <br /> == '''Neues Projekt anlegen'''==<br /> Im Terminal in Ordner wechseln und z.B.<br /> compass/create/meineProjekt<br /> Erzeugt einen Projekt Ordner mit einer Basis Ordnerstruktur und Dateien<br /> == '''Projekt kompilieren'''==<br /> === SASS pur ===<br /> sass --watch projekt/sass<br /> Von nun an wird das „/sass“ Verzeichnis überwacht. Wird an einer Datei mit der Endung .scss oder .sass etwas geändert wird diese automatisch kompiliert und als .css Datei ausgegeben. In unserem Fall werden automtisch zwei Dateien mit den Namen „style1.css“ und „style2.css“ angelegt.<br /> Will man die CSS Dateien in ein separaten Unterordner unterbringen gibt man einfach folgendes ein:<br /> <br /> sass --watch projekt/sass:projekt/css<br /> Das Verzeichnis VOR dem : gibt die Herkunft der SASS Dateien an (den Input), dass Verzeichnis NACH dem : gibt das Zielverzeichnis für die fertigen CSS Dateien an (den Output).<br /> === Mit Compass ===<br /> Im Terminal im Projektordner<br /> compass compile <br /> Ausgehend von der Konfigurationsdatei werden die CSS Dateien erzeugt.<br /> <br /> == Automatisch kompilieren im Watch Mode ==<br /> Der Compiler kann Dateien überwachen und automatisch kompilieren wenn die Datei sich ändert.<br /> compass watch<br /> <br /> == SASS Features ==<br /> === Variablen ===<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> body{<br /> color: $color_1<br /> }<br /> </syntaxhighlight><br /> === Nesting ===<br /> Statt<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> }<br /> #section1 h1{<br /> color: blue;<br /> }<br /> #section.wichtig{<br /> font-weight: bold;<br /> }<br /> </syntaxhighlight><br /> schreiben wir:<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> h1{<br /> color: blue;<br /> }<br /> &.wichtig{<br /> font-weight: bold;<br /> }<br /> }<br /> </syntaxhighlight><br /> <br /> == Zusatzfunktionen mit Compass ==<br /> === CSS3 - Zusatzfunktionen ===<br /> Über einen import lädt man diverse von Compass mitgelieferte Mixins (s.u.) zum Thema css3. Über include werden dann Browserübergreifende Statments generiert.<br /> <syntaxhighlight lang="css"><br /> @import "compass/css3";<br /> .layout-1{<br /> @include box-shadow(2px 2px 1px #999);<br /> }<br /> </syntaxhighlight><br /> <br /> Erzeugt folgendes CSS<br /> <syntaxhighlight lang="css"><br /> .layout-1 {<br /> -moz-box-shadow: 2px 2px 1px #999;<br /> -webkit-box-shadow: 2px 2px 1px #999;<br /> box-shadow: 2px 2px 1px #999;<br /> }<br /> </syntaxhighlight><br /> === Browser Reset CSS ===<br /> Kompass kein Standard Styles für einen Browser Reset erzeugen.<br /> @import "compass/reset";<br /> === Components ===<br /> Auslagern von Teilen geht sehr schön mit Components. Am besten in einen Unterordner. Die Dateinamen beginnen mit einem Unterstrich. Somit weiß Compass, dass es sich um Komponenten handelt. Beim Import läßt man den Unterstrich und das Dattei Suffix (.scss) weg.<br /> components<br /> - _var.scss<br /> - _mixin.scss<br /> _var<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> ...<br /> </syntaxhighlight><br /> Eingebunden wird es so:<br /> <syntaxhighlight lang="css"><br /> @import "components/var";<br /> @import "components/mixin";<br /> <br /> .layout-1{<br /> color: $color_1;<br /> }<br /> ...<br /> </syntaxhighlight><br /> === Mixins ===<br /> Mit Mixins kann man einfache Funktionen, ähnlich wie Makros, erzeugen. Man definiert die Funktion mit dem Schlüsselwort @mixin und bindet sie später über include ein. Auch Rechenoperationen sind erlaubt.<br /> '''_mixin.scss'''<br /> <syntaxhighlight lang="css"><br /> // Definition der Radius Funktion (bzw. des Mixin)<br /> @mixin radius($r){<br /> -moz-border-radius: $r;<br /> -webkit-border-radius: $r+2px;<br /> border-radius: $r;<br /> }</syntaxhighlight><br /> '''myScss.scss'''<br /> <syntaxhighlight lang="css"><br /> // Radius Mixin nutzen<br /> ...<br /> @include radius(4px);<br /> ...<br /> </syntaxhighlight><br /> erzeugt:<br /> <syntaxhighlight lang="css"><br /> -moz-border-radius: 4px;<br /> -webkit-border-radius: 6px;<br /> border-radius: 4px;<br /> </syntaxhighlight><br /> <br /> === Vererbung ===<br /> Über das Schlüsselwort @extend, kann man Stile vererben.<br /> <syntaxhighlight lang="css"><br /> .error{<br /> @extend .layout-1; // erbe alle Stile von .layout-1<br /> color: red;<br /> }<br /> </syntaxhighlight><br /> <br /> == Sass ohne Konsole ==<br /> === Scout-App ===<br /> https://github.com/scout-app/scout-app<br /> * Nutzt mitlerweile (Sept 2016) node-sass und chokidar (verbessert die watch Funktionalität)<br /> * Unterstützt viele Mixins<br /> <pre><br /> @import "compass"; @Igosuki/compass-mixins<br /> @import "bourbon"; @thoughtbot/bourbon<br /> @import "neat"; @thoughtbot/neat<br /> @import "meyer"; @TheJaredWilcurt/meyer-sass<br /> @import "buttons"; @alexwolfe/Buttons<br /> </pre><br /> <br /> == Bootstrap und SASS ==<br /> Bootstrap wird mit LESS entwickelt, aber es gibt einen offiziellen SASS Port.<br /> <br /> Wenn [[Ruby]] installiert ist kann man einen bootstrap-sass gem installieren, dann kann man später ganz einfach über Compass, Projekte mit Bootstrap erstellen:<br /> <br /> Bootstrap Sass Gem installieren <br /> gem install bootstrap-sass<br /> <br /> Bootstrap Sass zu vorhandenem Compass Projekt hinzufügen<br /> compass install bootstrap -r bootstrap-sass<br /> <br /> Neues Compass Projekt mit Bootstrap-Sass erstellen (Funktioniert bei mir nicht)<br /> compass create my-new-project -r bootstrap-sass --using bootstrap<br /> <br /> == Hinweise zu Ruby ==<br /> '''Achtung''' - da Sass unter Ruby nicht besonders performant ist und inzwischen andere Varianten bereitstehen (z.b. libsass) sollte man auf bessere Tools umsteigen.)<br /> <br /> Sass und Compass werden als Ruby Gems installiert. Viele Entwickler sagen man soll Gems mit RVM (ein Ruby Version Manager) installieren. Damit kann man mehrere Ruby Versionen verwalten und vermeidet Probleme mit fehlenden Schreibrechten.) Für viele Zwecke ist das aber Overkill schon wieder einen Paketmanager zu installieren, wenn man nur ein paar Sachen braucht. Es gibt auch einfachere Methoden.<br /> <br /> Option 1: Weiter Sudo benutzen aber in anderem Ordner. Sudo ist OK wenn Gems global installiert werden dürfen. Allerdings nicht in /usr/bin. Man kann Sie stattdessen in /usr/local/bin speichern. Dort installiert auch homebrew sein Zeug.<br /> <br /> Beispiel:<br /> <br /> sudo gem install fakes3 -n/usr/local/bin<br /> <br /> Gems in /usr/local/bin kann jeder User im System nutzen, wenn der Ordner in der PATH Variable ist.<br /> <br /> Option 2: OHNE Sudo im home Verzeichnis<br /> <br /> Gems sollen in ~/.gem gespeichert werden und binaries in ~/bin (zu PATH hinzufügen).<br /> <br /> gem install fakes3 --user-install -n~/bin<br /> <br /> Either way, you can add these parameters to your ~/.gemrc so you don't have to remember them:<br /> <br /> gem: -n/usr/local/bin<br /> i.e. echo "gem: -n/usr/local/bin" >> ~/.gemrc<br /> <br /> or<br /> <br /> gem: --user-install -n~/bin<br /> i.e. echo "gem: --user-install -n~/bin" >> ~/.gemrc<br /> <br /> (Tip: You can also throw in --no-document to skip generating Ruby developer documentation.)</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=SASS_vs_SCSS_vs_LESS_vs_%3F&diff=23262 SASS vs SCSS vs LESS vs ? 2018-08-15T06:57:56Z

<p>37.49.33.174: </p> <hr /> <div>Vergleich von Präprozessoren<br /> <br /> https://www.heise.de/developer/artikel/CSS-Praeprozessoren-im-Vergleich-2288284.html?seite=all (etwas Ausführlicher)<br /> https://gist.github.com/chriseppstein/674726 (gute kurze Übersicht)<br /> <br /> Für Variablennamen verwendet LESS den @-, Sass den $- und Stylus einen optionalen $-Präfix.<br /> <br /> '''SASS / SCSS''' <br /> * Syntaxvariante von SASS (gleicher Kompiler)<br /> * SASS ohne Klammern (.sass) SCSS mit Klammern (.scss)<br /> * SCSS akzeptiert reines CSS<br /> * Variablen mit $ (wird in CSS sonst nicht verwendet)<br /> <br /> '''LESS''' <br /> * Ziel, so nah wie möglich an Vanilla-CSS<br /> * Früher Ruby heute JS basiert<br /> * Akzeptiert reines CSS<br /> * Variablen mit @<br /> <br /> '''Stylus'''<br /> * erlaubt die normale CSS-Syntax, wobei Klammern, Doppelpunkte und Semikolons optional<br /> * Variablen optional mit oder ohne $</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=SASS_vs_SCSS_vs_LESS_vs_%3F&diff=23261 SASS vs SCSS vs LESS vs ? 2018-08-15T06:57:33Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „Vergleich von Präprozessoren https://www.heise.de/developer/artikel/CSS-Praeprozessoren-im-Vergleich-2288284.html?seite=all (etwas Ausführlicher) https://…“</p> <hr /> <div>Vergleich von Präprozessoren<br /> <br /> https://www.heise.de/developer/artikel/CSS-Praeprozessoren-im-Vergleich-2288284.html?seite=all (etwas Ausführlicher)<br /> https://gist.github.com/chriseppstein/674726 (gute kurze Übersicht)<br /> <br /> Für Variablennamen verwendet LESS den @-, Sass den $- und Stylus einen optionalen $-Präfix.<br /> <br /> '''SASS / SCSS''' <br /> * Syntaxvariante von SASS (gleicher Kompiler)<br /> * SASS ohne Klammern (.sass) SCSS mit Klammern (.scss)<br /> * SCSS akzeptiert reines CSS<br /> * Variablen mit $ (wird in CSS sonst nicht verwendet)<br /> <br /> '''LESS''' <br /> * Ziel, so nah wie möglich an Vanilla-CSS<br /> * Früher Ruby heut JS basiert<br /> * Akzeptiert reines CSS<br /> * Variablen mit @<br /> <br /> '''Stylus'''<br /> * erlaubt die normale CSS-Syntax, wobei Klammern, Doppelpunkte und Semikolons optional<br /> * Variablen optional mit oder ohne $</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=SASS&diff=23260 SASS 2018-08-15T06:34:23Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[SCSS]]<br /> [[LESS]]<br /> [[SASS vs SCSS vs LESS vs ?]]<br /> == Links ==<br /> * Sass Dokumentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html<br /> * Sass on the fly https://www.sassmeister.com/<br /> * https://scotch.io/tutorials/getting-started-with-sass (Syntax Tutorial)<br /> * https://medium.com/@jstubblefield7939/getting-started-with-sass-scss-and-nodejs-6f7b4589aaf2 (Basis Kompilieren mit node-js)<br /> * [[Sass mit node-sass (Node.js)]] RECOMMENDED<br /> * https://github.com/scout-app/scout-app oder http://scout-app.io/<br /> * http://noeticforce.com/best-sass-tools-for-modern-web-design<br /> Zu Compass<br /> * http://compass-style.org/install/<br /> Scout-App<br /> * http://Scout-App.io<br /> * https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/ '''(auch eine gute Sass Einführung)'''<br /> <br /> == Übersicht ==<br /> Die Grundidee hinter der Entwicklung von Sass war es, die Arbeit mit CSS einfacher zu machen, aber gleichzeitig auch den Funktionsumfang zu erhöhen. Daher wurden in Sass Klammern sowie Semikolons entfernt.<br /> <br /> <br /> <br /> Es gibt gute '''Erweiterungen''' die z.B. '''Mixins''' (s.u.) liefern oder zusätzliche Funktionalität. <br /> <br /> Früher lief es nur unter Ruby unter der Konsole. Heute gibt es z.B. libsass eine C Bibliothek auf die diverse '''Sass Tools''' zurückgreifen. Compass 2.0 soll z.B. auch auf libsass zurückgreifen. Auch NodeJS bringt eine eigene Umsetzung. Auch '''Tools mit grafischer Oberfläche''' gibt es mitlerweile. Z.B. Scout-App.<br /> <br /> === Was bringt es ===<br /> '''Vorteile''':<br /> * Wartbarer Code<br /> * Wiederverwenden von Code<br /> * Übersicht<br /> * Gute Erweiterungen z.B. mit Compass<br /> '''Nachteile''':<br /> * Man wird faul und achtet nicht mehr auf schönen CSS Code<br /> * Abhängigkeit der Webprojekte von weiteren Tools. Z.B. aufpassen bei Änderungen auf dem Server die dann wieder überschrieben werden. Tipp - eine Datei zum Überschreiben die nicht von Sass generiert wird. z.B. custom.css<br /> * Man geht vor allem beim Old-School Ansatz mit Ruby viele Abhängigkeiten ein (rvm, evtl. homebrew, ...) Das kann extrem Zeit kosten bis alles läuft.<br /> <br /> * Schneller Start mit der '''Scout App''' (Sass und Compass und alle Abhängigen Libs) Hier wird keine weitere Installation benötigt. In der neuen Version (2016) Läuft es ohne Ruby dafür mit NW.js, Node. Aber oft ist es besser die Sache von der Pike anzugehen.<br /> * Ruby wird für SASS benötigt (Test in der Konsole mit ruby -v)<br /> ** Ausnahme: Manche Sass Tools bringen Ruby bereits mit. Z.B. '''Scout welches Compass und Ruby''' mitbringt.<br /> <br /> == Quickstart ==<br /> === Ohne Konsole ===<br /> https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/<br /> <br /> Scout App<br /> <br /> Hier ist die Frage wie man Ruby Gems nutzen kann. Wahrscheinlich muß man schauen daß man die relevanten Files einfach selbst runterlädt und aufräumt. Ist vielleicht eh im Sinne der Übersichtlichkeit und des geringen Overloads.<br /> <br /> === New-School ===<br /> * libsass oder node.js <br /> * gulp-sass (siehe [[gulp]])<br /> <br /> === Old-School - Ruby based ===<br /> * '''Ruby Installieren'''<br /> ** Siehe [[Ruby]]<br /> ** Ruby, Sass und Compass installieren (hier findest du eine Anleitung http://compass-style.org/install/). Wenn die Rechte nicht passen immer vorne sudo eingeben um mit Admin Rechten auf der Konsole zu arbeiten.<br /> ** Ruby Updaten falls nötig:<br /> gem update --system<br /> ** Wenn Homebrew installiert ist (Paketmanager): brew install ruby<br /> * Compass Framework als Ruby Gem installieren<br /> gem install compass<br /> gem compass -v<br /> * Ordnerstruktur (hängt von der Sass Konfiguration ab.<br /> ** scss Ordner - enthält die Sass Dateien<br /> ** css Ordner - enthält css dateien<br /> ** config.rb - Einstellungen für den Sass Compiler<br /> <br /> == '''Neues Projekt anlegen'''==<br /> Im Terminal in Ordner wechseln und z.B.<br /> compass/create/meineProjekt<br /> Erzeugt einen Projekt Ordner mit einer Basis Ordnerstruktur und Dateien<br /> == '''Projekt kompilieren'''==<br /> === SASS pur ===<br /> sass --watch projekt/sass<br /> Von nun an wird das „/sass“ Verzeichnis überwacht. Wird an einer Datei mit der Endung .scss oder .sass etwas geändert wird diese automatisch kompiliert und als .css Datei ausgegeben. In unserem Fall werden automtisch zwei Dateien mit den Namen „style1.css“ und „style2.css“ angelegt.<br /> Will man die CSS Dateien in ein separaten Unterordner unterbringen gibt man einfach folgendes ein:<br /> <br /> sass --watch projekt/sass:projekt/css<br /> Das Verzeichnis VOR dem : gibt die Herkunft der SASS Dateien an (den Input), dass Verzeichnis NACH dem : gibt das Zielverzeichnis für die fertigen CSS Dateien an (den Output).<br /> === Mit Compass ===<br /> Im Terminal im Projektordner<br /> compass compile <br /> Ausgehend von der Konfigurationsdatei werden die CSS Dateien erzeugt.<br /> <br /> == Automatisch kompilieren im Watch Mode ==<br /> Der Compiler kann Dateien überwachen und automatisch kompilieren wenn die Datei sich ändert.<br /> compass watch<br /> <br /> == SASS Features ==<br /> === Variablen ===<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> body{<br /> color: $color_1<br /> }<br /> </syntaxhighlight><br /> === Nesting ===<br /> Statt<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> }<br /> #section1 h1{<br /> color: blue;<br /> }<br /> #section.wichtig{<br /> font-weight: bold;<br /> }<br /> </syntaxhighlight><br /> schreiben wir:<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> h1{<br /> color: blue;<br /> }<br /> &.wichtig{<br /> font-weight: bold;<br /> }<br /> }<br /> </syntaxhighlight><br /> <br /> == Zusatzfunktionen mit Compass ==<br /> === CSS3 - Zusatzfunktionen ===<br /> Über einen import lädt man diverse von Compass mitgelieferte Mixins (s.u.) zum Thema css3. Über include werden dann Browserübergreifende Statments generiert.<br /> <syntaxhighlight lang="css"><br /> @import "compass/css3";<br /> .layout-1{<br /> @include box-shadow(2px 2px 1px #999);<br /> }<br /> </syntaxhighlight><br /> <br /> Erzeugt folgendes CSS<br /> <syntaxhighlight lang="css"><br /> .layout-1 {<br /> -moz-box-shadow: 2px 2px 1px #999;<br /> -webkit-box-shadow: 2px 2px 1px #999;<br /> box-shadow: 2px 2px 1px #999;<br /> }<br /> </syntaxhighlight><br /> === Browser Reset CSS ===<br /> Kompass kein Standard Styles für einen Browser Reset erzeugen.<br /> @import "compass/reset";<br /> === Components ===<br /> Auslagern von Teilen geht sehr schön mit Components. Am besten in einen Unterordner. Die Dateinamen beginnen mit einem Unterstrich. Somit weiß Compass, dass es sich um Komponenten handelt. Beim Import läßt man den Unterstrich und das Dattei Suffix (.scss) weg.<br /> components<br /> - _var.scss<br /> - _mixin.scss<br /> _var<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> ...<br /> </syntaxhighlight><br /> Eingebunden wird es so:<br /> <syntaxhighlight lang="css"><br /> @import "components/var";<br /> @import "components/mixin";<br /> <br /> .layout-1{<br /> color: $color_1;<br /> }<br /> ...<br /> </syntaxhighlight><br /> === Mixins ===<br /> Mit Mixins kann man einfache Funktionen, ähnlich wie Makros, erzeugen. Man definiert die Funktion mit dem Schlüsselwort @mixin und bindet sie später über include ein. Auch Rechenoperationen sind erlaubt.<br /> '''_mixin.scss'''<br /> <syntaxhighlight lang="css"><br /> // Definition der Radius Funktion (bzw. des Mixin)<br /> @mixin radius($r){<br /> -moz-border-radius: $r;<br /> -webkit-border-radius: $r+2px;<br /> border-radius: $r;<br /> }</syntaxhighlight><br /> '''myScss.scss'''<br /> <syntaxhighlight lang="css"><br /> // Radius Mixin nutzen<br /> ...<br /> @include radius(4px);<br /> ...<br /> </syntaxhighlight><br /> erzeugt:<br /> <syntaxhighlight lang="css"><br /> -moz-border-radius: 4px;<br /> -webkit-border-radius: 6px;<br /> border-radius: 4px;<br /> </syntaxhighlight><br /> <br /> === Vererbung ===<br /> Über das Schlüsselwort @extend, kann man Stile vererben.<br /> <syntaxhighlight lang="css"><br /> .error{<br /> @extend .layout-1; // erbe alle Stile von .layout-1<br /> color: red;<br /> }<br /> </syntaxhighlight><br /> <br /> == Sass ohne Konsole ==<br /> === Scout-App ===<br /> https://github.com/scout-app/scout-app<br /> * Nutzt mitlerweile (Sept 2016) node-sass und chokidar (verbessert die watch Funktionalität)<br /> * Unterstützt viele Mixins<br /> <pre><br /> @import "compass"; @Igosuki/compass-mixins<br /> @import "bourbon"; @thoughtbot/bourbon<br /> @import "neat"; @thoughtbot/neat<br /> @import "meyer"; @TheJaredWilcurt/meyer-sass<br /> @import "buttons"; @alexwolfe/Buttons<br /> </pre><br /> <br /> == Bootstrap und SASS ==<br /> Bootstrap wird mit LESS entwickelt, aber es gibt einen offiziellen SASS Port.<br /> <br /> Wenn [[Ruby]] installiert ist kann man einen bootstrap-sass gem installieren, dann kann man später ganz einfach über Compass, Projekte mit Bootstrap erstellen:<br /> <br /> Bootstrap Sass Gem installieren <br /> gem install bootstrap-sass<br /> <br /> Bootstrap Sass zu vorhandenem Compass Projekt hinzufügen<br /> compass install bootstrap -r bootstrap-sass<br /> <br /> Neues Compass Projekt mit Bootstrap-Sass erstellen (Funktioniert bei mir nicht)<br /> compass create my-new-project -r bootstrap-sass --using bootstrap<br /> <br /> == Hinweise zu Ruby ==<br /> '''Achtung''' - da Sass unter Ruby nicht besonders performant ist und inzwischen andere Varianten bereitstehen (z.b. libsass) sollte man auf bessere Tools umsteigen.)<br /> <br /> Sass und Compass werden als Ruby Gems installiert. Viele Entwickler sagen man soll Gems mit RVM (ein Ruby Version Manager) installieren. Damit kann man mehrere Ruby Versionen verwalten und vermeidet Probleme mit fehlenden Schreibrechten.) Für viele Zwecke ist das aber Overkill schon wieder einen Paketmanager zu installieren, wenn man nur ein paar Sachen braucht. Es gibt auch einfachere Methoden.<br /> <br /> Option 1: Weiter Sudo benutzen aber in anderem Ordner. Sudo ist OK wenn Gems global installiert werden dürfen. Allerdings nicht in /usr/bin. Man kann Sie stattdessen in /usr/local/bin speichern. Dort installiert auch homebrew sein Zeug.<br /> <br /> Beispiel:<br /> <br /> sudo gem install fakes3 -n/usr/local/bin<br /> <br /> Gems in /usr/local/bin kann jeder User im System nutzen, wenn der Ordner in der PATH Variable ist.<br /> <br /> Option 2: OHNE Sudo im home Verzeichnis<br /> <br /> Gems sollen in ~/.gem gespeichert werden und binaries in ~/bin (zu PATH hinzufügen).<br /> <br /> gem install fakes3 --user-install -n~/bin<br /> <br /> Either way, you can add these parameters to your ~/.gemrc so you don't have to remember them:<br /> <br /> gem: -n/usr/local/bin<br /> i.e. echo "gem: -n/usr/local/bin" >> ~/.gemrc<br /> <br /> or<br /> <br /> gem: --user-install -n~/bin<br /> i.e. echo "gem: --user-install -n~/bin" >> ~/.gemrc<br /> <br /> (Tip: You can also throw in --no-document to skip generating Ruby developer documentation.)</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=SASS&diff=23259 SASS 2018-08-15T06:31:59Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[SCSS]]<br /> [[LESS]]<br /> [[SASS vs SCSS vs LESS vs ?]]<br /> == Links ==<br /> * Sass on the fly https://www.sassmeister.com/<br /> * https://scotch.io/tutorials/getting-started-with-sass (Syntax Tutorial)<br /> * https://medium.com/@jstubblefield7939/getting-started-with-sass-scss-and-nodejs-6f7b4589aaf2 (Basis Kompilieren mit node-js)<br /> * [[Sass mit node-sass (Node.js)]] RECOMMENDED<br /> * https://github.com/scout-app/scout-app oder http://scout-app.io/<br /> * http://noeticforce.com/best-sass-tools-for-modern-web-design<br /> Zu Compass<br /> * http://compass-style.org/install/<br /> Scout-App<br /> * http://Scout-App.io<br /> * https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/ '''(auch eine gute Sass Einführung)'''<br /> <br /> == Übersicht ==<br /> Die Grundidee hinter der Entwicklung von Sass war es, die Arbeit mit CSS einfacher zu machen, aber gleichzeitig auch den Funktionsumfang zu erhöhen. Daher wurden in Sass Klammern sowie Semikolons entfernt.<br /> <br /> <br /> <br /> Es gibt gute '''Erweiterungen''' die z.B. '''Mixins''' (s.u.) liefern oder zusätzliche Funktionalität. <br /> <br /> Früher lief es nur unter Ruby unter der Konsole. Heute gibt es z.B. libsass eine C Bibliothek auf die diverse '''Sass Tools''' zurückgreifen. Compass 2.0 soll z.B. auch auf libsass zurückgreifen. Auch NodeJS bringt eine eigene Umsetzung. Auch '''Tools mit grafischer Oberfläche''' gibt es mitlerweile. Z.B. Scout-App.<br /> <br /> === Was bringt es ===<br /> '''Vorteile''':<br /> * Wartbarer Code<br /> * Wiederverwenden von Code<br /> * Übersicht<br /> * Gute Erweiterungen z.B. mit Compass<br /> '''Nachteile''':<br /> * Man wird faul und achtet nicht mehr auf schönen CSS Code<br /> * Abhängigkeit der Webprojekte von weiteren Tools. Z.B. aufpassen bei Änderungen auf dem Server die dann wieder überschrieben werden. Tipp - eine Datei zum Überschreiben die nicht von Sass generiert wird. z.B. custom.css<br /> * Man geht vor allem beim Old-School Ansatz mit Ruby viele Abhängigkeiten ein (rvm, evtl. homebrew, ...) Das kann extrem Zeit kosten bis alles läuft.<br /> <br /> * Schneller Start mit der '''Scout App''' (Sass und Compass und alle Abhängigen Libs) Hier wird keine weitere Installation benötigt. In der neuen Version (2016) Läuft es ohne Ruby dafür mit NW.js, Node. Aber oft ist es besser die Sache von der Pike anzugehen.<br /> * Ruby wird für SASS benötigt (Test in der Konsole mit ruby -v)<br /> ** Ausnahme: Manche Sass Tools bringen Ruby bereits mit. Z.B. '''Scout welches Compass und Ruby''' mitbringt.<br /> <br /> == Quickstart ==<br /> === Ohne Konsole ===<br /> https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/<br /> <br /> Scout App<br /> <br /> Hier ist die Frage wie man Ruby Gems nutzen kann. Wahrscheinlich muß man schauen daß man die relevanten Files einfach selbst runterlädt und aufräumt. Ist vielleicht eh im Sinne der Übersichtlichkeit und des geringen Overloads.<br /> <br /> === New-School ===<br /> * libsass oder node.js <br /> * gulp-sass (siehe [[gulp]])<br /> <br /> === Old-School - Ruby based ===<br /> * '''Ruby Installieren'''<br /> ** Siehe [[Ruby]]<br /> ** Ruby, Sass und Compass installieren (hier findest du eine Anleitung http://compass-style.org/install/). Wenn die Rechte nicht passen immer vorne sudo eingeben um mit Admin Rechten auf der Konsole zu arbeiten.<br /> ** Ruby Updaten falls nötig:<br /> gem update --system<br /> ** Wenn Homebrew installiert ist (Paketmanager): brew install ruby<br /> * Compass Framework als Ruby Gem installieren<br /> gem install compass<br /> gem compass -v<br /> * Ordnerstruktur (hängt von der Sass Konfiguration ab.<br /> ** scss Ordner - enthält die Sass Dateien<br /> ** css Ordner - enthält css dateien<br /> ** config.rb - Einstellungen für den Sass Compiler<br /> <br /> == '''Neues Projekt anlegen'''==<br /> Im Terminal in Ordner wechseln und z.B.<br /> compass/create/meineProjekt<br /> Erzeugt einen Projekt Ordner mit einer Basis Ordnerstruktur und Dateien<br /> == '''Projekt kompilieren'''==<br /> === SASS pur ===<br /> sass --watch projekt/sass<br /> Von nun an wird das „/sass“ Verzeichnis überwacht. Wird an einer Datei mit der Endung .scss oder .sass etwas geändert wird diese automatisch kompiliert und als .css Datei ausgegeben. In unserem Fall werden automtisch zwei Dateien mit den Namen „style1.css“ und „style2.css“ angelegt.<br /> Will man die CSS Dateien in ein separaten Unterordner unterbringen gibt man einfach folgendes ein:<br /> <br /> sass --watch projekt/sass:projekt/css<br /> Das Verzeichnis VOR dem : gibt die Herkunft der SASS Dateien an (den Input), dass Verzeichnis NACH dem : gibt das Zielverzeichnis für die fertigen CSS Dateien an (den Output).<br /> === Mit Compass ===<br /> Im Terminal im Projektordner<br /> compass compile <br /> Ausgehend von der Konfigurationsdatei werden die CSS Dateien erzeugt.<br /> <br /> == Automatisch kompilieren im Watch Mode ==<br /> Der Compiler kann Dateien überwachen und automatisch kompilieren wenn die Datei sich ändert.<br /> compass watch<br /> <br /> == SASS Features ==<br /> === Variablen ===<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> body{<br /> color: $color_1<br /> }<br /> </syntaxhighlight><br /> === Nesting ===<br /> Statt<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> }<br /> #section1 h1{<br /> color: blue;<br /> }<br /> #section.wichtig{<br /> font-weight: bold;<br /> }<br /> </syntaxhighlight><br /> schreiben wir:<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> h1{<br /> color: blue;<br /> }<br /> &.wichtig{<br /> font-weight: bold;<br /> }<br /> }<br /> </syntaxhighlight><br /> <br /> == Zusatzfunktionen mit Compass ==<br /> === CSS3 - Zusatzfunktionen ===<br /> Über einen import lädt man diverse von Compass mitgelieferte Mixins (s.u.) zum Thema css3. Über include werden dann Browserübergreifende Statments generiert.<br /> <syntaxhighlight lang="css"><br /> @import "compass/css3";<br /> .layout-1{<br /> @include box-shadow(2px 2px 1px #999);<br /> }<br /> </syntaxhighlight><br /> <br /> Erzeugt folgendes CSS<br /> <syntaxhighlight lang="css"><br /> .layout-1 {<br /> -moz-box-shadow: 2px 2px 1px #999;<br /> -webkit-box-shadow: 2px 2px 1px #999;<br /> box-shadow: 2px 2px 1px #999;<br /> }<br /> </syntaxhighlight><br /> === Browser Reset CSS ===<br /> Kompass kein Standard Styles für einen Browser Reset erzeugen.<br /> @import "compass/reset";<br /> === Components ===<br /> Auslagern von Teilen geht sehr schön mit Components. Am besten in einen Unterordner. Die Dateinamen beginnen mit einem Unterstrich. Somit weiß Compass, dass es sich um Komponenten handelt. Beim Import läßt man den Unterstrich und das Dattei Suffix (.scss) weg.<br /> components<br /> - _var.scss<br /> - _mixin.scss<br /> _var<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> ...<br /> </syntaxhighlight><br /> Eingebunden wird es so:<br /> <syntaxhighlight lang="css"><br /> @import "components/var";<br /> @import "components/mixin";<br /> <br /> .layout-1{<br /> color: $color_1;<br /> }<br /> ...<br /> </syntaxhighlight><br /> === Mixins ===<br /> Mit Mixins kann man einfache Funktionen, ähnlich wie Makros, erzeugen. Man definiert die Funktion mit dem Schlüsselwort @mixin und bindet sie später über include ein. Auch Rechenoperationen sind erlaubt.<br /> '''_mixin.scss'''<br /> <syntaxhighlight lang="css"><br /> // Definition der Radius Funktion (bzw. des Mixin)<br /> @mixin radius($r){<br /> -moz-border-radius: $r;<br /> -webkit-border-radius: $r+2px;<br /> border-radius: $r;<br /> }</syntaxhighlight><br /> '''myScss.scss'''<br /> <syntaxhighlight lang="css"><br /> // Radius Mixin nutzen<br /> ...<br /> @include radius(4px);<br /> ...<br /> </syntaxhighlight><br /> erzeugt:<br /> <syntaxhighlight lang="css"><br /> -moz-border-radius: 4px;<br /> -webkit-border-radius: 6px;<br /> border-radius: 4px;<br /> </syntaxhighlight><br /> <br /> === Vererbung ===<br /> Über das Schlüsselwort @extend, kann man Stile vererben.<br /> <syntaxhighlight lang="css"><br /> .error{<br /> @extend .layout-1; // erbe alle Stile von .layout-1<br /> color: red;<br /> }<br /> </syntaxhighlight><br /> <br /> == Sass ohne Konsole ==<br /> === Scout-App ===<br /> https://github.com/scout-app/scout-app<br /> * Nutzt mitlerweile (Sept 2016) node-sass und chokidar (verbessert die watch Funktionalität)<br /> * Unterstützt viele Mixins<br /> <pre><br /> @import "compass"; @Igosuki/compass-mixins<br /> @import "bourbon"; @thoughtbot/bourbon<br /> @import "neat"; @thoughtbot/neat<br /> @import "meyer"; @TheJaredWilcurt/meyer-sass<br /> @import "buttons"; @alexwolfe/Buttons<br /> </pre><br /> <br /> == Bootstrap und SASS ==<br /> Bootstrap wird mit LESS entwickelt, aber es gibt einen offiziellen SASS Port.<br /> <br /> Wenn [[Ruby]] installiert ist kann man einen bootstrap-sass gem installieren, dann kann man später ganz einfach über Compass, Projekte mit Bootstrap erstellen:<br /> <br /> Bootstrap Sass Gem installieren <br /> gem install bootstrap-sass<br /> <br /> Bootstrap Sass zu vorhandenem Compass Projekt hinzufügen<br /> compass install bootstrap -r bootstrap-sass<br /> <br /> Neues Compass Projekt mit Bootstrap-Sass erstellen (Funktioniert bei mir nicht)<br /> compass create my-new-project -r bootstrap-sass --using bootstrap<br /> <br /> == Hinweise zu Ruby ==<br /> '''Achtung''' - da Sass unter Ruby nicht besonders performant ist und inzwischen andere Varianten bereitstehen (z.b. libsass) sollte man auf bessere Tools umsteigen.)<br /> <br /> Sass und Compass werden als Ruby Gems installiert. Viele Entwickler sagen man soll Gems mit RVM (ein Ruby Version Manager) installieren. Damit kann man mehrere Ruby Versionen verwalten und vermeidet Probleme mit fehlenden Schreibrechten.) Für viele Zwecke ist das aber Overkill schon wieder einen Paketmanager zu installieren, wenn man nur ein paar Sachen braucht. Es gibt auch einfachere Methoden.<br /> <br /> Option 1: Weiter Sudo benutzen aber in anderem Ordner. Sudo ist OK wenn Gems global installiert werden dürfen. Allerdings nicht in /usr/bin. Man kann Sie stattdessen in /usr/local/bin speichern. Dort installiert auch homebrew sein Zeug.<br /> <br /> Beispiel:<br /> <br /> sudo gem install fakes3 -n/usr/local/bin<br /> <br /> Gems in /usr/local/bin kann jeder User im System nutzen, wenn der Ordner in der PATH Variable ist.<br /> <br /> Option 2: OHNE Sudo im home Verzeichnis<br /> <br /> Gems sollen in ~/.gem gespeichert werden und binaries in ~/bin (zu PATH hinzufügen).<br /> <br /> gem install fakes3 --user-install -n~/bin<br /> <br /> Either way, you can add these parameters to your ~/.gemrc so you don't have to remember them:<br /> <br /> gem: -n/usr/local/bin<br /> i.e. echo "gem: -n/usr/local/bin" >> ~/.gemrc<br /> <br /> or<br /> <br /> gem: --user-install -n~/bin<br /> i.e. echo "gem: --user-install -n~/bin" >> ~/.gemrc<br /> <br /> (Tip: You can also throw in --no-document to skip generating Ruby developer documentation.)</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=SASS&diff=23258 SASS 2018-08-15T06:27:12Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[SCSS]]<br /> [[LESS]]<br /> == Links ==<br /> * Sass on the fly https://www.sassmeister.com/<br /> * https://scotch.io/tutorials/getting-started-with-sass (Syntax Tutorial)<br /> * https://medium.com/@jstubblefield7939/getting-started-with-sass-scss-and-nodejs-6f7b4589aaf2 (Basis Kompilieren mit node-js)<br /> * [[Sass mit node-sass (Node.js)]] RECOMMENDED<br /> * https://github.com/scout-app/scout-app oder http://scout-app.io/<br /> * http://noeticforce.com/best-sass-tools-for-modern-web-design<br /> Zu Compass<br /> * http://compass-style.org/install/<br /> Scout-App<br /> * http://Scout-App.io<br /> * https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/ '''(auch eine gute Sass Einführung)'''<br /> <br /> == Übersicht ==<br /> Preprozessor für CSS. Ermöglicht '''Logische Funktionen''' zu integrieren und generiert aus mehreren Files und der Logik ein finales CSS File. Gut geeignet wenn man schnell ein Farbschema in einem umfangreichen Stylesheet erstellen möchte, da es auch Variablen kennt. <br /> <br /> Es gibt gute '''Erweiterungen''' die z.B. '''Mixins''' (s.u.) liefern oder zusätzliche Funktionalität. <br /> <br /> Früher lief es nur unter Ruby unter der Konsole. Heute gibt es z.B. libsass eine C Bibliothek auf die diverse '''Sass Tools''' zurückgreifen. Compass 2.0 soll z.B. auch auf libsass zurückgreifen. Auch NodeJS bringt eine eigene Umsetzung. Auch '''Tools mit grafischer Oberfläche''' gibt es mitlerweile. Z.B. Scout-App.<br /> <br /> === Was bringt es ===<br /> '''Vorteile''':<br /> * Wartbarer Code<br /> * Wiederverwenden von Code<br /> * Übersicht<br /> * Gute Erweiterungen z.B. mit Compass<br /> '''Nachteile''':<br /> * Man wird faul und achtet nicht mehr auf schönen CSS Code<br /> * Abhängigkeit der Webprojekte von weiteren Tools. Z.B. aufpassen bei Änderungen auf dem Server die dann wieder überschrieben werden. Tipp - eine Datei zum Überschreiben die nicht von Sass generiert wird. z.B. custom.css<br /> * Man geht vor allem beim Old-School Ansatz mit Ruby viele Abhängigkeiten ein (rvm, evtl. homebrew, ...) Das kann extrem Zeit kosten bis alles läuft.<br /> <br /> * Schneller Start mit der '''Scout App''' (Sass und Compass und alle Abhängigen Libs) Hier wird keine weitere Installation benötigt. In der neuen Version (2016) Läuft es ohne Ruby dafür mit NW.js, Node. Aber oft ist es besser die Sache von der Pike anzugehen.<br /> * Ruby wird für SASS benötigt (Test in der Konsole mit ruby -v)<br /> ** Ausnahme: Manche Sass Tools bringen Ruby bereits mit. Z.B. '''Scout welches Compass und Ruby''' mitbringt.<br /> <br /> == Quickstart ==<br /> === Ohne Konsole ===<br /> https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/<br /> <br /> Scout App<br /> <br /> Hier ist die Frage wie man Ruby Gems nutzen kann. Wahrscheinlich muß man schauen daß man die relevanten Files einfach selbst runterlädt und aufräumt. Ist vielleicht eh im Sinne der Übersichtlichkeit und des geringen Overloads.<br /> <br /> === New-School ===<br /> * libsass oder node.js <br /> * gulp-sass (siehe [[gulp]])<br /> <br /> === Old-School - Ruby based ===<br /> * '''Ruby Installieren'''<br /> ** Siehe [[Ruby]]<br /> ** Ruby, Sass und Compass installieren (hier findest du eine Anleitung http://compass-style.org/install/). Wenn die Rechte nicht passen immer vorne sudo eingeben um mit Admin Rechten auf der Konsole zu arbeiten.<br /> ** Ruby Updaten falls nötig:<br /> gem update --system<br /> ** Wenn Homebrew installiert ist (Paketmanager): brew install ruby<br /> * Compass Framework als Ruby Gem installieren<br /> gem install compass<br /> gem compass -v<br /> * Ordnerstruktur (hängt von der Sass Konfiguration ab.<br /> ** scss Ordner - enthält die Sass Dateien<br /> ** css Ordner - enthält css dateien<br /> ** config.rb - Einstellungen für den Sass Compiler<br /> <br /> == '''Neues Projekt anlegen'''==<br /> Im Terminal in Ordner wechseln und z.B.<br /> compass/create/meineProjekt<br /> Erzeugt einen Projekt Ordner mit einer Basis Ordnerstruktur und Dateien<br /> == '''Projekt kompilieren'''==<br /> === SASS pur ===<br /> sass --watch projekt/sass<br /> Von nun an wird das „/sass“ Verzeichnis überwacht. Wird an einer Datei mit der Endung .scss oder .sass etwas geändert wird diese automatisch kompiliert und als .css Datei ausgegeben. In unserem Fall werden automtisch zwei Dateien mit den Namen „style1.css“ und „style2.css“ angelegt.<br /> Will man die CSS Dateien in ein separaten Unterordner unterbringen gibt man einfach folgendes ein:<br /> <br /> sass --watch projekt/sass:projekt/css<br /> Das Verzeichnis VOR dem : gibt die Herkunft der SASS Dateien an (den Input), dass Verzeichnis NACH dem : gibt das Zielverzeichnis für die fertigen CSS Dateien an (den Output).<br /> === Mit Compass ===<br /> Im Terminal im Projektordner<br /> compass compile <br /> Ausgehend von der Konfigurationsdatei werden die CSS Dateien erzeugt.<br /> <br /> == Automatisch kompilieren im Watch Mode ==<br /> Der Compiler kann Dateien überwachen und automatisch kompilieren wenn die Datei sich ändert.<br /> compass watch<br /> <br /> == SASS Features ==<br /> === Variablen ===<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> body{<br /> color: $color_1<br /> }<br /> </syntaxhighlight><br /> === Nesting ===<br /> Statt<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> }<br /> #section1 h1{<br /> color: blue;<br /> }<br /> #section.wichtig{<br /> font-weight: bold;<br /> }<br /> </syntaxhighlight><br /> schreiben wir:<br /> <syntaxhighlight lang="css"><br /> #section1{<br /> background: pink;<br /> h1{<br /> color: blue;<br /> }<br /> &.wichtig{<br /> font-weight: bold;<br /> }<br /> }<br /> </syntaxhighlight><br /> <br /> == Zusatzfunktionen mit Compass ==<br /> === CSS3 - Zusatzfunktionen ===<br /> Über einen import lädt man diverse von Compass mitgelieferte Mixins (s.u.) zum Thema css3. Über include werden dann Browserübergreifende Statments generiert.<br /> <syntaxhighlight lang="css"><br /> @import "compass/css3";<br /> .layout-1{<br /> @include box-shadow(2px 2px 1px #999);<br /> }<br /> </syntaxhighlight><br /> <br /> Erzeugt folgendes CSS<br /> <syntaxhighlight lang="css"><br /> .layout-1 {<br /> -moz-box-shadow: 2px 2px 1px #999;<br /> -webkit-box-shadow: 2px 2px 1px #999;<br /> box-shadow: 2px 2px 1px #999;<br /> }<br /> </syntaxhighlight><br /> === Browser Reset CSS ===<br /> Kompass kein Standard Styles für einen Browser Reset erzeugen.<br /> @import "compass/reset";<br /> === Components ===<br /> Auslagern von Teilen geht sehr schön mit Components. Am besten in einen Unterordner. Die Dateinamen beginnen mit einem Unterstrich. Somit weiß Compass, dass es sich um Komponenten handelt. Beim Import läßt man den Unterstrich und das Dattei Suffix (.scss) weg.<br /> components<br /> - _var.scss<br /> - _mixin.scss<br /> _var<br /> <syntaxhighlight lang="css"><br /> $color_1: #333;<br /> ...<br /> </syntaxhighlight><br /> Eingebunden wird es so:<br /> <syntaxhighlight lang="css"><br /> @import "components/var";<br /> @import "components/mixin";<br /> <br /> .layout-1{<br /> color: $color_1;<br /> }<br /> ...<br /> </syntaxhighlight><br /> === Mixins ===<br /> Mit Mixins kann man einfache Funktionen, ähnlich wie Makros, erzeugen. Man definiert die Funktion mit dem Schlüsselwort @mixin und bindet sie später über include ein. Auch Rechenoperationen sind erlaubt.<br /> '''_mixin.scss'''<br /> <syntaxhighlight lang="css"><br /> // Definition der Radius Funktion (bzw. des Mixin)<br /> @mixin radius($r){<br /> -moz-border-radius: $r;<br /> -webkit-border-radius: $r+2px;<br /> border-radius: $r;<br /> }</syntaxhighlight><br /> '''myScss.scss'''<br /> <syntaxhighlight lang="css"><br /> // Radius Mixin nutzen<br /> ...<br /> @include radius(4px);<br /> ...<br /> </syntaxhighlight><br /> erzeugt:<br /> <syntaxhighlight lang="css"><br /> -moz-border-radius: 4px;<br /> -webkit-border-radius: 6px;<br /> border-radius: 4px;<br /> </syntaxhighlight><br /> <br /> === Vererbung ===<br /> Über das Schlüsselwort @extend, kann man Stile vererben.<br /> <syntaxhighlight lang="css"><br /> .error{<br /> @extend .layout-1; // erbe alle Stile von .layout-1<br /> color: red;<br /> }<br /> </syntaxhighlight><br /> <br /> == Sass ohne Konsole ==<br /> === Scout-App ===<br /> https://github.com/scout-app/scout-app<br /> * Nutzt mitlerweile (Sept 2016) node-sass und chokidar (verbessert die watch Funktionalität)<br /> * Unterstützt viele Mixins<br /> <pre><br /> @import "compass"; @Igosuki/compass-mixins<br /> @import "bourbon"; @thoughtbot/bourbon<br /> @import "neat"; @thoughtbot/neat<br /> @import "meyer"; @TheJaredWilcurt/meyer-sass<br /> @import "buttons"; @alexwolfe/Buttons<br /> </pre><br /> <br /> == Bootstrap und SASS ==<br /> Bootstrap wird mit LESS entwickelt, aber es gibt einen offiziellen SASS Port.<br /> <br /> Wenn [[Ruby]] installiert ist kann man einen bootstrap-sass gem installieren, dann kann man später ganz einfach über Compass, Projekte mit Bootstrap erstellen:<br /> <br /> Bootstrap Sass Gem installieren <br /> gem install bootstrap-sass<br /> <br /> Bootstrap Sass zu vorhandenem Compass Projekt hinzufügen<br /> compass install bootstrap -r bootstrap-sass<br /> <br /> Neues Compass Projekt mit Bootstrap-Sass erstellen (Funktioniert bei mir nicht)<br /> compass create my-new-project -r bootstrap-sass --using bootstrap<br /> <br /> == Hinweise zu Ruby ==<br /> '''Achtung''' - da Sass unter Ruby nicht besonders performant ist und inzwischen andere Varianten bereitstehen (z.b. libsass) sollte man auf bessere Tools umsteigen.)<br /> <br /> Sass und Compass werden als Ruby Gems installiert. Viele Entwickler sagen man soll Gems mit RVM (ein Ruby Version Manager) installieren. Damit kann man mehrere Ruby Versionen verwalten und vermeidet Probleme mit fehlenden Schreibrechten.) Für viele Zwecke ist das aber Overkill schon wieder einen Paketmanager zu installieren, wenn man nur ein paar Sachen braucht. Es gibt auch einfachere Methoden.<br /> <br /> Option 1: Weiter Sudo benutzen aber in anderem Ordner. Sudo ist OK wenn Gems global installiert werden dürfen. Allerdings nicht in /usr/bin. Man kann Sie stattdessen in /usr/local/bin speichern. Dort installiert auch homebrew sein Zeug.<br /> <br /> Beispiel:<br /> <br /> sudo gem install fakes3 -n/usr/local/bin<br /> <br /> Gems in /usr/local/bin kann jeder User im System nutzen, wenn der Ordner in der PATH Variable ist.<br /> <br /> Option 2: OHNE Sudo im home Verzeichnis<br /> <br /> Gems sollen in ~/.gem gespeichert werden und binaries in ~/bin (zu PATH hinzufügen).<br /> <br /> gem install fakes3 --user-install -n~/bin<br /> <br /> Either way, you can add these parameters to your ~/.gemrc so you don't have to remember them:<br /> <br /> gem: -n/usr/local/bin<br /> i.e. echo "gem: -n/usr/local/bin" >> ~/.gemrc<br /> <br /> or<br /> <br /> gem: --user-install -n~/bin<br /> i.e. echo "gem: --user-install -n~/bin" >> ~/.gemrc<br /> <br /> (Tip: You can also throw in --no-document to skip generating Ruby developer documentation.)</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Aligator_(ProcessWire)&diff=23252 Aligator (ProcessWire) 2018-08-12T06:59:39Z

<p>37.49.33.174: /* UIkit Offcanvas Navigation */</p> <hr /> <div>Modul zum Erzeugen von Navigationen. Für meinen Geschmack sehr flexibel und übersichtlich. Bei Standard Menüs etwas mehr PHP Kenntnisse erforderlich. Bei komplexeren Markups und Anforderungen aber erheblich einfacher als bei MarkupSimpleNavigation vom selben Autor.<br /> == Links ==<br /> https://processwire.com/talk/topic/13688-aligator/<br /> https://github.com/somatonic/Aligator<br /> == Funktionsweise ==<br /> === Options Array ===<br /> <br /> The options array can contain a configuration for each level separately. So each entry represents a level.<br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(...), // level 1<br /> array(...), // level 2<br /> array(...), // level 3<br /> );<br /> </syntaxhighlight><br /> <br /> === Render Methode ===<br /> The render method accepts four arguments and returns the markup as a string:<br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> Root kann sowohl eine Seite als auch ein PageArray sein.<br /> <br /> === Selektoren und Callback ===<br /> The options array is meant as a configuration for each level and item and contains two entries<br /> <br /> selector<br /> <br /> Is a regular ProcessWire selector used to '''filter children for this level'''<br /> <br /> callback<br /> <br /> Is an anonymous function that will get '''called for each page''' the module renders. It recieves two arguments for you to use: '''item and level''' where $item would be the current rendered child page object and $level the current level.<br /> <br /> The callback function '''must return an associative array''' containing the '''markups for the current entry and level'''. Since this is a function, you can use your own logic and conditions to determine the markup you want to render.<br /> <br /> <br /> <br /> === Default options ===<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> // any code here to determine the output<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul>",<br /> "wrapperClose" => "</ul>"<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> The array you return in the callback contains various predefined keys to define the markup. They're pretty self explanatory. If you omit any of these in the returned array, the module will take the default.<br /> <br /> === Praktischer Einsatz ===<br /> <br /> Wie in PW üblich entweder direkt das Modul aufrufen oder ein Objekt erzeugen:<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->get("Aligator");<br /> // $nav = $modules->Aligator; // Kurzform<br /> $menuOptions = array(...);<br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> Oder direkt rendern <br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> oder auch <br /> === Overwrite Default Options ===<br /> <br /> You can '''overwrite the default options''' the module uses '''by using the setDefaultOptions() method''':<br /> <br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ol>",<br /> "wrapperClose" => "</ol>",<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> === Beispiele ===<br /> ==== Default Options überschreiben ====<br /> <br /> Here we '''set the default options'''. This will be used to render the markup when the level it renders isn't defined in the options array. In this example we set only the first level (1 entry) in the options. It will overwrite the default here only using a different "wrapperOpen". After that '''the default will be used to render the further levels'''<br /> .<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> <br /> $nav->setDefaultOptions(array(<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> if($level < 3) $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown$level'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> $menuOptions = array(<br /> array( // overwrite for first level<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "wrapperOpen" => "<ul class='mainnav'>"<br /> );<br /> },<br /> )<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Level unterschiedlich rendern ====<br /> <br /> Here we let the default options the module has and '''specify explicit the options for each level.'''<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array( // level 1<br /> "selector" => "template=basic-page|domain_root",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title $item->template</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='mainnav'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 2<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown2'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 3<br /> "selector" => "template=basic-page|entry",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown3'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Homepage hinzufügen ====<br /> <br /> <syntaxhighlight lang="php"><br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> $menuPages->add($home->children());<br /> $menuPages->prepend($home);<br /> <br /> $content .= $modules->Aligator->render($menuPages, array(<br /> array( // level1<br /> "selector" => ""<br /> ),<br /> array( // level2 : don't render the children of "home"<br /> "selector" => "parent!=1"<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> oder<br /> <br /> <syntaxhighlight lang="php"><br /> $homeUrl = $pages->get(1)->url;<br /> <br /> $nav = $modules->Aligator->render($pages->get(1), array(<br /> array( // level1<br /> "selector" => "",<br /> "callback" => function($item, $level) use($homeUrl){<br /> return array(<br /> "wrapperOpen" => "<ul><li><a href='$homeUrl'>Home</a></li>",<br /> );<br /> }<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> What else<br /> <br /> Nothing else. With these spare examples you should be able grasp the concept and use it and render navigations like crazy.<br /> <br /> Any feedback or improvements are welcome.<br /> <br /> == Praxis Beispiele ==<br /> <br /> === UIkit Metamenu ===<br /> <br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> $selector = 'menus.id=2';//only metamenu items<br /> $nav = $modules->Aligator;<br /> $nav->setDefaultOptions(array(<br /> 'selector' => $selector,<br /> 'callback' => function($item, $level){<br /> $item === wire('page') ? $liClasses = 'el-item uk-active' : $liClasses = 'el-item';<br /> return array(<br /> 'item' => '<a class="el-link" href="'.$item->url.'">'.$item->title.'</a>',<br /> 'listOpen' => '<li class="'.$liClasses.'">',<br /> 'listClose' => '</li>',<br /> 'wrapperOpen' => '<ul class="uk-subnav uk-margin-remove-bottom uk-subnav-divider uk-flex-center" uk-margin>',<br /> 'wrapperClose' => '</ul>',<br /> );<br /> })<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root,array(), $levels = 1, $collaped = true);<br /> echo $markup;<br /> </syntaxhighlight><br /> <br /> === UIkit Navigation ===<br /> '''header.inc'''<br /> <syntaxhighlight lang="php"><br /> <header class='uk-background-transparent'><br /> <div id='masthead' class="uk-container"><br /> <?php include('nav-navbar-mobile.inc'); ?><br /> <?php include('nav-navbar-desktop.inc'); ?><br /> </div><br /> </header><br /> </syntaxhighlight><br /> <br /> '''nav-navbar-mobile.inc'''<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> ?><br /> <nav id='navbar-mobile' class="uk-navbar-container uk-navbar-transparent uk-hidden@m" uk-navbar><br /> <div class="uk-navbar-left"><br /> <div class="uk-navbar-toggle"><br /> <a id='offcanvas-toggle' class='' href="#offcanvas-nav" uk-toggle><br /> <div uk-navbar-toggle-icon></div><br /> </a><br /> </div><br /> </div><br /> <div class="uk-navbar-center"><br /> <div class="uk-navbar-item"><br /> <a class="uk-logo" href="<?= $root ?>"><br /> <img class="logo" src="<?= $brandmarkImage->url?>" class="uk-responsive-height" alt="<?=$brandmarkImage->description?>"><br /> </a><br /> </div><br /> </div><br /> </nav><br /> <br /> </syntaxhighlight><br /> nav-navbar-desktop.inc<br /> <syntaxhighlight lang="php"><br /> TODO<br /> </syntaxhighlight><br /> <syntaxhighlight lang="php"><br /> TODO<br /> </syntaxhighlight><br /> <br /> === Therapiezirkel (Main Menu) ===<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> $nav = $modules->Aligator;<br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> <br /> $nav->enableStates = true; // enable states ("parent current has_children first last")<br /> $nav->levels = 2; // set max levels to render<br /> <br /> // the default options for all levels<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> <br /> $ddAttribute = "";<br /> $ddLink = "";<br /> if( $item->numChildren() ) {<br /> $ddAttribute = " data-ix='open-dd-res'";<br /> $ddLink = '<a href="#" class="w-inline-block arrow-ico-res"><i class="fa fa-angle-down"></i></a>';<br /> }<br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a>$ddLink</div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> // render the menu<br /> $markup = $nav->render($home, array(<br /> array( // LEVEL 1<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level) use($home){<br /> return array(<br /> //add homepage<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'><br /> <li><div class='w-clearfix nav-res-link'><a href='$home->httpUrl' class='res-txt animsition-link'>$home->title</a></div></li>"<br /> );<br /> }<br /> ),<br /> array( // LEVEL 2<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> $ddAttribute = "";<br /> <br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a></div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> ));<br /> <br /> <br /> <br /> echo '<br /> <br /> <div class="w-hidden-main"><br /> <div class="responsive-menu"><br /> <div class="w-container"><br /> <a href="index.html" class="w-inline-block brand-logo more-margin animsition-link"><br /> <img width="135" src="'.$config->urls->templates.'images/logo-therapiezirkel.png" alt="logo"><br /> </a><br /> <div data-ix="open-responsive-menu" class="hamburger"><br /> <div class="w-embed"><br /> <button class="c-hamburger c-hamburger--htx"><br /> <span>toggle menu</span><br /> </button><br /> </div><br /> </div><br /> </div><br /> </div><br /> <br /> <nav class="responsive-nav"><br /> <div class="w-container"><br /> '.$markup.'<br /> </div><br /> </nav><br /> </div><br /> <br /> <br /> ';<br /> <br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Aligator_(ProcessWire)&diff=23251 Aligator (ProcessWire) 2018-08-12T05:38:43Z

<p>37.49.33.174: /* Praxis Beispiele */</p> <hr /> <div>Modul zum Erzeugen von Navigationen. Für meinen Geschmack sehr flexibel und übersichtlich. Bei Standard Menüs etwas mehr PHP Kenntnisse erforderlich. Bei komplexeren Markups und Anforderungen aber erheblich einfacher als bei MarkupSimpleNavigation vom selben Autor.<br /> == Links ==<br /> https://processwire.com/talk/topic/13688-aligator/<br /> https://github.com/somatonic/Aligator<br /> == Funktionsweise ==<br /> === Options Array ===<br /> <br /> The options array can contain a configuration for each level separately. So each entry represents a level.<br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(...), // level 1<br /> array(...), // level 2<br /> array(...), // level 3<br /> );<br /> </syntaxhighlight><br /> <br /> === Render Methode ===<br /> The render method accepts four arguments and returns the markup as a string:<br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> Root kann sowohl eine Seite als auch ein PageArray sein.<br /> <br /> === Selektoren und Callback ===<br /> The options array is meant as a configuration for each level and item and contains two entries<br /> <br /> selector<br /> <br /> Is a regular ProcessWire selector used to '''filter children for this level'''<br /> <br /> callback<br /> <br /> Is an anonymous function that will get '''called for each page''' the module renders. It recieves two arguments for you to use: '''item and level''' where $item would be the current rendered child page object and $level the current level.<br /> <br /> The callback function '''must return an associative array''' containing the '''markups for the current entry and level'''. Since this is a function, you can use your own logic and conditions to determine the markup you want to render.<br /> <br /> <br /> <br /> === Default options ===<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> // any code here to determine the output<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul>",<br /> "wrapperClose" => "</ul>"<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> The array you return in the callback contains various predefined keys to define the markup. They're pretty self explanatory. If you omit any of these in the returned array, the module will take the default.<br /> <br /> === Praktischer Einsatz ===<br /> <br /> Wie in PW üblich entweder direkt das Modul aufrufen oder ein Objekt erzeugen:<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->get("Aligator");<br /> // $nav = $modules->Aligator; // Kurzform<br /> $menuOptions = array(...);<br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> Oder direkt rendern <br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> oder auch <br /> === Overwrite Default Options ===<br /> <br /> You can '''overwrite the default options''' the module uses '''by using the setDefaultOptions() method''':<br /> <br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ol>",<br /> "wrapperClose" => "</ol>",<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> === Beispiele ===<br /> ==== Default Options überschreiben ====<br /> <br /> Here we '''set the default options'''. This will be used to render the markup when the level it renders isn't defined in the options array. In this example we set only the first level (1 entry) in the options. It will overwrite the default here only using a different "wrapperOpen". After that '''the default will be used to render the further levels'''<br /> .<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> <br /> $nav->setDefaultOptions(array(<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> if($level < 3) $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown$level'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> $menuOptions = array(<br /> array( // overwrite for first level<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "wrapperOpen" => "<ul class='mainnav'>"<br /> );<br /> },<br /> )<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Level unterschiedlich rendern ====<br /> <br /> Here we let the default options the module has and '''specify explicit the options for each level.'''<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array( // level 1<br /> "selector" => "template=basic-page|domain_root",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title $item->template</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='mainnav'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 2<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown2'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 3<br /> "selector" => "template=basic-page|entry",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown3'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Homepage hinzufügen ====<br /> <br /> <syntaxhighlight lang="php"><br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> $menuPages->add($home->children());<br /> $menuPages->prepend($home);<br /> <br /> $content .= $modules->Aligator->render($menuPages, array(<br /> array( // level1<br /> "selector" => ""<br /> ),<br /> array( // level2 : don't render the children of "home"<br /> "selector" => "parent!=1"<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> oder<br /> <br /> <syntaxhighlight lang="php"><br /> $homeUrl = $pages->get(1)->url;<br /> <br /> $nav = $modules->Aligator->render($pages->get(1), array(<br /> array( // level1<br /> "selector" => "",<br /> "callback" => function($item, $level) use($homeUrl){<br /> return array(<br /> "wrapperOpen" => "<ul><li><a href='$homeUrl'>Home</a></li>",<br /> );<br /> }<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> What else<br /> <br /> Nothing else. With these spare examples you should be able grasp the concept and use it and render navigations like crazy.<br /> <br /> Any feedback or improvements are welcome.<br /> <br /> == Praxis Beispiele ==<br /> <br /> === UIkit Metamenu ===<br /> <br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> $selector = 'menus.id=2';//only metamenu items<br /> $nav = $modules->Aligator;<br /> $nav->setDefaultOptions(array(<br /> 'selector' => $selector,<br /> 'callback' => function($item, $level){<br /> $item === wire('page') ? $liClasses = 'el-item uk-active' : $liClasses = 'el-item';<br /> return array(<br /> 'item' => '<a class="el-link" href="'.$item->url.'">'.$item->title.'</a>',<br /> 'listOpen' => '<li class="'.$liClasses.'">',<br /> 'listClose' => '</li>',<br /> 'wrapperOpen' => '<ul class="uk-subnav uk-margin-remove-bottom uk-subnav-divider uk-flex-center" uk-margin>',<br /> 'wrapperClose' => '</ul>',<br /> );<br /> })<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root,array(), $levels = 1, $collaped = true);<br /> echo $markup;<br /> </syntaxhighlight><br /> <br /> === UIkit Offcanvas Navigation ===<br /> '''nav-offcanvas-toggle.inc'''<br /> <syntaxhighlight lang="php"><br /> <br /> <a id='offcanvas-toggle' class='uk-hidden@m' href="#offcanvas-nav" uk-toggle><br /> <?=ukIcon('menu', 1.3)?><br /> </a><br /> </syntaxhighlight><br /> <br /> '''nav-offcanvas.inc'''<br /> <syntaxhighlight lang="php"><br /> <br /> </syntaxhighlight><br /> <br /> === Therapiezirkel (Main Menu) ===<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> $nav = $modules->Aligator;<br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> <br /> $nav->enableStates = true; // enable states ("parent current has_children first last")<br /> $nav->levels = 2; // set max levels to render<br /> <br /> // the default options for all levels<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> <br /> $ddAttribute = "";<br /> $ddLink = "";<br /> if( $item->numChildren() ) {<br /> $ddAttribute = " data-ix='open-dd-res'";<br /> $ddLink = '<a href="#" class="w-inline-block arrow-ico-res"><i class="fa fa-angle-down"></i></a>';<br /> }<br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a>$ddLink</div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> // render the menu<br /> $markup = $nav->render($home, array(<br /> array( // LEVEL 1<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level) use($home){<br /> return array(<br /> //add homepage<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'><br /> <li><div class='w-clearfix nav-res-link'><a href='$home->httpUrl' class='res-txt animsition-link'>$home->title</a></div></li>"<br /> );<br /> }<br /> ),<br /> array( // LEVEL 2<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> $ddAttribute = "";<br /> <br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a></div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> ));<br /> <br /> <br /> <br /> echo '<br /> <br /> <div class="w-hidden-main"><br /> <div class="responsive-menu"><br /> <div class="w-container"><br /> <a href="index.html" class="w-inline-block brand-logo more-margin animsition-link"><br /> <img width="135" src="'.$config->urls->templates.'images/logo-therapiezirkel.png" alt="logo"><br /> </a><br /> <div data-ix="open-responsive-menu" class="hamburger"><br /> <div class="w-embed"><br /> <button class="c-hamburger c-hamburger--htx"><br /> <span>toggle menu</span><br /> </button><br /> </div><br /> </div><br /> </div><br /> </div><br /> <br /> <nav class="responsive-nav"><br /> <div class="w-container"><br /> '.$markup.'<br /> </div><br /> </nav><br /> </div><br /> <br /> <br /> ';<br /> <br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Aligator_(ProcessWire)&diff=23250 Aligator (ProcessWire) 2018-08-12T05:30:51Z

<p>37.49.33.174: /* Beispiele */</p> <hr /> <div>Modul zum Erzeugen von Navigationen. Für meinen Geschmack sehr flexibel und übersichtlich. Bei Standard Menüs etwas mehr PHP Kenntnisse erforderlich. Bei komplexeren Markups und Anforderungen aber erheblich einfacher als bei MarkupSimpleNavigation vom selben Autor.<br /> == Links ==<br /> https://processwire.com/talk/topic/13688-aligator/<br /> https://github.com/somatonic/Aligator<br /> == Funktionsweise ==<br /> === Options Array ===<br /> <br /> The options array can contain a configuration for each level separately. So each entry represents a level.<br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(...), // level 1<br /> array(...), // level 2<br /> array(...), // level 3<br /> );<br /> </syntaxhighlight><br /> <br /> === Render Methode ===<br /> The render method accepts four arguments and returns the markup as a string:<br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> Root kann sowohl eine Seite als auch ein PageArray sein.<br /> <br /> === Selektoren und Callback ===<br /> The options array is meant as a configuration for each level and item and contains two entries<br /> <br /> selector<br /> <br /> Is a regular ProcessWire selector used to '''filter children for this level'''<br /> <br /> callback<br /> <br /> Is an anonymous function that will get '''called for each page''' the module renders. It recieves two arguments for you to use: '''item and level''' where $item would be the current rendered child page object and $level the current level.<br /> <br /> The callback function '''must return an associative array''' containing the '''markups for the current entry and level'''. Since this is a function, you can use your own logic and conditions to determine the markup you want to render.<br /> <br /> <br /> <br /> === Default options ===<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> // any code here to determine the output<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul>",<br /> "wrapperClose" => "</ul>"<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> The array you return in the callback contains various predefined keys to define the markup. They're pretty self explanatory. If you omit any of these in the returned array, the module will take the default.<br /> <br /> === Praktischer Einsatz ===<br /> <br /> Wie in PW üblich entweder direkt das Modul aufrufen oder ein Objekt erzeugen:<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->get("Aligator");<br /> // $nav = $modules->Aligator; // Kurzform<br /> $menuOptions = array(...);<br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> Oder direkt rendern <br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> oder auch <br /> === Overwrite Default Options ===<br /> <br /> You can '''overwrite the default options''' the module uses '''by using the setDefaultOptions() method''':<br /> <br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ol>",<br /> "wrapperClose" => "</ol>",<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> === Beispiele ===<br /> ==== Default Options überschreiben ====<br /> <br /> Here we '''set the default options'''. This will be used to render the markup when the level it renders isn't defined in the options array. In this example we set only the first level (1 entry) in the options. It will overwrite the default here only using a different "wrapperOpen". After that '''the default will be used to render the further levels'''<br /> .<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> <br /> $nav->setDefaultOptions(array(<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> if($level < 3) $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown$level'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> $menuOptions = array(<br /> array( // overwrite for first level<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "wrapperOpen" => "<ul class='mainnav'>"<br /> );<br /> },<br /> )<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Level unterschiedlich rendern ====<br /> <br /> Here we let the default options the module has and '''specify explicit the options for each level.'''<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array( // level 1<br /> "selector" => "template=basic-page|domain_root",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title $item->template</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='mainnav'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 2<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown2'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 3<br /> "selector" => "template=basic-page|entry",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown3'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Homepage hinzufügen ====<br /> <br /> <syntaxhighlight lang="php"><br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> $menuPages->add($home->children());<br /> $menuPages->prepend($home);<br /> <br /> $content .= $modules->Aligator->render($menuPages, array(<br /> array( // level1<br /> "selector" => ""<br /> ),<br /> array( // level2 : don't render the children of "home"<br /> "selector" => "parent!=1"<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> oder<br /> <br /> <syntaxhighlight lang="php"><br /> $homeUrl = $pages->get(1)->url;<br /> <br /> $nav = $modules->Aligator->render($pages->get(1), array(<br /> array( // level1<br /> "selector" => "",<br /> "callback" => function($item, $level) use($homeUrl){<br /> return array(<br /> "wrapperOpen" => "<ul><li><a href='$homeUrl'>Home</a></li>",<br /> );<br /> }<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> What else<br /> <br /> Nothing else. With these spare examples you should be able grasp the concept and use it and render navigations like crazy.<br /> <br /> Any feedback or improvements are welcome.<br /> <br /> == Praxis Beispiele ==<br /> <br /> === UIkit Metamenu ===<br /> <br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> $selector = 'menus.id=2';//only metamenu items<br /> $nav = $modules->Aligator;<br /> $nav->setDefaultOptions(array(<br /> 'selector' => $selector,<br /> 'callback' => function($item, $level){<br /> $item === wire('page') ? $liClasses = 'el-item uk-active' : $liClasses = 'el-item';<br /> return array(<br /> 'item' => '<a class="el-link" href="'.$item->url.'">'.$item->title.'</a>',<br /> 'listOpen' => '<li class="'.$liClasses.'">',<br /> 'listClose' => '</li>',<br /> 'wrapperOpen' => '<ul class="uk-subnav uk-margin-remove-bottom uk-subnav-divider uk-flex-center" uk-margin>',<br /> 'wrapperClose' => '</ul>',<br /> );<br /> })<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root,array(), $levels = 1, $collaped = true);<br /> echo $markup;<br /> </syntaxhighlight><br /> <br /> === Therapiezirkel (Main Menu) ===<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> $nav = $modules->Aligator;<br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> <br /> $nav->enableStates = true; // enable states ("parent current has_children first last")<br /> $nav->levels = 2; // set max levels to render<br /> <br /> // the default options for all levels<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> <br /> $ddAttribute = "";<br /> $ddLink = "";<br /> if( $item->numChildren() ) {<br /> $ddAttribute = " data-ix='open-dd-res'";<br /> $ddLink = '<a href="#" class="w-inline-block arrow-ico-res"><i class="fa fa-angle-down"></i></a>';<br /> }<br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a>$ddLink</div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> // render the menu<br /> $markup = $nav->render($home, array(<br /> array( // LEVEL 1<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level) use($home){<br /> return array(<br /> //add homepage<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'><br /> <li><div class='w-clearfix nav-res-link'><a href='$home->httpUrl' class='res-txt animsition-link'>$home->title</a></div></li>"<br /> );<br /> }<br /> ),<br /> array( // LEVEL 2<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> $ddAttribute = "";<br /> <br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a></div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> ));<br /> <br /> <br /> <br /> echo '<br /> <br /> <div class="w-hidden-main"><br /> <div class="responsive-menu"><br /> <div class="w-container"><br /> <a href="index.html" class="w-inline-block brand-logo more-margin animsition-link"><br /> <img width="135" src="'.$config->urls->templates.'images/logo-therapiezirkel.png" alt="logo"><br /> </a><br /> <div data-ix="open-responsive-menu" class="hamburger"><br /> <div class="w-embed"><br /> <button class="c-hamburger c-hamburger--htx"><br /> <span>toggle menu</span><br /> </button><br /> </div><br /> </div><br /> </div><br /> </div><br /> <br /> <nav class="responsive-nav"><br /> <div class="w-container"><br /> '.$markup.'<br /> </div><br /> </nav><br /> </div><br /> <br /> <br /> ';<br /> <br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Aligator_(ProcessWire)&diff=23249 Aligator (ProcessWire) 2018-08-09T10:25:42Z

<p>37.49.33.174: /* Komplettes Beispiel 1 */</p> <hr /> <div>Modul zum Erzeugen von Navigationen. Für meinen Geschmack sehr flexibel und übersichtlich. Bei Standard Menüs etwas mehr PHP Kenntnisse erforderlich. Bei komplexeren Markups und Anforderungen aber erheblich einfacher als bei MarkupSimpleNavigation vom selben Autor.<br /> == Links ==<br /> https://processwire.com/talk/topic/13688-aligator/<br /> https://github.com/somatonic/Aligator<br /> == Funktionsweise ==<br /> === Options Array ===<br /> <br /> The options array can contain a configuration for each level separately. So each entry represents a level.<br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(...), // level 1<br /> array(...), // level 2<br /> array(...), // level 3<br /> );<br /> </syntaxhighlight><br /> <br /> === Render Methode ===<br /> The render method accepts four arguments and returns the markup as a string:<br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> Root kann sowohl eine Seite als auch ein PageArray sein.<br /> <br /> === Selektoren und Callback ===<br /> The options array is meant as a configuration for each level and item and contains two entries<br /> <br /> selector<br /> <br /> Is a regular ProcessWire selector used to '''filter children for this level'''<br /> <br /> callback<br /> <br /> Is an anonymous function that will get '''called for each page''' the module renders. It recieves two arguments for you to use: '''item and level''' where $item would be the current rendered child page object and $level the current level.<br /> <br /> The callback function '''must return an associative array''' containing the '''markups for the current entry and level'''. Since this is a function, you can use your own logic and conditions to determine the markup you want to render.<br /> <br /> <br /> <br /> === Default options ===<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> // any code here to determine the output<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul>",<br /> "wrapperClose" => "</ul>"<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> The array you return in the callback contains various predefined keys to define the markup. They're pretty self explanatory. If you omit any of these in the returned array, the module will take the default.<br /> <br /> === Praktischer Einsatz ===<br /> <br /> Wie in PW üblich entweder direkt das Modul aufrufen oder ein Objekt erzeugen:<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->get("Aligator");<br /> // $nav = $modules->Aligator; // Kurzform<br /> $menuOptions = array(...);<br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> Oder direkt rendern <br /> $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);<br /> oder auch <br /> === Overwrite Default Options ===<br /> <br /> You can '''overwrite the default options''' the module uses '''by using the setDefaultOptions() method''':<br /> <br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ol>",<br /> "wrapperClose" => "</ol>",<br /> );<br /> }<br /> )<br /> );<br /> </syntaxhighlight><br /> <br /> === Beispiele ===<br /> ==== Default Options überschreiben ====<br /> <br /> Here we '''set the default options'''. This will be used to render the markup when the level it renders isn't defined in the options array. In this example we set only the first level (1 entry) in the options. It will overwrite the default here only using a different "wrapperOpen". After that '''the default will be used to render the further levels'''<br /> .<br /> <syntaxhighlight lang="php"><br /> $nav = $modules->Aligator;<br /> <br /> $nav->setDefaultOptions(array(<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> if($level < 3) $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown$level'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> $menuOptions = array(<br /> array( // overwrite for first level<br /> "selector" => "",<br /> "callback" => function($item, $level){<br /> return array(<br /> "wrapperOpen" => "<ul class='mainnav'>"<br /> );<br /> },<br /> )<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Level unterschiedlich rendern ====<br /> <br /> Here we let the default options the module has and '''specify explicit the options for each level.'''<br /> <br /> <syntaxhighlight lang="php"><br /> $menuOptions = array(<br /> array( // level 1<br /> "selector" => "template=basic-page|domain_root",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title $item->template</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='mainnav'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 2<br /> "selector" => "template=basic-page",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> $class .= $item->numChildren("template=basic-page") ? " has_children" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown2'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> array( // level 3<br /> "selector" => "template=basic-page|entry",<br /> "callback" => function($item, $level){<br /> $class = $item === wire("page") ? " current" : "";<br /> $class .= wire("page")->parents->has($item) ? " parent" : "";<br /> return array(<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li class='level$level$class'>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='dropdown3'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> },<br /> ),<br /> );<br /> <br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);<br /> </syntaxhighlight><br /> <br /> ==== Homepage hinzufügen ====<br /> <br /> <syntaxhighlight lang="php"><br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> $menuPages->add($home->children());<br /> $menuPages->prepend($home);<br /> <br /> $content .= $modules->Aligator->render($menuPages, array(<br /> array( // level1<br /> "selector" => ""<br /> ),<br /> array( // level2 : don't render the children of "home"<br /> "selector" => "parent!=1"<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> oder<br /> <br /> <syntaxhighlight lang="php"><br /> $homeUrl = $pages->get(1)->url;<br /> <br /> $nav = $modules->Aligator->render($pages->get(1), array(<br /> array( // level1<br /> "selector" => "",<br /> "callback" => function($item, $level) use($homeUrl){<br /> return array(<br /> "wrapperOpen" => "<ul><li><a href='$homeUrl'>Home</a></li>",<br /> );<br /> }<br /> )<br /> ), 3);<br /> </syntaxhighlight><br /> <br /> What else<br /> <br /> Nothing else. With these spare examples you should be able grasp the concept and use it and render navigations like crazy.<br /> <br /> Any feedback or improvements are welcome.<br /> <br /> ==== Metamenu ====<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> $nav = $modules->get("Aligator");<br /> // $nav = $modules->Aligator; // Kurzform<br /> $menuOptions = array(<br /> "selector" => "menus.id=2"<br /> );<br /> $root = $pages->get("/");<br /> $markup = $nav->render($root, $menuOptions, $levels = 1, $collaped = true);<br /> <br /> /*<br /> Default Options:<br /> "item" => "<a href='$item->url'>$item->title</a>",<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul>",<br /> "wrapperClose" => "</ul>"<br /> */<br /> <br /> /*<br /> Default States:<br /> "is_parent" => "parent",<br /> "is_current" => "current",<br /> "has_children" => "has_children",<br /> "is_first" => "first",<br /> "is_last" => "last",<br /> <br /> <br /> */<br /> <br /> echo $markup;<br /> </syntaxhighlight><br /> <br /> ==== Therapiezirkel (Main Menu) ====<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> $nav = $modules->Aligator;<br /> $menuPages = new PageArray();<br /> $home = $pages->get("/");<br /> <br /> $nav->enableStates = true; // enable states ("parent current has_children first last")<br /> $nav->levels = 2; // set max levels to render<br /> <br /> // the default options for all levels<br /> $nav->setDefaultOptions(array(<br /> "selector" => "",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> <br /> $ddAttribute = "";<br /> $ddLink = "";<br /> if( $item->numChildren() ) {<br /> $ddAttribute = " data-ix='open-dd-res'";<br /> $ddLink = '<a href="#" class="w-inline-block arrow-ico-res"><i class="fa fa-angle-down"></i></a>';<br /> }<br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a>$ddLink</div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> );<br /> <br /> // render the menu<br /> $markup = $nav->render($home, array(<br /> array( // LEVEL 1<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level) use($home){<br /> return array(<br /> //add homepage<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'><br /> <li><div class='w-clearfix nav-res-link'><a href='$home->httpUrl' class='res-txt animsition-link'>$home->title</a></div></li>"<br /> );<br /> }<br /> ),<br /> array( // LEVEL 2<br /> "selector" => "menus.id=1",<br /> "callback" => function($item, $level, $states){<br /> // $states is a string of item state classes to insert somewhere<br /> $classes = $states ? " class='$states'" : "";<br /> $template = $item->template;<br /> // Handle Dropdown $items<br /> $ddAttribute = "";<br /> <br /> // Handle Placeholder code<br /> if($template->name == "placeholder"){<br /> $itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a></div>";<br /> }<br /> else {<br /> $itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";<br /> }<br /> return array(<br /> // todo animsition-link only when has children<br /> "item" => $itemString,<br /> "listOpen" => "<li$classes>",<br /> "listClose" => "</li>",<br /> "wrapperOpen" => "<ul class='w-list-unstyled dd-res'>",<br /> "wrapperClose" => "</ul>",<br /> );<br /> }<br /> )<br /> ));<br /> <br /> <br /> <br /> echo '<br /> <br /> <div class="w-hidden-main"><br /> <div class="responsive-menu"><br /> <div class="w-container"><br /> <a href="index.html" class="w-inline-block brand-logo more-margin animsition-link"><br /> <img width="135" src="'.$config->urls->templates.'images/logo-therapiezirkel.png" alt="logo"><br /> </a><br /> <div data-ix="open-responsive-menu" class="hamburger"><br /> <div class="w-embed"><br /> <button class="c-hamburger c-hamburger--htx"><br /> <span>toggle menu</span><br /> </button><br /> </div><br /> </div><br /> </div><br /> </div><br /> <br /> <nav class="responsive-nav"><br /> <div class="w-container"><br /> '.$markup.'<br /> </div><br /> </nav><br /> </div><br /> <br /> <br /> ';<br /> <br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Navigation_Beispiele&diff=23248 ProcessWire - Navigation Beispiele 2018-08-09T10:22:50Z

<p>37.49.33.174: </p> <hr /> <div>== Siehe auch ==<br /> [[ProcessWire - Navigation Snippets]]<br /> http://wiki.zone30.info/wikizone/index.php?title=Aligator_(ProcessWire)#Komplettes_Beispiel_1<br /> <br /> == Mit MarkupSimpleNavigation Modul ==<br /> === Multilevel Navigation mit diversen Klassen ===<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> $prependHomepage = 0;<br /> foreach($homepage->menus as $item) {<br /> if($item->id == 1) $prependHomepage = 1;<br /> }<br /> if($prependHomepage) {<br /> $pa = $homepage->and($homepage->children("menus.id=1")); <br /> }else $pa = $homepage->children("menus.id=1");<br /> // additional MarkupSimpleNavigation Filter<br /> $selector = 'menus.id=1'; // filter works only for first level because markup simple navigation renders children by itself. This is why we need extra selector<br /> <br /> $outer_tpl = '<ul class=" ul-nav">||</ul>';<br /> $inner_tpl = '<ul>||</ul>';<br /> $list_tpl = '<li%s>||</li>';//%s is where classes form parent_class etc. goes<br /> $item_tpl = '<a href="{url}" class="nav-link">{headline|title}</a>';<br /> $item_current_tpl ='<a href="{url}" class="current nav-link">{headline|title}</a>';<br /> <br /> $myMenu = $modules->get("MarkupSimpleNavigation"); // load the module<br /> $options = array(<br /> 'parent_class' => 'parent', // goes in li classes<br /> 'current_class' => 'current', // goes in li classes<br /> 'has_children_class' => 'has_children', // goes in li classes<br /> 'levels' => true,<br /> 'levels_prefix' => 'l-',//goes in li classes<br /> 'max_levels' => 4,<br /> 'firstlast' => true,<br /> 'collapsed' => false,<br /> 'show_root' => false,<br /> 'outer_tpl' => $outer_tpl, // usually the ul part<br /> 'inner_tpl' => $inner_tpl, // usually inner ul tags<br /> 'list_tpl' => $list_tpl,<br /> 'list_field_class' => '',<br /> 'item_tpl' => $item_tpl,<br /> 'item_current_tpl' => $item_current_tpl,<br /> 'xtemplates' => '',<br /> 'selector' => $selector,<br /> 'date_format' => 'd.m.Y',<br /> 'code_formatting' => false,<br /> 'debug' => false<br /> );<br /> $out = '<br /> <nav><br /> '.$myMenu->render($options,null,$pa).'<br /> </nav><br /> ';<br /> echo $out;<br /> </syntaxhighlight><br /> <br /> === Sidebar Navigation für MaterializeCSS ===<br /> Beispiel orig. aus prantner.de. Nutzt ein Selectfeld um im Backen zu bestimmen ob eine Seite aufgeführt wird. <br /> <br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> $pages->get(1001)->my_selector = "template=projects";<br /> $pa = $homepage->and($homepage->children("menus.id=1"));<br /> <br /> <br /> $outer_tpl = '<ul id="slide-out" class="sidenav">||</ul>';<br /> //if($configpage->nav_type->value == 1) $outer_tpl = '<ul id="slide-out" class="sidenav sidenav-fixed">||</ul>';<br /> $sideMenu = $modules->get("MarkupSimpleNavigation"); // load the module<br /> $options = array(<br /> 'parent_class' => 'parent',<br /> 'current_class' => 'current',<br /> 'has_children_class' => 'has_children',<br /> 'levels' => true,<br /> 'levels_prefix' => 'l-',<br /> 'max_levels' => 4,<br /> 'firstlast' => true,<br /> 'collapsed' => false,<br /> 'show_root' => false,<br /> 'selector' => '',<br /> 'selector_field' => 'nav_selector',<br /> 'outer_tpl' => $outer_tpl,<br /> 'inner_tpl' => '<ul>||</ul>',<br /> 'list_tpl' => '<li%s>||</li>',<br /> 'list_field_class' => '',<br /> 'item_tpl' => '<a href="{url}">{title}</a>',<br /> 'item_current_tpl' => '<a class="cur" href="{url}">{title}</a>',<br /> 'xtemplates' => '',<br /> 'xitem_tpl' => '<a href="{url}">{title}</a>',<br /> 'xitem_current_tpl' => '<span class="cur">{title}</span>',<br /> 'date_format' => 'd.m.Y',<br /> 'code_formatting' => false,<br /> 'debug' => false<br /> );<br /> $out = $sideMenu->render($options,null,$pa);<br /> <br /> $out .= '<br /> <a href="#" data-target="slide-out" class="sidenav-trigger" style="margin-left:0;"><i class="material-icons">menu</i></a>';<br /> echo $out;<br /> </syntaxhighlight><br /> <br /> <br /> == Previous Next Navigation mit Auswahlfeld im Backend ==<br /> '''Main Template'''<br /> <syntaxhighlight lang="php"><br /> <br /> <?php include("partials/nav/nav-page.inc"); ?><br /> </syntaxhighlight><br /> <br /> '''nav-page.inc'''<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> /*<br /> * Page Prev Next Navigation<br /> */<br /> $next = '';<br /> $prev = '';<br /> $navPageMarkup = '';<br /> if($page->show_prev_next){<br /> if($page->next->id){<br /> $next = '<br /> <span class="page-title next table-cell"><br /> <a href="'.$page->next->url.'"><br /> '.$page->next->title.'<br /> </a><br /> </span><br /> <br /> <span class="nav-icon next table-cell"><br /> &nbsp;<br /> <a href="'.$page->next->url.'"><br /> <i class="fa fa-chevron-right" aria-hidden="true"></i><br /> </a><br /> </span><br /> </span><br /> ';<br /> }<br /> <br /> if($page->prev->id){<br /> $prev = '<br /> <span class="nav-icon prev table-cell"><br /> <a href="'.$page->prev->url.'"><br /> <i class="fa fa-chevron-left" aria-hidden="true"></i><br /> </a><br /> &nbsp;<br /> </span><br /> <span class="page-title prev table-cell"><br /> <a href="'.$page->prev->url.'"><br /> '.$page->prev->title.'<br /> </a><br /> </span><br /> ';<br /> }<br /> <br /> $navPageMarkup = '<br /> <div class="section v2 nav-page hide-on-small-only"><br /> <div class="row container no-margin-bot"><br /> <div class="col s12 nav-page"><br /> <div class="page-nav-wrap table" style=""><br /> <div class="table-row"><br /> '.$prev.$next.'<br /> </div><br /> <br /> </div><br /> </div><br /> </div><br /> </div><br /> ';<br /> }<br /> echo $navPageMarkup;<br /> <br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Siehe_CSS_-_Flexbox&diff=23247 Siehe CSS - Flexbox 2018-08-07T21:49:41Z

<p>37.49.33.174: /* Beispiele */</p> <hr /> <div>== Links ==<br /> https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676<br /> https://www.w3schools.com/css/css3_flexbox.asp<br /> <br /> == Einleitung ==<br /> Before the Flexbox Layout module, there were four layout modes:<br /> <br /> <pre><br /> Block, for sections in a webpage<br /> Inline, for text<br /> Table, for two-dimensional table data<br /> Positioned, for explicit position of an element<br /> </pre><br /> The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.<br /> == Properties ==<br /> <pre><br /> flex-direction<br /> flex-wrap<br /> flex-flow<br /> justify-content<br /> align-items<br /> align-content<br /> </pre><br /> <br /> The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.<br /> column<br /> row<br /> column-reverse<br /> row-reverse<br /> <br /> The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.<br /> wrap<br /> nowrap<br /> wrap-reverse<br /> <br /> The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.<br /> row wrap<br /> ...<br /> <br /> The '''justify-content''' property is used to '''align''' the flex items:<br /> center<br /> flex-start<br /> flex-end<br /> space-around<br /> space-between<br /> <br /> The '''align-items''' property is used to '''align''' the flex items '''vertically'''<br /> center<br /> flex-start<br /> flex-end<br /> stretch<br /> baseline<br /> <br /> The '''align-content''' property is used to '''align the flex lines'''.<br /> space-between<br /> space-around<br /> stretch<br /> center<br /> flex-start<br /> flex-end<br /> <br /> '''Child Elements (Items)'''<br /> <br /> The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.<br /> <br /> The '''order property''' specifies the order of the flex items.<br /> <pre><br /> <div class="flex-container"><br /> <div style="order: 3">1</div><br /> <div style="order: 2">2</div><br /> <div style="order: 4">3</div> <br /> <div style="order: 1">4</div><br /> </div><br /> </pre><br /> <br /> The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.<br /> <br /> Make the third flex item grow eight times faster than the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div style="flex-grow: 1">1</div><br /> <div style="flex-grow: 1">2</div><br /> <div style="flex-grow: 8">3</div> <br /> </div><br /> </pre><br /> <br /> The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.<br /> Do not let the third flex item shrink as much as the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div>1</div><br /> <div>2</div><br /> <div style="flex-shrink: 0">3</div><br /> <div>4</div><br /> </pre><br /> <br /> The '''flex-basis''' property specifies the '''initial length''' of a flex item.<br /> <div style="flex-basis: 200px">3</div><br /> <br /> The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties<br /> <div style="flex: 0 0 200px">3</div><br /> <br /> The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.<br /> <br /> The align-self property overrides the default alignment set by the container's align-items property.<br /> <br /> == Beispiele ==<br /> === Fotogrid ===<br /> <syntaxhighlight lang="html5"><br /> <!DOCTYPE html><br /> <html><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> body {<br /> margin: 0;<br /> font-family: Arial;<br /> }<br /> <br /> .header {<br /> text-align: center;<br /> padding: 32px;<br /> }<br /> <br /> .row {<br /> display: flex;<br /> flex-wrap: wrap;<br /> padding: 0 4px;<br /> }<br /> <br /> /* Create four equal columns that sits next to each other */<br /> .column {<br /> flex: 25%;<br /> max-width: 25%;<br /> padding: 0 4px;<br /> }<br /> <br /> .column img {<br /> margin-top: 8px;<br /> vertical-align: middle;<br /> }<br /> <br /> /* Responsive layout - makes a two column-layout instead of four columns */<br /> @media (max-width: 800px) {<br /> .column {<br /> flex: 50%;<br /> max-width: 50%;<br /> }<br /> }<br /> <br /> /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */<br /> @media (max-width: 600px) {<br /> .column {<br /> flex: 100%;<br /> max-width: 100%;<br /> }<br /> }<br /> </style><br /> <body><br /> <br /> <br /> <div class="header"><br /> <h1>Responsive Image Grid</h1><br /> <p>Resize the browser window to see the responsive effect.</p><br /> </div><br /> <br /> <br /> <div class="row"> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight><br /> <br /> === Homepage Layout ===<br /> <syntaxhighlight lang="html5"><br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <title>Page Title</title><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> /* Style the body */<br /> body {<br /> font-family: Arial;<br /> margin: 0;<br /> }<br /> <br /> /* Header/logo Title */<br /> .header {<br /> padding: 60px;<br /> text-align: center;<br /> background: #1abc9c;<br /> color: white;<br /> }<br /> <br /> /* Style the top navigation bar */<br /> .navbar {<br /> display: flex;<br /> background-color: #333;<br /> }<br /> <br /> /* Style the navigation bar links */<br /> .navbar a {<br /> color: white;<br /> padding: 14px 20px;<br /> text-decoration: none;<br /> text-align: center;<br /> }<br /> <br /> /* Change color on hover */<br /> .navbar a:hover {<br /> background-color: #ddd;<br /> color: black;<br /> }<br /> <br /> /* Column container */<br /> .row { <br /> display: flex;<br /> flex-wrap: wrap;<br /> }<br /> <br /> /* Create two unequal columns that sits next to each other */<br /> /* Sidebar/left column */<br /> .side {<br /> flex: 30%;<br /> background-color: #f1f1f1;<br /> padding: 20px;<br /> }<br /> <br /> /* Main column */<br /> .main {<br /> flex: 70%;<br /> background-color: white;<br /> padding: 20px;<br /> }<br /> <br /> /* Fake image, just for this example */<br /> .fakeimg {<br /> background-color: #aaa;<br /> width: 100%;<br /> padding: 20px;<br /> }<br /> <br /> /* Footer */<br /> .footer {<br /> padding: 20px;<br /> text-align: center;<br /> background: #ddd;<br /> }<br /> <br /> /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */<br /> @media screen and (max-width: 700px) {<br /> .row, .navbar { <br /> flex-direction: column;<br /> }<br /> }<br /> </style><br /> </head><br /> <body><br /> <br /> <br /> <div style="background:yellow;padding:5px"><br /> <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4><br /> </div><br /> <br /> <br /> <div class="header"><br /> <h1>My Website</h1><br /> <p>With a <b>flexible</b> layout.</p><br /> </div><br /> <br /> <br /> <div class="navbar"><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> <a href="#">Link</a><br /> </div><br /> <br /> <br /> <div class="row"><br /> <div class="side"><br /> <h2>About Me</h2><br /> <h5>Photo of me:</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text about me in culpa qui officia deserunt mollit anim..</p><br /> <h3>More Text</h3><br /> <p>Lorem ipsum dolor sit ame.</p><br /> <div class="fakeimg" style="height:60px;">Image</div><br><br /> <div class="fakeimg" style="height:60px;">Image</div><br><br /> <div class="fakeimg" style="height:60px;">Image</div><br /> </div><br /> <div class="main"><br /> <h2>TITLE HEADING</h2><br /> <h5>Title description, Dec 7, 2017</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text..</p><br /> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p><br /> <br><br /> <h2>TITLE HEADING</h2><br /> <h5>Title description, Sep 2, 2017</h5><br /> <div class="fakeimg" style="height:200px;">Image</div><br /> <p>Some text..</p><br /> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p><br /> </div><br /> </div><br /> <br /> <br /> <div class="footer"><br /> <h2>Footer</h2><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Siehe_CSS_-_Flexbox&diff=23246 Siehe CSS - Flexbox 2018-08-07T21:47:09Z

<p>37.49.33.174: /* Fotogrid */</p> <hr /> <div>== Links ==<br /> https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676<br /> https://www.w3schools.com/css/css3_flexbox.asp<br /> <br /> == Einleitung ==<br /> Before the Flexbox Layout module, there were four layout modes:<br /> <br /> <pre><br /> Block, for sections in a webpage<br /> Inline, for text<br /> Table, for two-dimensional table data<br /> Positioned, for explicit position of an element<br /> </pre><br /> The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.<br /> == Properties ==<br /> <pre><br /> flex-direction<br /> flex-wrap<br /> flex-flow<br /> justify-content<br /> align-items<br /> align-content<br /> </pre><br /> <br /> The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.<br /> column<br /> row<br /> column-reverse<br /> row-reverse<br /> <br /> The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.<br /> wrap<br /> nowrap<br /> wrap-reverse<br /> <br /> The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.<br /> row wrap<br /> ...<br /> <br /> The '''justify-content''' property is used to '''align''' the flex items:<br /> center<br /> flex-start<br /> flex-end<br /> space-around<br /> space-between<br /> <br /> The '''align-items''' property is used to '''align''' the flex items '''vertically'''<br /> center<br /> flex-start<br /> flex-end<br /> stretch<br /> baseline<br /> <br /> The '''align-content''' property is used to '''align the flex lines'''.<br /> space-between<br /> space-around<br /> stretch<br /> center<br /> flex-start<br /> flex-end<br /> <br /> '''Child Elements (Items)'''<br /> <br /> The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.<br /> <br /> The '''order property''' specifies the order of the flex items.<br /> <pre><br /> <div class="flex-container"><br /> <div style="order: 3">1</div><br /> <div style="order: 2">2</div><br /> <div style="order: 4">3</div> <br /> <div style="order: 1">4</div><br /> </div><br /> </pre><br /> <br /> The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.<br /> <br /> Make the third flex item grow eight times faster than the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div style="flex-grow: 1">1</div><br /> <div style="flex-grow: 1">2</div><br /> <div style="flex-grow: 8">3</div> <br /> </div><br /> </pre><br /> <br /> The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.<br /> Do not let the third flex item shrink as much as the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div>1</div><br /> <div>2</div><br /> <div style="flex-shrink: 0">3</div><br /> <div>4</div><br /> </pre><br /> <br /> The '''flex-basis''' property specifies the '''initial length''' of a flex item.<br /> <div style="flex-basis: 200px">3</div><br /> <br /> The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties<br /> <div style="flex: 0 0 200px">3</div><br /> <br /> The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.<br /> <br /> The align-self property overrides the default alignment set by the container's align-items property.<br /> <br /> == Beispiele ==<br /> === Fotogrid ===<br /> <syntaxhighlight lang="html5"><br /> <!DOCTYPE html><br /> <html><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> body {<br /> margin: 0;<br /> font-family: Arial;<br /> }<br /> <br /> .header {<br /> text-align: center;<br /> padding: 32px;<br /> }<br /> <br /> .row {<br /> display: flex;<br /> flex-wrap: wrap;<br /> padding: 0 4px;<br /> }<br /> <br /> /* Create four equal columns that sits next to each other */<br /> .column {<br /> flex: 25%;<br /> max-width: 25%;<br /> padding: 0 4px;<br /> }<br /> <br /> .column img {<br /> margin-top: 8px;<br /> vertical-align: middle;<br /> }<br /> <br /> /* Responsive layout - makes a two column-layout instead of four columns */<br /> @media (max-width: 800px) {<br /> .column {<br /> flex: 50%;<br /> max-width: 50%;<br /> }<br /> }<br /> <br /> /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */<br /> @media (max-width: 600px) {<br /> .column {<br /> flex: 100%;<br /> max-width: 100%;<br /> }<br /> }<br /> </style><br /> <body><br /> <br /> <br /> <div class="header"><br /> <h1>Responsive Image Grid</h1><br /> <p>Resize the browser window to see the responsive effect.</p><br /> </div><br /> <br /> <br /> <div class="row"> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Siehe_CSS_-_Flexbox&diff=23245 Siehe CSS - Flexbox 2018-08-07T21:46:33Z

<p>37.49.33.174: /* Beispiele */</p> <hr /> <div>== Links ==<br /> https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676<br /> https://www.w3schools.com/css/css3_flexbox.asp<br /> <br /> == Einleitung ==<br /> Before the Flexbox Layout module, there were four layout modes:<br /> <br /> <pre><br /> Block, for sections in a webpage<br /> Inline, for text<br /> Table, for two-dimensional table data<br /> Positioned, for explicit position of an element<br /> </pre><br /> The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.<br /> == Properties ==<br /> <pre><br /> flex-direction<br /> flex-wrap<br /> flex-flow<br /> justify-content<br /> align-items<br /> align-content<br /> </pre><br /> <br /> The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.<br /> column<br /> row<br /> column-reverse<br /> row-reverse<br /> <br /> The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.<br /> wrap<br /> nowrap<br /> wrap-reverse<br /> <br /> The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.<br /> row wrap<br /> ...<br /> <br /> The '''justify-content''' property is used to '''align''' the flex items:<br /> center<br /> flex-start<br /> flex-end<br /> space-around<br /> space-between<br /> <br /> The '''align-items''' property is used to '''align''' the flex items '''vertically'''<br /> center<br /> flex-start<br /> flex-end<br /> stretch<br /> baseline<br /> <br /> The '''align-content''' property is used to '''align the flex lines'''.<br /> space-between<br /> space-around<br /> stretch<br /> center<br /> flex-start<br /> flex-end<br /> <br /> '''Child Elements (Items)'''<br /> <br /> The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.<br /> <br /> The '''order property''' specifies the order of the flex items.<br /> <pre><br /> <div class="flex-container"><br /> <div style="order: 3">1</div><br /> <div style="order: 2">2</div><br /> <div style="order: 4">3</div> <br /> <div style="order: 1">4</div><br /> </div><br /> </pre><br /> <br /> The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.<br /> <br /> Make the third flex item grow eight times faster than the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div style="flex-grow: 1">1</div><br /> <div style="flex-grow: 1">2</div><br /> <div style="flex-grow: 8">3</div> <br /> </div><br /> </pre><br /> <br /> The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.<br /> Do not let the third flex item shrink as much as the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div>1</div><br /> <div>2</div><br /> <div style="flex-shrink: 0">3</div><br /> <div>4</div><br /> </pre><br /> <br /> The '''flex-basis''' property specifies the '''initial length''' of a flex item.<br /> <div style="flex-basis: 200px">3</div><br /> <br /> The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties<br /> <div style="flex: 0 0 200px">3</div><br /> <br /> The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.<br /> <br /> The align-self property overrides the default alignment set by the container's align-items property.<br /> <br /> == Beispiele ==<br /> === Fotogrid ===<br /> <syntaxhighlight lang="CSS"><br /> <!DOCTYPE html><br /> <html><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> body {<br /> margin: 0;<br /> font-family: Arial;<br /> }<br /> <br /> .header {<br /> text-align: center;<br /> padding: 32px;<br /> }<br /> <br /> .row {<br /> display: flex;<br /> flex-wrap: wrap;<br /> padding: 0 4px;<br /> }<br /> <br /> /* Create four equal columns that sits next to each other */<br /> .column {<br /> flex: 25%;<br /> max-width: 25%;<br /> padding: 0 4px;<br /> }<br /> <br /> .column img {<br /> margin-top: 8px;<br /> vertical-align: middle;<br /> }<br /> <br /> /* Responsive layout - makes a two column-layout instead of four columns */<br /> @media (max-width: 800px) {<br /> .column {<br /> flex: 50%;<br /> max-width: 50%;<br /> }<br /> }<br /> <br /> /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */<br /> @media (max-width: 600px) {<br /> .column {<br /> flex: 100%;<br /> max-width: 100%;<br /> }<br /> }<br /> </style><br /> <body><br /> <br /> <br /> <div class="header"><br /> <h1>Responsive Image Grid</h1><br /> <p>Resize the browser window to see the responsive effect.</p><br /> </div><br /> <br /> <br /> <div class="row"> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Siehe_CSS_-_Flexbox&diff=23244 Siehe CSS - Flexbox 2018-08-07T21:46:18Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „== Links == https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676 https://www.w3schools.com/css/css3_flexbox.as…“</p> <hr /> <div>== Links ==<br /> https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676<br /> https://www.w3schools.com/css/css3_flexbox.asp<br /> <br /> == Einleitung ==<br /> Before the Flexbox Layout module, there were four layout modes:<br /> <br /> <pre><br /> Block, for sections in a webpage<br /> Inline, for text<br /> Table, for two-dimensional table data<br /> Positioned, for explicit position of an element<br /> </pre><br /> The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.<br /> == Properties ==<br /> <pre><br /> flex-direction<br /> flex-wrap<br /> flex-flow<br /> justify-content<br /> align-items<br /> align-content<br /> </pre><br /> <br /> The '''flex-direction''' property defines in which '''direction''' the container wants to stack the flex items.<br /> column<br /> row<br /> column-reverse<br /> row-reverse<br /> <br /> The '''flex-wrap''' property specifies whether the flex items should '''wrap or not'''.<br /> wrap<br /> nowrap<br /> wrap-reverse<br /> <br /> The '''flex-flow''' property is a '''shorthand''' property for setting both the flex-direction and flex-wrap properties.<br /> row wrap<br /> ...<br /> <br /> The '''justify-content''' property is used to '''align''' the flex items:<br /> center<br /> flex-start<br /> flex-end<br /> space-around<br /> space-between<br /> <br /> The '''align-items''' property is used to '''align''' the flex items '''vertically'''<br /> center<br /> flex-start<br /> flex-end<br /> stretch<br /> baseline<br /> <br /> The '''align-content''' property is used to '''align the flex lines'''.<br /> space-between<br /> space-around<br /> stretch<br /> center<br /> flex-start<br /> flex-end<br /> <br /> '''Child Elements (Items)'''<br /> <br /> The '''direct child elements''' of a flex container automatically '''becomes flexible (flex) items'''.<br /> <br /> The '''order property''' specifies the order of the flex items.<br /> <pre><br /> <div class="flex-container"><br /> <div style="order: 3">1</div><br /> <div style="order: 2">2</div><br /> <div style="order: 4">3</div> <br /> <div style="order: 1">4</div><br /> </div><br /> </pre><br /> <br /> The '''flex-grow''' property specifies how much a flex item will grow relative to the rest of the flex items.<br /> <br /> Make the third flex item grow eight times faster than the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div style="flex-grow: 1">1</div><br /> <div style="flex-grow: 1">2</div><br /> <div style="flex-grow: 8">3</div> <br /> </div><br /> </pre><br /> <br /> The '''flex-shrink''' property specifies how much a flex item will shrink relative to the rest of the flex items.<br /> Do not let the third flex item shrink as much as the other flex items:<br /> <pre><br /> <div class="flex-container"><br /> <div>1</div><br /> <div>2</div><br /> <div style="flex-shrink: 0">3</div><br /> <div>4</div><br /> </pre><br /> <br /> The '''flex-basis''' property specifies the '''initial length''' of a flex item.<br /> <div style="flex-basis: 200px">3</div><br /> <br /> The '''flex''' property is a '''shorthand''' property for the flex-grow, flex-shrink, and flex-basis properties<br /> <div style="flex: 0 0 200px">3</div><br /> <br /> The '''align-self''' property specifies the '''alignment for the selected item inside the flexible container'''.<br /> <br /> The align-self property overrides the default alignment set by the container's align-items property.<br /> <br /> == Beispiele ==<br /> Fotogrid<br /> <syntaxhighlight lang="CSS"><br /> <!DOCTYPE html><br /> <html><br /> <style><br /> * {<br /> box-sizing: border-box;<br /> }<br /> <br /> body {<br /> margin: 0;<br /> font-family: Arial;<br /> }<br /> <br /> .header {<br /> text-align: center;<br /> padding: 32px;<br /> }<br /> <br /> .row {<br /> display: flex;<br /> flex-wrap: wrap;<br /> padding: 0 4px;<br /> }<br /> <br /> /* Create four equal columns that sits next to each other */<br /> .column {<br /> flex: 25%;<br /> max-width: 25%;<br /> padding: 0 4px;<br /> }<br /> <br /> .column img {<br /> margin-top: 8px;<br /> vertical-align: middle;<br /> }<br /> <br /> /* Responsive layout - makes a two column-layout instead of four columns */<br /> @media (max-width: 800px) {<br /> .column {<br /> flex: 50%;<br /> max-width: 50%;<br /> }<br /> }<br /> <br /> /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */<br /> @media (max-width: 600px) {<br /> .column {<br /> flex: 100%;<br /> max-width: 100%;<br /> }<br /> }<br /> </style><br /> <body><br /> <br /> <br /> <div class="header"><br /> <h1>Responsive Image Grid</h1><br /> <p>Resize the browser window to see the responsive effect.</p><br /> </div><br /> <br /> <br /> <div class="row"> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div> <br /> <div class="column"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/falls2.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> <img src="/w3images/nature.jpg" style="width:100%"><br /> <img src="/w3images/mist.jpg" style="width:100%"><br /> <img src="/w3images/paris.jpg" style="width:100%"><br /> </div><br /> <div class="column"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> <img src="/w3images/ocean.jpg" style="width:100%"><br /> <img src="/w3images/wedding.jpg" style="width:100%"><br /> <img src="/w3images/mountainskies.jpg" style="width:100%"><br /> <img src="/w3images/rocks.jpg" style="width:100%"><br /> <img src="/w3images/underwater.jpg" style="width:100%"><br /> </div><br /> </div><br /> <br /> </body><br /> </html><br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=CSS_-_Flex&diff=23243 CSS - Flex 2018-08-07T21:22:15Z

<p>37.49.33.174: </p> <hr /> <div>[[Siehe CSS - Flexbox]]</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=CSS_-_Flex&diff=23242 CSS - Flex 2018-08-07T20:47:53Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „ https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676“</p> <hr /> <div> https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Rich_Editor_bauen&diff=23241 JavaScript - Rich Editor bauen 2018-08-07T20:19:16Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „ https://www.youtube.com/watch?v=aRJ_pH-VWdU https://codepen.io/Unleashed-Design/pen/b6ede128a0b30c972159339f94496acd“</p> <hr /> <div> https://www.youtube.com/watch?v=aRJ_pH-VWdU<br /> https://codepen.io/Unleashed-Design/pen/b6ede128a0b30c972159339f94496acd</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=CSS_-_Grid_vs_Flex&diff=23240 CSS - Grid vs Flex 2018-08-07T20:01:51Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „ https://www.youtube.com/watch?v=sB-ooIXFTjg == Grid == Hier geht es eher um das Anordnen von Bereichen im Verhältnis zueinander. Grundlegendes Layout (Footer…“</p> <hr /> <div> https://www.youtube.com/watch?v=sB-ooIXFTjg<br /> == Grid ==<br /> Hier geht es eher um das Anordnen von Bereichen im Verhältnis zueinander. Grundlegendes Layout (Footer, Sidebar...)<br /> * display: gridÜbergeordnetes Grid Container<br /> * grid-template-wors<br /> * grid-template-columns<br /> * grid-gap<br /> * grid-template-areas<br /> === Vorteile ===<br /> Große Bereiche Positionieren auch vertikal zentriert etc. immer dann wenn der Browser viel übernehmen soll. Positionieren innerhalb der Grid Bereiche<br /> == Flex ==<br /> Beispiel<br /> display: flex<br /> justify-content: space-between<br /> align-items: center<br /> Styling von kleineren Bereichen z.b. Navigation</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=CSS_-_Grid&diff=23239 CSS - Grid 2018-08-07T19:45:22Z

<p>37.49.33.174: </p> <hr /> <div>Siehe auch <br /> [[CSS - Flex]]<br /> [[CSS - Grid vs Flex]]<br /> https://css-tricks.com/snippets/css/complete-guide-grid/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23238 ProcessWire - Editor 2018-08-03T08:23:24Z

<p>37.49.33.174: /* Praktisches Beispiel 1 */</p> <hr /> <div>'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''<br /> == Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> Hinweis: In neueren Versionen von PW (mindestens ab V3) Sind einige der Angaben unten überholt. Zum Teil funktionieren Sie aber ncoh. Als Referenz bleiben Die Tutorials auf dieser Seite unten erhalten<br /> <br /> == Konfiguration ==<br /> === Buttons ===<br /> Im Backend anpassen<br /> === Format Stile ===<br /> In der Feldkonfiguration unter<br /> Input > Format Tags<br /> <br /> === Eigene Styles ===<br /> '''1. Styles Dropdown aktivieren'''<br /> <br /> Feldkonfiguration unter CK Editor Toolbar<br /> Styles<br /> hinzufügen (am besten hinter Format)<br /> <br /> ''' 2.Styles Datei hinzufügen '''<br /> Datei unter Eigenes JS Styles Set angeben...<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> und Datei anlegen. Die sieht z.B. so aus:<br /> <br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> Hinweis: '''Nicht mystyles:'''/site/... Verwenden das führt zu Problemen im Backend. Mal sind die Stile da mal nicht. Also z.B. '''customstyles in der Pfadangabe UND in der Datei verwenden.'''<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> UIkit Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> /* Blockstyles */<br /> { name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },<br /> { name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },<br /> { name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },<br /> { name: 'Heading Divider', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },<br /> { name: 'Heading Line', element: 'h', attributes: { 'class': 'uk-heading-line' } },<br /> { name: 'Heading Bullet', element: 'h', attributes: { 'class': 'uk-heading-bullet' } },<br /> { name: 'Liste mit Kugel (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},<br /> { name: 'Liste mit Linie (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-divide'}}<br /> /* Inline Styles */<br /> { name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },<br /> { name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },<br /> { name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },<br /> { name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },<br /> { name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },<br /> { name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },<br /> { name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },<br /> { name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },<br /> { name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },<br /> { name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gel&ouml;scht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Hinweis: Span Elemente sind oft p Elementen vorzuziehen, da sie Inline angewendet werden können. So ist es möglich einen Muted Text innerhalb eines Absatzes einzusetzen.<br /> <br /> Einfaches Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> ''' Stile im Editor einbinden '''<br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/<br /> <br /> <br /> == Konfiguration CKEditor in PW (alt)==<br /> <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im '''Styles''' Dropdown<br /> site->modules->InputfieldCKEditor->mystyles.js<br /> anpassen.<br /> Im Backend den Pfad hinzufügen (siehe Beispiel unten)<br /> <br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die '''im Editor angezeigten Stile'''<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> <br /> ==== Custom Editor JS File ====<br /> <br /> Für die Auswahlfelder in der '''Toolbar'''<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23237 ProcessWire - Editor 2018-08-02T14:44:25Z

<p>37.49.33.174: /* Praktisches Beispiel 1 */</p> <hr /> <div>'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''<br /> == Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> Hinweis: In neueren Versionen von PW (mindestens ab V3) Sind einige der Angaben unten überholt. Zum Teil funktionieren Sie aber ncoh. Als Referenz bleiben Die Tutorials auf dieser Seite unten erhalten<br /> <br /> == Konfiguration ==<br /> === Buttons ===<br /> Im Backend anpassen<br /> === Format Stile ===<br /> In der Feldkonfiguration unter<br /> Input > Format Tags<br /> <br /> === Eigene Styles ===<br /> '''1. Styles Dropdown aktivieren'''<br /> <br /> Feldkonfiguration unter CK Editor Toolbar<br /> Styles<br /> hinzufügen (am besten hinter Format)<br /> <br /> ''' 2.Styles Datei hinzufügen '''<br /> Datei unter Eigenes JS Styles Set angeben...<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> und Datei anlegen. Die sieht z.B. so aus:<br /> <br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> Hinweis: '''Nicht mystyles:'''/site/... Verwenden das führt zu Problemen im Backend. Mal sind die Stile da mal nicht. Also z.B. '''customstyles in der Pfadangabe UND in der Datei verwenden.'''<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> UIkit Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> /* Blockstyles */<br /> { name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },<br /> { name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },<br /> { name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },<br /> { name: 'Heading Divider', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },<br /> { name: 'Heading Line', element: 'h', attributes: { 'class': 'uk-heading-line' } },<br /> { name: 'Heading Bullet', element: 'h', attributes: { 'class': 'uk-heading-bullet' } },<br /> { name: 'Liste mit Kugel (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},<br /> { name: 'Liste mit Linie (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-divide'}}<br /> /* Inline Styles */<br /> { name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },<br /> { name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },<br /> { name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },<br /> { name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },<br /> { name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },<br /> { name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },<br /> { name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },<br /> { name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },<br /> { name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },<br /> { name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gel&ouml;scht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Hinweis: Span Elemente sind oft p Elementen vorzuziehen, da sie Inline angewendet werden können. So ist es möglich einen Muted Text innerhalb eines Absatzes einzusetzen.<br /> <br /> Einfaches Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/<br /> <br /> <br /> == Konfiguration CKEditor in PW (alt)==<br /> <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im '''Styles''' Dropdown<br /> site->modules->InputfieldCKEditor->mystyles.js<br /> anpassen.<br /> Im Backend den Pfad hinzufügen (siehe Beispiel unten)<br /> <br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die '''im Editor angezeigten Stile'''<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> <br /> ==== Custom Editor JS File ====<br /> <br /> Für die Auswahlfelder in der '''Toolbar'''<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23236 ProcessWire - Editor 2018-08-02T08:41:53Z

<p>37.49.33.174: /* Praktisches Beispiel 1 */</p> <hr /> <div>'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''<br /> == Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> Hinweis: In neueren Versionen von PW (mindestens ab V3) Sind einige der Angaben unten überholt. Zum Teil funktionieren Sie aber ncoh. Als Referenz bleiben Die Tutorials auf dieser Seite unten erhalten<br /> <br /> == Konfiguration ==<br /> === Buttons ===<br /> Im Backend anpassen<br /> === Format Stile ===<br /> In der Feldkonfiguration unter<br /> Input > Format Tags<br /> <br /> === Eigene Styles ===<br /> '''1. Styles Dropdown aktivieren'''<br /> <br /> Feldkonfiguration unter CK Editor Toolbar<br /> Styles<br /> hinzufügen (am besten hinter Format)<br /> <br /> ''' 2.Styles Datei hinzufügen '''<br /> Datei unter Eigenes JS Styles Set angeben...<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> und Datei anlegen. Die sieht z.B. so aus:<br /> <br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> Hinweis: '''Nicht mystyles:'''/site/... Verwenden das führt zu Problemen im Backend. Mal sind die Stile da mal nicht. Also z.B. '''customstyles in der Pfadangabe UND in der Datei verwenden.'''<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [ <br /> { name: 'Inline Code', element: 'code' }, <br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Bild links', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Bild rechts', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Bild zentriert', element: 'img', attributes: { 'class': 'align_center' } }, <br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' },<br /> { name: 'Highlight', element: 'mark' },<br /> { name: 'Einfügen', element: 'ins' },<br /> { name: 'Sample', element: 'samp' },<br /> /* Uikit headlines */<br /> { name: 'unterstrichen', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },<br /> { name: 'Linie in der Mitte', element: 'h', attributes: { 'class': 'uk-heading-line' } },<br /> { name: 'Bullet', element: 'h', attributes: { 'class': 'uk-heading-bullet' } },<br /> /* Uikit paragraphs */<br /> { name: 'Kleine Schrift', element: 'p', attributes: { 'class': 'uk-text-small' } },<br /> { name: 'Große Schrift', element: 'p', attributes: { 'class': 'uk-text-large' } },<br /> { name: 'Kleinbuchstaben', element: 'p', attributes: { 'class': 'uk-text-lowercase' } },<br /> { name: 'Großbuchstaben', element: 'p', attributes: { 'class': 'uk-text-uppercase' } },<br /> { name: 'Erster Buchstabe groß', element: 'p', attributes: { 'class': 'uk-text-capitalize' } },<br /> { name: 'Farbe: ged&auml;mpft', element: 'p', attributes: { 'class': 'uk-text-muted' } },<br /> { name: 'Farbe: Prim&auml;r', element: 'p', attributes: { 'class': 'uk-text-primary' } },<br /> { name: 'Farbe: Erfolg', element: 'p', attributes: { 'class': 'uk-text-success' } },<br /> { name: 'Farbe: Warnung', element: 'p', attributes: { 'class': 'uk-text-warning' } },<br /> { name: 'Farbe: Gefahr', element: 'p', attributes: { 'class': 'uk-text-danger' } },<br /> /* ul classes */<br /> { name: 'Liste mit Kugel', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},<br /> { name: 'Liste mit Linie', element: 'ul', attributes: { 'class': 'uk-list uk-list-divide'}}<br /> ] );<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/<br /> <br /> <br /> == Konfiguration CKEditor in PW (alt)==<br /> <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im '''Styles''' Dropdown<br /> site->modules->InputfieldCKEditor->mystyles.js<br /> anpassen.<br /> Im Backend den Pfad hinzufügen (siehe Beispiel unten)<br /> <br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die '''im Editor angezeigten Stile'''<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> <br /> ==== Custom Editor JS File ====<br /> <br /> Für die Auswahlfelder in der '''Toolbar'''<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23235 ProcessWire - Editor 2018-08-02T08:41:22Z

<p>37.49.33.174: /* Praktisches Beispiel 1 */</p> <hr /> <div>'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''<br /> == Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> Hinweis: In neueren Versionen von PW (mindestens ab V3) Sind einige der Angaben unten überholt. Zum Teil funktionieren Sie aber ncoh. Als Referenz bleiben Die Tutorials auf dieser Seite unten erhalten<br /> <br /> == Konfiguration ==<br /> === Buttons ===<br /> Im Backend anpassen<br /> === Format Stile ===<br /> In der Feldkonfiguration unter<br /> Input > Format Tags<br /> <br /> === Eigene Styles ===<br /> '''1. Styles Dropdown aktivieren'''<br /> <br /> Feldkonfiguration unter CK Editor Toolbar<br /> Styles<br /> hinzufügen (am besten hinter Format)<br /> <br /> ''' 2.Styles Datei hinzufügen '''<br /> Datei unter Eigenes JS Styles Set angeben...<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> und Datei anlegen. Die sieht z.B. so aus:<br /> <br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> Hinweis: '''Nicht mystyles:'''/site/... Verwenden das führt zu Problemen im Backend. Mal sind die Stile da mal nicht. Also z.B. '''customstyles in der Pfadangabe UND in der Datei verwenden.'''<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [ <br /> { name: 'Inline Code', element: 'code' }, <br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Bild links', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Bild rechts', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Bild zentriert', element: 'img', attributes: { 'class': 'align_center' } }, <br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' },<br /> { name: 'Highlight', element: 'mark' },<br /> { name: 'Einfügen', element: 'ins' },<br /> { name: 'Sample', element: 'samp' },<br /> /* Uikit headlines */<br /> { name: 'unterstrichen', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },<br /> { name: 'Linie in der Mitte', element: 'h', attributes: { 'class': 'uk-heading-line' } },<br /> { name: 'Bullet', element: 'h', attributes: { 'class': 'uk-heading-bullet' } },<br /> /* Uikit paragraphs */<br /> { name: 'Kleine Schrift', element: 'p', attributes: { 'class': 'uk-text-small' } },<br /> { name: 'Große Schrift', element: 'p', attributes: { 'class': 'uk-text-large' } },<br /> { name: 'Kleinbuchstaben', element: 'p', attributes: { 'class': 'uk-text-lowercase' } },<br /> { name: 'Großbuchstaben', element: 'p', attributes: { 'class': 'uk-text-uppercase' } },<br /> { name: 'Erster Buchstabe groß', element: 'p', attributes: { 'class': 'uk-text-capitalize' } },<br /> { name: 'Farbe: ged&auml;mpft', element: 'p', attributes: { 'class': 'uk-text-muted' } },<br /> { name: 'Farbe: Prim&auml;r', element: 'p', attributes: { 'class': 'uk-text-primary' } },<br /> { name: 'Farbe: Erfolg', element: 'p', attributes: { 'class': 'uk-text-success' } },<br /> { name: 'Farbe: Warnung', element: 'p', attributes: { 'class': 'uk-text-warning' } },<br /> { name: 'Farbe: Gefahr', element: 'p', attributes: { 'class': 'uk-text-danger' } },<br /> /* ul classes */<br /> { name: 'Liste mit Kugel', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},<br /> { name: 'Liste mit Linie', element: 'ul', attributes: { 'class': 'uk-list uk-list-divide'}}<br /> ] );<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/<br /> <br /> <br /> == Konfiguration CKEditor in PW (alt)==<br /> <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im '''Styles''' Dropdown<br /> site->modules->InputfieldCKEditor->mystyles.js<br /> anpassen.<br /> Im Backend den Pfad hinzufügen (siehe Beispiel unten)<br /> <br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die '''im Editor angezeigten Stile'''<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> <br /> ==== Custom Editor JS File ====<br /> <br /> Für die Auswahlfelder in der '''Toolbar'''<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23234 ProcessWire - Editor 2018-08-02T08:31:50Z

<p>37.49.33.174: </p> <hr /> <div>'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''<br /> == Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> Hinweis: In neueren Versionen von PW (mindestens ab V3) Sind einige der Angaben unten überholt. Zum Teil funktionieren Sie aber ncoh. Als Referenz bleiben Die Tutorials auf dieser Seite unten erhalten<br /> <br /> == Konfiguration ==<br /> === Buttons ===<br /> Im Backend anpassen<br /> === Format Stile ===<br /> In der Feldkonfiguration unter<br /> Input > Format Tags<br /> <br /> === Eigene Styles ===<br /> '''1. Styles Dropdown aktivieren'''<br /> <br /> Feldkonfiguration unter CK Editor Toolbar<br /> Styles<br /> hinzufügen (am besten hinter Format)<br /> <br /> ''' 2.Styles Datei hinzufügen '''<br /> Datei unter Eigenes JS Styles Set angeben...<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> und Datei anlegen. Die sieht z.B. so aus:<br /> <br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'customstyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> Hinweis: '''Nicht mystyles:'''/site/... Verwenden das führt zu Problemen im Backend. Mal sind die Stile da mal nicht. Also z.B. '''customstyles in der Pfadangabe UND in der Datei verwenden.'''<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Inline Code', element: 'code' },<br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },<br /> { name: 'Small', element: 'small' },<br /> { name: 'Deleted Text', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/<br /> <br /> <br /> == Konfiguration CKEditor in PW (alt)==<br /> <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im '''Styles''' Dropdown<br /> site->modules->InputfieldCKEditor->mystyles.js<br /> anpassen.<br /> Im Backend den Pfad hinzufügen (siehe Beispiel unten)<br /> <br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die '''im Editor angezeigten Stile'''<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> <br /> ==== Custom Editor JS File ====<br /> <br /> Für die Auswahlfelder in der '''Toolbar'''<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23233 ProcessWire - Editor 2018-08-02T08:20:38Z

<p>37.49.33.174: </p> <hr /> <div>'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''<br /> == Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> Hinweis: In neueren Versionen von PW (mindestens ab V3) Sind einige der Angaben unten überholt. Als Referenz bleiben Die Tutorials auf dieser Seite unten erhalten<br /> <br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Inline Code', element: 'code' },<br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },<br /> { name: 'Small', element: 'small' },<br /> { name: 'Deleted Text', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/<br /> <br /> <br /> == Konfiguration CKEditor in PW (alt)==<br /> <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im '''Styles''' Dropdown<br /> site->modules->InputfieldCKEditor->mystyles.js<br /> anpassen.<br /> Im Backend den Pfad hinzufügen (siehe Beispiel unten)<br /> <br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die '''im Editor angezeigten Stile'''<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> <br /> ==== Custom Editor JS File ====<br /> <br /> Für die Auswahlfelder in der '''Toolbar'''<br /> customstyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23232 ProcessWire - Editor 2018-08-01T16:55:58Z

<p>37.49.33.174: </p> <hr /> <div>'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''<br /> == Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> == Konfiguration CKEditor in PW==<br /> Ist inzwischen in <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im Styles Dropdown<br /> site->modules->InputfieldCKEditor->mystyle.js<br /> Example:<br /> <pre><br /> /**<br /> * mystyles.js<br /> *<br /> * This file may be used when you have "Styles" as one of the items in your toolbar.<br /> * add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in<br /> * Field Settings > CKEditor Settings > Custom Editor JS Styles Set<br /> *<br /> * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js<br /> *<br /> */<br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> </pre><br /> <br /> http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet<br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die im Editor angezeigten Stile<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> ==== Custom Editor JS File ====<br /> Für die Auswahlfelder in der '''Toolbar'''<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Inline Code', element: 'code' },<br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },<br /> { name: 'Small', element: 'small' },<br /> { name: 'Deleted Text', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23231 ProcessWire - Editor 2018-08-01T16:28:31Z

<p>37.49.33.174: /* Links */</p> <hr /> <div>== Links ==<br /> <br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> == Konfiguration CKEditor in PW==<br /> Ist inzwischen in <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im Styles Dropdown<br /> site->modules->InputfieldCKEditor->mystyle.js<br /> Example:<br /> <pre><br /> /**<br /> * mystyles.js<br /> *<br /> * This file may be used when you have "Styles" as one of the items in your toolbar.<br /> * add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in<br /> * Field Settings > CKEditor Settings > Custom Editor JS Styles Set<br /> *<br /> * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js<br /> *<br /> */<br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> </pre><br /> <br /> http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet<br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die im Editor angezeigten Stile<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> ==== Custom Editor JS File ====<br /> Für die Auswahlfelder in der '''Toolbar'''<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Inline Code', element: 'code' },<br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },<br /> { name: 'Small', element: 'small' },<br /> { name: 'Deleted Text', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23230 ProcessWire - Editor 2018-08-01T16:05:02Z

<p>37.49.33.174: /* Snippets */</p> <hr /> <div>== Links ==<br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> <br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> == Konfiguration CKEditor in PW==<br /> Ist inzwischen in <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im Styles Dropdown<br /> site->modules->InputfieldCKEditor->mystyle.js<br /> Example:<br /> <pre><br /> /**<br /> * mystyles.js<br /> *<br /> * This file may be used when you have "Styles" as one of the items in your toolbar.<br /> * add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in<br /> * Field Settings > CKEditor Settings > Custom Editor JS Styles Set<br /> *<br /> * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js<br /> *<br /> */<br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> </pre><br /> <br /> http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet<br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die im Editor angezeigten Stile<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> ==== Custom Editor JS File ====<br /> Für die Auswahlfelder in der '''Toolbar'''<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> <br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der '''Eintrag Styles'''. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. <br /> <br /> Guter Standard mit Tabellen und Styles Dropdown<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Inline Code', element: 'code' },<br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },<br /> { name: 'Small', element: 'small' },<br /> { name: 'Deleted Text', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23229 ProcessWire - Editor 2018-08-01T15:54:17Z

<p>37.49.33.174: </p> <hr /> <div>== Links ==<br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> <br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> == Konfiguration CKEditor in PW==<br /> Ist inzwischen in <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im Styles Dropdown<br /> site->modules->InputfieldCKEditor->mystyle.js<br /> Example:<br /> <pre><br /> /**<br /> * mystyles.js<br /> *<br /> * This file may be used when you have "Styles" as one of the items in your toolbar.<br /> * add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in<br /> * Field Settings > CKEditor Settings > Custom Editor JS Styles Set<br /> *<br /> * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js<br /> *<br /> */<br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> </pre><br /> <br /> http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet<br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die im Editor angezeigten Stile<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> ==== Custom Editor JS File ====<br /> Für die Auswahlfelder in der '''Toolbar'''<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> === Praktisches Beispiel 1===<br /> ==== Backend ====<br /> Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen:<br /> <br /> '''Editor Toolbar einstellen''' <br /> <br /> Interessant ist hier der Eintrag Styles. Das Formatdialogfeld formatiert einzelne Blockstile wie h1 oder p. Im Styles Dropdown kann man auch Umgebende Blockelemente wie z.B. Divs mit speziellen Klassen nutzen. Hiermit kann man Stile für kom<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> '''Tags formatieren'''<br /> <br /> Hier kann man festlegen welche '''Tags im Format Dropdown''' ausgewählt werden können. Hier ein Beispiel bei dem wir h1 weglassen. H1 wird oft über das Template selbst ausgegeben und sollte nur einmal pro Seite auftauchen.<br /> <pre><br /> p;h2;h3;h4;h5;h6;pre;address<br /> </pre><br /> <br /> ''' Styles festlegen '''<br /> <br /> Um die oben erwähnten Styles anzupassen wir eine kleine JavaScript Datei. Wo diese liegt legen wir im Abschnitt '''Eigenes Editor-JS-Style-Set''' fest. Wir nutzen den bereits vorgeschlagenen Pfad tragen diesen ein und legen die Datei an:<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <br /> Standardbeispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Inline Code', element: 'code' },<br /> { name: 'Inline Quotation', element: 'q' },<br /> { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },<br /> { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },<br /> { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },<br /> { name: 'Small', element: 'small' },<br /> { name: 'Deleted Text', element: 'del' },<br /> { name: 'Inserted Text', element: 'ins' },<br /> { name: 'Cited Work', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> Modifiziertes Beispiel<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Expose-Liste', element: 'p', attributes: { 'class': 'expose' } },<br /> { name: 'Klein', element: 'small' },<br /> { name: 'Gelöscht', element: 'del' },<br /> { name: 'Eingefügt', element: 'ins' },<br /> { name: 'Zitat', element: 'cite' }<br /> ]);<br /> </syntaxhighlight><br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23228 ProcessWire - Editor 2018-08-01T15:27:12Z

<p>37.49.33.174: </p> <hr /> <div>== Links ==<br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> <br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> <br /> == Der CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> == Konfiguration CKEditor in PW==<br /> Ist inzwischen in <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> === CKEditor Buttons anpassen===<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht im Backend in der '''Feldkonfiguration unter dem Reiter Eingabe.<br /> '''<br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> === Default Einstellungen ===<br /> Todo: TESTEN ob das wirklich funktioniert<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> <br /> === Eigene Styles ===<br /> Eigene Stile zur Auswahl im Styles Dropdown<br /> site->modules->InputfieldCKEditor->mystyle.js<br /> Example:<br /> <pre><br /> /**<br /> * mystyles.js<br /> *<br /> * This file may be used when you have "Styles" as one of the items in your toolbar.<br /> * add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in<br /> * Field Settings > CKEditor Settings > Custom Editor JS Styles Set<br /> *<br /> * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js<br /> *<br /> */<br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> </pre><br /> <br /> http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet<br /> <br /> === Konfigurationsbeispiele ===<br /> Im Adminbereich im content_main Feld:<br /> <br /> ==== CKEditor Toolbar ====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ==== Custom Editor CSS File ====<br /> Für die im Editor angezeigten Stile<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> ==== Custom Editor JS File ====<br /> Für die Auswahlfelder in der '''Toolbar'''<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ==== config.js ====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> === Plugins hinzufügen ===<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23227 ProcessWire - Editor 2018-08-01T15:24:16Z

<p>37.49.33.174: </p> <hr /> <div>== Links ==<br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> <br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> <br /> == CKEditor ==<br /> Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.<br /> <br /> == Konfiguration CKEditor in PW==<br /> Ist inzwischen in <br /> /sites <br /> ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in <br /> wire/site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> === Wo stellt man was ein ? ===<br /> '''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.<br /> Ordner:<br /> site/modules/InputfieldCKEditor/<br /> Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)<br /> config.js<br /> Konfiguration für ein bestimmtes Feld falls vorhanden<br /> config.[fieldname.]js <br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> ==== CKEditor Buttons ====<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht unter dem Reiter Eingabe.<br /> <br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> ==== Default Einstellungen ====<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> ==== Eigene Styles ====<br /> Eigene Stile zur Auswahl im Styles Dropdown<br /> site->modules->InputfieldCKEditor->mystyle.js<br /> Example:<br /> <pre><br /> /**<br /> * mystyles.js<br /> *<br /> * This file may be used when you have "Styles" as one of the items in your toolbar.<br /> * add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in<br /> * Field Settings > CKEditor Settings > Custom Editor JS Styles Set<br /> *<br /> * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js<br /> *<br /> */<br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> </pre><br /> <br /> http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet<br /> <br /> ==== Konfigurationsbeispiele ====<br /> Im Adminbereich im content_main Feld:<br /> <br /> ===== CKEditor Toolbar =====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ===== Custom Editor CSS File =====<br /> Für die im Editor angezeigten Stile<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> ===== Custom Editor JS File =====<br /> Für die Auswahlfelder in der '''Toolbar'''<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ===== config.js =====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> ==== Plugins hinzufügen ====<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Editor&diff=23226 ProcessWire - Editor 2018-08-01T15:14:43Z

<p>37.49.33.174: /* Custom Editor JS File */</p> <hr /> <div>== Links ==<br /> https://processwire.com/talk/topic/3023-module-ckeditor/<br /> <br /> https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/<br /> <br /> == CKEditor ==<br /> Ist der Standard Editor in PW<br /> <br /> === Konfiguration CKEditor in PW===<br /> Ist inzwischen in /sites ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in wire/<br /> site/modules/InputfieldCKEditor/<br /> Dort gibe es diverse Dateien. Allerdings ist nicht alles möglich, was in der CKEditor Doku steht. In PW können scheinbar manche Einstellungen nicht über die Dateien geregelt werden.<br /> <br /> ==== Wo stellt man was ein ? ====<br /> JS Konfiguration von CK Editor Interface und eigene Stile<br /> site/modules/InputfieldCKEditor/<br /> config.js - Konfigutation für alle Felder<br /> config.[fieldname.]js - Konfiguration für ein Feld mit dem Namen fieldname falls vorhanden<br /> mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.<br /> <br /> Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags, <br /> <br /> '''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen<br /> content.css''' <br /> <br /> '''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''<br /> contents-inline.css<br /> <br /> '''Stile für die Vorschau beim Inline Editor'''<br /> Feldkonfiguration im Admin Bereich PW<br /> <br /> Hier muß die '''Toolbar''' eingestellt werden. Über Konfig hat es bisher nicht geklappt. Hier muss auch die '''CSS Datei für die Inline Styles''' angegeben werden. <br /> <br /> '''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..<br /> <br /> Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.<br /> ==== CKEditor Buttons ====<br /> Wenn man ein Textarea Feld definiert, kann man auch für dieses Feld den CKEditor anpassen. Das geht unter dem Reiter Eingabe.<br /> <br /> Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''<br /> <pre><br /> Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> PWLink, Unlink, Anchor<br /> <br /> PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> ==== Default Einstellungen ====<br /> Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.<br /> /site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung<br /> /site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld<br /> Beispiele:<br /> config.startupOutlineBlocks = true;<br /> <pre><br /> <br /> CKEDITOR.editorConfig = function( config ) {<br /> config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];<br /> };<br /> </pre><br /> <br /> Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.<br /> ==== Eigene Styles ====<br /> Eigene Stile zur Auswahl im Styles Dropdown<br /> site->modules->InputfieldCKEditor->mystyle.js<br /> Example:<br /> <pre><br /> /**<br /> * mystyles.js<br /> *<br /> * This file may be used when you have "Styles" as one of the items in your toolbar.<br /> * add mystyles:/site/modules/InputfieldCKEditor/mystyles.js in<br /> * Field Settings > CKEditor Settings > Custom Editor JS Styles Set<br /> *<br /> * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js<br /> *<br /> */<br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'} },<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> </pre><br /> <br /> http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet<br /> <br /> ==== Konfigurationsbeispiele ====<br /> Im Adminbereich im content_main Feld:<br /> <br /> ===== CKEditor Toolbar =====<br /> Added justify buttons...<br /> <pre><br /> Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat<br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar<br /> PasteText, PasteFromWord,-,Undo,Redo<br /> Scayt, -, Sourcedialog<br /> </pre><br /> <br /> Blöcke anzeigen, Smileys<br /> <pre><br /> Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,<br /> JustifyLeft ,JustifyCenter ,JustifyRight , -, <br /> NumberedList, BulletedList, -, Blockquote<br /> <br /> PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,<br /> PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog<br /> </pre><br /> <br /> ===== Custom Editor CSS File =====<br /> Für die im Editor angezeigten Stile<br /> site/modules/InputfieldCKEditor/contents.css<br /> <syntaxhighlight lang="css"><br /> @import url('../../templates/vendors/fa/css/font-awesome.min.css');<br /> @import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');<br /> @import url('../../templates/css/main.css');<br /> <br /> .cke_editable {<br /> font-size: 14px;<br /> line-height: 1.6em;<br /> }<br /> <br /> .cke_contents_ltr blockquote {<br /> padding-left: 20px;<br /> padding-right: 8px;<br /> border-left-width: 5px;<br /> }<br /> <br /> .cke_contents_rtl blockquote {<br /> padding-left: 8px;<br /> padding-right: 20px;<br /> border-right-width: 5px;<br /> }<br /> </syntaxhighlight><br /> ===== Custom Editor JS File =====<br /> Für die Auswahlfelder in der '''Toolbar'''<br /> mystyles:/site/modules/InputfieldCKEditor/mystyles.js<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.stylesSet.add( 'mystyles', [<br /> { name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},<br /> { name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },<br /> ]);<br /> CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)<br /> </syntaxhighlight><br /> <br /> ===== config.js =====<br /> In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)<br /> <syntaxhighlight lang="javascript"><br /> CKEDITOR.editorConfig = function( config ) {<br /> config.uiColor = '#AADC6E';<br /> config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)<br /> </syntaxhighlight><br /> ==== Plugins hinzufügen ====<br /> * https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.<br /> <br /> == CKEditor allgemeines Wissen ==<br /> Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.<br /> === Konfiguration ===<br /> ==== Toolbar ====<br /> http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar<br /> <br /> <br /> === Plugins ===<br /> Werden normalerweise mit einem Builder implementiert. Das geht bei PW nicht. Aber es gelten zum Teil die Regeln für Manuelle Installation. Manche Schritte z.B. aktivieren der Plugins macht man in PW aber wahlweise über die Feldkonfiguration.<br /> <br /> Beispiel Widget Plugin:<br /> <br /> If you want to add the plugin manually, you will need to:<br /> * Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:<br /> http://example.com/ckeditor/plugins/widget<br /> * Enable the plugin by using the extraPlugins configuration setting. Example:<br /> config.extraPlugins = 'widget'; <br /> * Download and configure all its '''dependencies''', too.<br /> In PW<br /> <br /> == Snippets ==<br /> <br /> == Weiter Forum Beispiele ==<br /> https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=Processwire_-_Markup_Regions&diff=23225 Processwire - Markup Regions 2018-08-01T14:31:55Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „Siehe: ProcessWire - Markup Regions“</p> <hr /> <div>Siehe:<br /> <br /> [[ProcessWire - Markup Regions]]</div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Debugging_Snippets&diff=23224 ProcessWire - Debugging Snippets 2018-08-01T14:30:17Z

<p>37.49.33.174: </p> <hr /> <div>== Alle Feldnamen einer Seite ausgeben ==<br /> <syntaxhighlight lang="php"><br /> //get all the fields:<br /> $all_fields = $page->fields;<br /> foreach($all_fields as $field){<br /> $out .= "{$field->name}, ";<br /> }<br /> </syntaxhighlight><br /> <br /> == Marker Regions Debuggen ==<br /> <syntaxhighlight lang="php"><br /> <?php namespace ProcessWire;<br /> <br /> if(config()->debug && user()->isSuperuser()): // display region debugging info ?><br /> <section id='debug' class='uk-section uk-section-muted'><br /> <div class='uk-container'><br /> <h4>ProcessWire Region Markup Debugging</h4><br /> <br /> </div><br /> </section><br /> <?php endif; ?><br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Debugging_Snippets&diff=23223 ProcessWire - Debugging Snippets 2018-08-01T11:47:27Z

<p>37.49.33.174: </p> <hr /> <div>== Alle Feldnamen einer Seite ausgeben ==<br /> <syntaxhighlight lang="php"><br /> //get all the fields:<br /> $all_fields = $page->fields;<br /> foreach($all_fields as $field){<br /> $out .= "{$field->name}, ";<br /> }<br /> </syntaxhighlight></div>

37.49.33.174 https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_Debugging_Snippets&diff=23222 ProcessWire - Debugging Snippets 2018-08-01T11:47:04Z

<p>37.49.33.174: Die Seite wurde neu angelegt: „<syntaxhighlight lang="php"> //get all the fields: $all_fields = $page->fields; foreach($all_fields as $field){ $out .= "{$field->name}, "; } </syntaxhighlight>“</p> <hr /> <div><syntaxhighlight lang="php"><br /> //get all the fields:<br /> $all_fields = $page->fields;<br /> foreach($all_fields as $field){<br /> $out .= "{$field->name}, ";<br /> }<br /> </syntaxhighlight></div>

37.49.33.174