Wikizone - Benutzerbeiträge [de]

3D-Drucker - Düse wechseln / reinigen

2022-09-11T10:56:17Z

134.3.84.225:

# Düse aufheizen bis annähernd Filament Temperatur - Niemals kalt abschrauben.
# Filament entfernen (kurz leicht stupsen und dann rausziehen um evtl. Reste nochmal zu lösen.
# Nozzle in heißem Zustand abschrauben. Evtl. Heizung mit Zange o.ä. festhalten. Vorsichtig - heiß. Unten aufpassen evtl. Tuch unterlegen

3D-Drucker - Düse wechseln / reinigen

2022-09-11T10:26:33Z

134.3.84.225:

# Düse aufheizen bis annähernd Filament Temperatur - Niemals kalt abschrauben.
# Filament entfernen (kurz leicht stupsen und dann rausziehen um evtl. Reste nochmal zu lösen.

3D-Drucker - Düse wechseln / reinigen

2022-09-11T10:05:18Z

134.3.84.225: Die Seite wurde neu angelegt: „# Düse aufheizen bis annähernd Filament Temperatur - Niemals kalt abschrauben.“

# Düse aufheizen bis annähernd Filament Temperatur - Niemals kalt abschrauben.

3D-Druck

2022-09-11T10:04:21Z

134.3.84.225: /* Links */

== Links ==
[[3D-Drucker kalibrieren und einstellen]]
[[3D-Drucker - Düse wechseln / reinigen]]
[[Cura]]

== Filamente ==
=== PLA ===
Temperatur: 180-220°C
Bett Temperatur: 30-50°C
Kühlung: 100%
Print speed: 40-60mm/s
PLA trocken halten

=== PETG ===
https://3dprinterly.com/filament-printing-guide/petg/ guter Guide, Einstellungen, Gesundheit, Eigenschaften...

Print speed 30 - 60mm/s
Retraction 35-40mm/s Bowden and Direct Drive extruders
Retraction distance
5-7mm for Bowden extruders
2-4mm for direct-drive extruders
Fan-Speed niedrig für gute Layerhaftung, höher für Sauberkeit.

Retraction settings for PETG are very different from those for other filaments. This is because PETG prints at a relatively high temperature so, the material flow is very hard to stop and control.

=== TPU ===
[[3D-Druck TPU drucken]]

Wordpress - Google Fonts statisch einbinden

2022-09-10T15:00:16Z

134.3.84.225: /* Mit Plugins entfernen */

Aus Datenschutzgründen sollte man Google Fonts statisch auf dem Server seines Vertrauens vorhalten. Doch wie entfernt man Sie aus Wordpress Themes?

==Manuell entfernen ==
Die Fonts werde aus den Einstellungen des Themes meist über die functions.php und die wp_head Funktion geladen. Dabei findet man in

=== Wo sucht man? ===
header.php
<?php wp_head();?>
etwas in der Art. Das ist ein sehr wichtiger Hook in WP über den alles mögliche geladen werden kann.

In functions.php wird es konkret. Hier finden wir etwas in der Art:
<syntaxhighlight lang="php">
wp_enqueue_style('googleFontbody', 'http://fonts.googleapis.com/css?family='.$font_body ,'',NULL);
</syntaxhighlight>
Hier wird also ein Stylesheet von Google in die Warteschlange gestellt, die dann später an der Stelle von wp_head() eingefügt wird. Außerdem stellen wir ein eigenes Stylesheet für unser Child Theme in den Queue um damit unsere Fonts einzubinden.

=== Google Fonts entfernen und Stylesheet einbinden ===
Um diese Styles wieder loszuwerde registrieren wir im ChildTheme einfach eine eigene Funktion und schmeißen über diese die Google Styles wieder aus der Warteschlange.
<syntaxhighlight lang="php">
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

function my_deregister_styles() {
wp_deregister_style( 'googleFontbody' );// no google font scripts
}
</syntaxhighlight>

Die Fonts kommen in einen Ordner "fonts" im Child Theme und können So referenziert werden:
<syntaxhighlight lang="css">
/* oswald-regular - latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: local(''),
url('fonts/oswald-v35-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/oswald-v35-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
...
</syntaxhighlight>
Die Styles können dann wie üblich mit font-family gesetzt werden
body{font-family: Oswald,sans-serif;}

Tipp: Mit welchem Bezeichner der Style im Queue steht sieht man u.U. auch direkt am Style
<link rel='stylesheet' id='googleFontQuote-css' href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic' type='text/css' media='all' />
steht für einen Bezeichner googleFontQuote also muss die Zeile heißen:
wp_deregister_style( 'googleFontQuote');

== Mit Plugins entfernen ==
Mittlerweile gibt es auch ein paar Tools:
https://www.strato.de/blog/google-fonts-in-wordpress-lokal-hosten/
Essentiell ist dieses:

Um die Google Fonts aus dem Theme und den Plugins zu entfernen, kannst du das Plugin Disable and Remove Google Fonts einsetzen. Es kommt gänzlich ohne Optionen daher und verbannt einfach sämtliche Google Fonts aus deinem Blog.

Wordpress - Google Fonts statisch einbinden

2022-09-10T14:55:55Z

134.3.84.225:

ProcessWire Modules - common functions

2022-09-09T16:55:01Z

134.3.84.225: Die Seite wurde neu angelegt: „Hier sind einige Funktionen und Eigenschaften erklärt, die bei der Entwicklung von Modulen immer wieder vorkommen. === sleepValue(), wakeupValue(), sanitizeV…“

Hier sind einige Funktionen und Eigenschaften erklärt, die bei der Entwicklung von Modulen immer wieder vorkommen.

=== sleepValue(), wakeupValue(), sanitizeValue ===
https://processwire.com/talk/topic/671-relationship-between-sleepvalue-wakeupvalue-and-sanitizevalue-methods
https://processwire.com/api/ref/fieldtype/wakeup-value/
https://processwire.com/api/ref/fieldtype/sleep-value/

Hintergrund: Wenn man Fieldtypes programmiert gibt es oft komplexe Objekte die man auf der Seite anzeigen möchte, die aber nicht so in der Datenbank gespeichert werden können.

'''sleepValue''' ist eine Funktion in der man seinen Datentyp in einen einfachen Typ übersetzt, den an in der Datenbank speichern kann. Z.B. als JSON String o.ä.

'''wakeupValue''' macht das umgekehrte und übersetzt den Basic Type in ein Objekt für das Page Objekt.

ProcessWire - Module schreiben

2022-09-09T16:49:27Z

134.3.84.225: /* Interessantes - Read On */

== Links ==
'''Wichtigste Resourcen'''
https://processwire.com/docs/modules/development/ - Guter Ausgangspunkt
https://processwire.com/api/ref/module/ - Module API
https://processwire.com/docs/modules/types/ - Welche Modultypen gibt es ?
https://processwire.com/talk/topic/778-module-dependencies/ - Module die andere Module benötigen
https://processwire.com/talk/forum/19-moduleplugin-development/ - Forum zum Thema Module entwickeln
http://somatonic.github.io/Captain-Hook/ - Hook Cheatsheet
https://processwire.com/blog/posts/new-module-configuration-options/ - Neuere Konfigurationsmöglichkeiten
https://processwire.com/docs/start/api-access/ Zugriff auf ProcessWire API Variablen (wire Objekt)

''' Tutorials und Beispiele zum Einstieg '''
https://processwire.com/docs/modules/ - Introduction, Development, Hooks, Types, Pro Modules, Third Party
https://github.com/ryancramerdesign/ProcessHello - Modul Skelett Beispiel für eigene Backend (Process) Module
https://github.com/ryancramerdesign/FieldtypeMapMarker - Beispiel für ein Fieldtype und Inputfield Modul
https://processwire.com/blog/posts/building-custom-admin-pages-with-process-modules/ - super Tutorial zu Admin Modulen
https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-writing-modules-in-processwire--cms-26862

'''Wikiseiten'''
[[ProcessWire - Module Snippets]]
[[ProcessWire - Fieldtype erstellen (Module)]]
[[Process Module (ProcessWire)]]

'''Weitere Links'''
http://modules.pw/ (Module Creator)

== Wo - Was ? ==
=== Welche Typen von Modulen gibt es ? ===
https://processwire.com/docs/modules/types/
* '''Fieldtype''': Repräsentiert einen Datentyp. Meistens keine Public API, Handelt Daten / Datenbank - [[ProcessWire - Fieldtype erstellen (Module)]]
* '''Inputfield''': Sammelt User Eingaben über ein Formular im Admin Bereich. Im Gegensatz zum Fieldtype geht es hier um das UI im Backend. Das Handling der Daten liegt beim Fieldtype.
* [[Process Module (ProcessWire)|'''Process''' for creating admin processes/applications.]]
* '''Textformatter''' for formatting text.
* '''AdminTheme''' for creating themes in the admin.
* '''WireMail''' for modules that send email and extend the WireMail class.
* '''Tfa''' for implementing a specific kind of two-factor authentication.
* '''ImageSizerEngine''' for modules that extend ImageSizerEngine for resizing images.
* '''FileCompiler''' for modules that extend FileCompilerModule for compilation of files.
* '''FileValidator''' for modules that extend FileValidatorModule for validation of files.

=== Wie werden Felder in der Datenbank angelegt ? ===
Felder die in der Datenbank speichern sind vom Typ "Fieldtype", meistens in Kombination mit einem Inputfield das dann die Frontendausgabe übernimmt.
Module können auch für ihre eigene Konfiguration Daten in der Datenbank speichern. Das geht z.B. über eine ModulnameConfig Datei (s.u.).

=== Namenskonventionen ===
Ein Modulname sollte mit dem Typ den das Modul hat beginnen. Also etwa ProcessMeinAdminModul oder FieldtypeTable. ProcessWire listet das Modul dann in der Entsprechenden Kategorie auf. Wenn man etwas anderes nimmt z.B. LoginRegister dann kommt das Modul unter der neuen Rubrik "Login"

=== Konfigurierbare Module ===
Das geht seit 2.5.5 mittlerweile sehr einfach mit den neuen configuration-options.
https://processwire.com/blog/posts/new-module-configuration-options/
[[ProcessWire - Konfigurierbare Module]]

== Spezielle Funktionen in Modulen ==

=== Modulinformation ===
Das Modul stellt Infos zur Verfügung und nutzt dafür eine von 3 Methoden:
getModuleInfo() static method in your module class that returns an array.
YourModuleClass.info.php file that populates an $info array.
YourModuleClass.info.json file that contains an info object.

Hier werden title, version, summary und weitere Daten hinterlegt. Hier kann man auch angeben ob ein Modul ein Autoload Modul ist.

https://processwire.com/api/ref/module/

=== init ===
public function init(){}
Initialisiert das Modul. ProcessWire ruft diese Funktion auf, wenn das Modul geladen ist. Bei Autoload Modulen wird es aufgerufen wenn die ProcessWire API bereit ist. Daher ist es ein guter Ort um Hooks einzubinden.

=== ready ===
<syntaxhighlight lang="php">
public function ready() {
if($this->page->template == 'admin') {
$this->message($this->hi());
}
}
</syntaxhighlight>
Wird in autoload Modulen aufgerufen wenn die API bereit ist. Nützlich für Hooks:

=== execute ===
<syntaxhighlight lang="php">
/**
* This function is executed when a page with your Process assigned is accessed.
*
* This can be seen as your main or index function. You'll probably want to replace
* everything in this function.
*
*/
public function ___execute() {
// greetingType and greeting are automatically populated to this module
// and they were defined in ProcessHello.config.php
if($this->greetingType == 'message') {
$this->message($this->greeting);
} else if($this->greetingType == 'warning') {
$this->warning($this->greeting);
} else {
$this->error($this->greeting);
}
// generate some navigation
$out = "
<h2>$this->greeting</h2>
<dl class='nav'>
<dt><a href='./something/'>Do Something</a></dt>
<dd>Runs the executeSomething() function.</dd>
</dl>
";
return $out;
}
</syntaxhighlight>

=== executeSomething ===
Ruft man eine Unterseite des Moduls auf kann man eine eigene execute Funktion nutzen
___executeSlug wobei Slug für den Url Slug steht. Heißt der slug /field/ dann wird executeField() aufgerufen, falls diese Funktion existiert.
<syntaxhighlight lang="php">
/**
* Called when the URL is this module's page URL + "/something/"
*
*/
public function ___executeSomething() {
// set a new headline, replacing the one used by our page
// this is optional as PW will auto-generate a headline
$this->headline('This is something!');
// add a breadcrumb that returns to our main page
// this is optional as PW will auto-generate breadcrumbs
$this->breadcrumb('../', 'Hello');
$out = "
<h2>Not much to to see here</h2>
<p><a href='../'>Go Back</a></p>
";
return $out;
}
</syntaxhighlight>
* executeMySecondPage translates to my-second-page in the URL
* executeMysecondpage translates to mysecondpage in the URL

=== install & uninstall ===
<syntaxhighlight lang="php">

/**
* Called only when your module is installed
*
* If you don't need anything here, you can simply remove this method.
*
*/
public function ___install() {
parent::___install(); // always remember to call parent method
}
/**
* Called only when your module is uninstalled
*
* This should return the site to the same state it was in before the module was installed.
*
* If you don't need anything here, you can simply remove this method.
*
*/
public function ___uninstall() {
parent::___uninstall(); // always remember to call parent method
}
</syntaxhighlight>

== Vererbung und Eigenschaften in Modulen ==
Modules are not different from PHP classes.

To change the properties of MyModule class from within MyOtherModule class, you can either:

#Make MyOtherModule class extend MyModule. It will thus inherit MyModule's public and protected properties and methods
#Make the properties firstName and lastName configurable by passing them as parameters/arguments in MyModule's constructor method.

== Autoload Module und Hooks ==
Autoload werden automatisch geladen müssen also nicht in einem Template o.ä. gestartet werden. Daher bieten sie sich an um die Funktionalität von ProcessWire zu erweitern. Als Werkzeug dafür dienen Hooks. Mit Hooks kann man an vielen Stellen den Rendering Process der Seiten beeinflussen. Außerdem kann man für eigene Module ebenfalls Hooks bereitstellen.

=== Hooks ===
https://processwire.com/docs/modules/hooks/
Hooks sind ein mächtiges Werkzeug. Sie geben einem die Möglichkeit an vielen Stellen "einzuhaken" und Funktionalität einzubauen.
<syntaxhighlight lang="php">
public function ready() {
$this->addHookAfter('Page::render', function($event) {
$event->return .= '<p>Hallo</p>';
});
}
</syntaxhighlight>
Schreibt am Ende Jeder Seite ein "Hallo". Das $event Objekt ist ein [https://processwire.com/api/ref/hook-event/ HookEvent]. Im Beispiel fügen wir einfach etwas Markup hinzu. Über $event->arguments() kann man aber auf ale Argumente zugreifen.

Das gleiche aber nicht mit anonymer Funktion:
<syntaxhighlight lang="php">
public function ready() {
// add hook after Page::render() and make it call the "test" method of $this module
$this->addHookAfter('Page::render', $this, 'test');
}

public function test($event) {
// modify the return value of Page::render() to include the following:
$event->return .= '<p>Hallo</p>';
}
</syntaxhighlight>

=== Hooks zum erweitern von existierenden Klassen nutzen ===
Mit Hooks kann man in vorhandene Klassen einhaken. Z.B. läßt sich das Page Objekt erweitern.
<syntaxhighlight lang="php">
public function ready() {
$this->addHook('Page::summarize', $this, 'summarize');
}
public function summarize($event) {
$page = $event->object; // the $event->object represents the object hooked (Page)
$maxlen = $event->arguments(0); // first argument is the optional max length
if(!$maxlen) $maxlen = 200; // if no $maxlen was present, we'll use a default of 200
$summary = $this->sanitizer->truncate($page->body, $maxlen); // use sanitizer truncate method to create a summary
$event->return = $summary; // populate $summary to $event->return, the return value
}
</syntaxhighlight>
So kann man ganz einfach eine Zusammenfassung aller Kindseiten in einem Template rendern:
<syntaxhighlight lang="php">
foreach($page->children as $item) {
$summary = $item->summarize(150);
echo "<li><a href='$item->url'>$item->title</a><br>$summary";
}
</syntaxhighlight>

=== Autoload Module nur im Admin Bereich laden ===

'autoload' => 'template=admin'
statt
'autoload' => true

=== Hook Beispiele ===
Hook am Ende des Renderings
$this->addHookAfter('Page::render', function($event) {...});
Füge eine Funktion "summarize" zum Page Objekt hinzu.
$this->addHook('Page::summarize', $this, 'summarize');
Hook auf eine einzelne Instanz (hier pages Objekt)
$this->pages->addHookAfter('saved', function($event){...});
$this->addHook('Page::method', ...) // Spricht ALLE Instanzen an - Regelfall
$page->addHook('method', ...) // Spricht nur die EINE Instanz der Seite an.

== Module Dependencies - voneinander abhängige Module ==

https://processwire.com/talk/topic/778-module-dependencies/
Wenn ein Modul nicht ohne ein anderes funktioniert spricht man von Module Dependency. In solchen Fällen kann man in der Modul Info angeben In vielen Fällen besteht ein Modul unter der Haube aus mehreren Einzelmodulen.

Um ProcessWire mitzuteilen dass ein Modul benötigt wird gibt man es in der Moduldefinition an:
'requires' => "LazyCron" // added this line
oder auch mehrere als Array
'requires' => array("LazyCron", "AdminBar") // added this line

ProcessWire kann auch dafür sorgen, dass ein Modul andere "Kindmodule" gleich mitinstalliert bzw. deinstalliert wenn es nicht mehr benötigt wird. Dazu gibt man dem Modul noch die 'install' dependency mit:

<syntaxhighlight lang="php">
<?php
public static function getModuleInfo() {
return array(
'title' => 'Log Master',
'version' => 101,
'author' => 'Lumberjack Bob',
'summary' => 'Log all actions on your site',
'requires' => 'LazyCron',
'installs' => 'ProcessLogMaster' // added this line
);
);
</syntaxhighlight>

ProcessWire sieht dann eine Kindabhängigkeit zu diesem Modul und handelt auch das Deinstallieren, wenn das Elternmodul deinstalliert wird.

== CSS und JavaScript in Modulen ==
Bei Process Modulen möchte man für das Styling etc. im Backend oft CSS und JS Dateien hinzufügen.

Einfach Eine Datei MeinModul.css und / oder MeinModul.js hinzufügen. JQuery ist im Admin bereits geladen daher kann eine MeinModul.js Starter Datei so aussehen:

<pre>

/**
* This JS file is only loaded when the ProcessHello module is run
*
* You should delete it if you have no javascript to add.
*
*/

$(document).ready(function() {
// do something
});
</pre>

== Flexibler Umgang mit Templates - TemplateFile ==
TemplateFile sind eine Möglichkeit Templates zu Managen. Nützlich in Modulen oder in größeren Teams wo man sehr granuliert die Zugriffe über den Code steuern möchte.
https://processwire.com/talk/topic/291-simple-tutorial-on-how-to-use-templatefile-class/
https://processwire.com/api/ref/template-file/
<syntaxhighlight lang="php">
<?php

$out = new TemplateFile("./includes/my_markup.html");
$out->set('headline', $page->get("headline|title"));
$out->set('body', $page->body);
$out->set('sidebar', $page->sidebar);
$out->set('navigation', $pages->find("parent=/"));
echo $out->render();
</syntaxhighlight>

In my_markup.html kann man headline, body... einfach als Variablen setzen. Beim Rendern werden diese dann ersetzt.

== Beispiele ==
=== Felder und Templates erstellen ===
In einem Modul kann man Felder und Templates automatisch erstellen.
https://processwire.com/talk/topic/20533-solved-fields-templates-and-fieldgroups-how-do-they-interact/

For everyone not deeply into obscure PW vodoo magic, creating a template with fields is always:

Create a template
Create a fieldgroup with the same name as the template
Create your fields, save them and add them to the fieldgroup
Save the fieldgroup
Set the fieldgroup in the template
Save the template

* Are Fieldgroups required for adding fields to templates? What are these for?
** Yes, they are. As written above, they are just a necessary glue.
*What if I'd like to add fields after the template was saved and how can I add them to the same fieldgroup?
** Just add them to the fieldgroup
<pre>
$fg = $template->fieldgroup;
$fg->add($field);
$fg->save();
</pre>

=== Frontend Rendering Module ===
A bit old but working

<syntaxhighlight lang="php">
<?php

/**
* FrontEndRender
*
* Author: Ben Byford
*
* ProcessWire 2.x
* Copyright (C) 2010 by Ryan Cramer
* Licensed under GNU/GPL v2, see LICENSE.TXT
*
* http://www.processwire.com
* http://www.ryancramer.com
*
*/

class FrontEndRender extends WireData implements Module {

public static function getModuleInfo() {
return array(
'title' => 'FrontEndRender',
'version' => 0.1,
'summary' => "Outputs html and static variables to frontend",
'author' => 'Ben Byford',
'singular' => true,
'href' => 'https://github.com/benbyford/PW-starter-modules'
);
}

// protected variable only accessable within module
protected $name = 'Ben';

/*
* render function to be called in PW template like this:
* $FrontEndRender = $modules->getModule('FrontEndRender');
* echo '<h1>' . $FrontEndRender->render() . '</h1>';
*
*/
public function render(){
return "Hello " . $this->name;
}
}
?>
</syntaxhighlight>

=== ProcessWire Hello World Modul ===
Beispiel Modul mit Hooks (liegt immer in der Standardinstallation)
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* ProcessWire 'Hello world' demonstration module
*
* Demonstrates the Module interface and how to add hooks.
*
* See README file for further links regarding module development.
*
* This file is licensed under the MIT license
* https://processwire.com/about/license/mit/
*
* ProcessWire 3.x, Copyright 2016 by Ryan Cramer
* https://processwire.com
*
*/

class Helloworld extends WireData implements Module {

/**
* getModuleInfo is a module required by all modules to tell ProcessWire about them
*
* @return array
*
*/
public static function getModuleInfo() {

return array(

// The module's title, typically a little more descriptive than the class name
'title' => 'Hello World',

// version number
'version' => 3,

// summary is brief description of what this module is
'summary' => 'An example module used for demonstration purposes.',

// Optional URL to more information about the module
'href' => 'https://processwire.com',

// singular=true: indicates that only one instance of the module is allowed.
// This is usually what you want for modules that attach hooks.
'singular' => true,

// autoload=true: indicates the module should be started with ProcessWire.
// This is necessary for any modules that attach runtime hooks, otherwise those
// hooks won't get attached unless some other code calls the module on it's own.
// Note that autoload modules are almost always also 'singular' (seen above).
'autoload' => true,

// Optional font-awesome icon name, minus the 'fa-' part
'icon' => 'smile-o',
);
}

/**
* Initialize the module
*
* ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called
* when ProcessWire's API is ready. As a result, this is a good place to attach hooks.
*
*/
public function init() {

// add a hook after the $pages->save, to issue a notice every time a page is saved
$this->pages->addHookAfter('save', $this, 'example1');

// add a hook after each page is rendered and modify the output
$this->addHookAfter('Page::render', $this, 'example2');

// add a 'hello' method to every page that returns "Hello World"
// use "echo $page->hello();" in your template file to display output
$this->addHook('Page::hello', $this, 'example3');

// add a 'hello_world' property to every page that returns "Hello [user]"
// use "echo $page->hello_world;" in your template file to display output
$this->addHookProperty('Page::hello_world', $this, 'example4');
}

/**
* Example1 hooks into the pages->save method and displays a notice every time a page is saved
*
* @param HookEvent $event
*
*/
public function example1($event) {
/** @var Page $page */
$page = $event->arguments[0];
$this->message("Hello World! You saved {$page->path}.");
}

/**
* Example2 hooks into every page after it's rendered and adds "Hello World" text at the bottom
*
* @param HookEvent $event
*
*/
public function example2($event) {

/** @var Page $page */
$page = $event->object;

// don't add this to the admin pages
if($page->template == 'admin') return;

// add a "Hello World" paragraph right before the closing body tag
$event->return = str_replace("</body>", "<p>Hello World!</p></body>", $event->return);
}

/**
* Example3 adds a 'hello' method (not property) to every page that simply returns "Hello World"
*
* @param HookEvent $event
*
*/
public function example3($event) {
$event->return = "Hello World";
}

/**
* Example 4 adds a 'hello_world' property (not method) to every page that returns "Hello [user]"
*
* @param HookEvent $event
*
*/
public function example4($event) {
$event->return = "Hello " . $this->user->name;
}

}

</syntaxhighlight>

=== ProcessWire Admin Bereich mit eigener Funktionalität erweitern (Modul)===
https://webdesign.tutsplus.com/tutorials/extending-the-processwire-admin-using-custom-modules--cms-26863
<syntaxhighlight lang="php">

<?php
/**
* ProcessSimpleAdminPage
*
* @author Ben Byford
* http://www.benbyford.com
*
* @see http://www.processwire.com
*/

class ProcessSimpleAdminPage extends Process {

public static function getModuleInfo() {
return array(
'title' => 'Process Simple Admin Page',
'summary' => 'Simple Process module that adds new admin page with',
'version' => 001,

// Modules that extend Process may specify a 'page' attribute in the
// getModuleInfo(), this page will automatically be given the module
// process when added to teh pagetree.

// I have exampled but commented out the 'page' settings below
// so that I can show how one might add a page to install() and
// uninstall() in this and other modules (that might not extend
// Process)

// 'page' => array(
// 'name' => 'site-config',
// 'parent' => 'admin',
// 'title' => 'Site Config'
// )
);
}

public function execute() {
return '
<h2>Edit the text here in the module</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis eros vitae metus sodales eget suscipit purus rhoncus. Proin ultrices gravida dolor, non porttitor enim interdum vitae. Integer feugiat lacinia tincidunt. Nulla laoreet tristique tristique. Sed elementum justo a nisl elementum sit amet accumsan nisi tempor. Nulla quis eros et massa dignissim imperdiet a vitae purus.</p>

<p>Donec scelerisque pulvinar sem eu lobortis. Maecenas turpis ipsum, tempus dictum pharetra eu, consectetur vitae arcu. Fusce orci mauris, semper at tempus quis, volutpat molestie tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed quam tortor, tincidunt sed semper lacinia, scelerisque dapibus quam. Morbi at nisi luctus lacus auctor ultrices eu eu leo.</p>

<p>Praesent faucibus purus id felis tincidunt dignissim. Sed sit amet ligula mi, eget semper dui. Proin consectetur gravida massa, nec luctus purus hendrerit in. Etiam volutpat, elit non venenatis suscipit, libero neque consectetur diam, id rutrum magna odio ac ligula. Maecenas sollicitudin congue neque fermentum vestibulum. Morbi nec leo nisi. Donec at nisl odio, et porta ligula.</p>

<p>Sed quis arcu nisi, ac tempor augue. Praesent non elit libero, a ullamcorper lorem. Curabitur porta odio eu nunc ultricies interdum id nec risus. Donec nibh nibh, porta eget vehicula ac, aliquet eget ante. Phasellus eget lorem eu eros eleifend ultrices. Cras sit amet neque sit amet nibh fringilla cursus ut id mauris. Praesent quis nunc justo, sed suscipit lectus. Phasellus eget ultrices risus. Curabitur eu semper est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut suscipit, nisl ut imperdiet eleifend, turpis arcu placerat tortor, nec laoreet lacus neque ac tellus. Aenean ac lacus justo, quis ultricies nisi.</p>
';
}
public function install(){

// create new page to add to CMS
$page = new Page();

// add page attributes
$page->template = "admin";
$page->name = "cms-faq";
$page->title = "CMS FAQ";
$page->save();

// set this module as the page process, this allows us to display the above
$page->process = 'ProcessSimpleAdminPage';

// get admin page and set as page parent
$admin = $this->pages->get("id=2");
$page->parent = $admin;

// save page
$page->save();
}

public function uninstall(){

// delete created page
$page = $this->pages->get("name=cms-faq");
if(count($page)) $this->pages->delete($page, true);
}
}
</syntaxhighlight>

=== ProcessWire Textformatter Modul ===
https://webdesign.tutsplus.com/tutorials/extending-the-processwire-admin-using-custom-modules--cms-26863
<syntaxhighlight lang="php">
<?php

/**
* TextformatterFindReplace
*
* Author: Ben Byford
*
* ProcessWire 2.x
* Copyright (C) 2010 by Ryan Cramer
* Licensed under GNU/GPL v2, see LICENSE.TXT
*
* http://www.processwire.com
* http://www.ryancramer.com
*
*/

class TextformatterFindReplace extends Textformatter implements Module {

public static function getModuleInfo() {
return array(
'title' => 'TextformatterFindReplace',
'version' => 0.1,
'summary' => "Finds and replaces any instance of config input to config output",
'author' => 'Ben Byford',
'singular' => true,
'href' => 'https://github.com/benbyford/PW-starter-modules'
);
}

/**
* Find and Replace the input string
*
* @param string $str The block of text to parse
*
* The incoming string is replaced with the formatted version of itself.
**/

public function format(&$str) {
$find = $this->findStr;
$str = preg_replace_callback($find, array($this,"replace"), $str);

}

// adding three underscores to a function allows other modules to hook it
public function ___replace($match) {
return $this->replaceStr;
}
}
?>
</syntaxhighlight>

=== Admin Funktionalität: Countdown zum Seitenveröffentlichen ===
https://webdesign.tutsplus.com/tutorials/extending-the-processwire-admin-using-custom-modules--cms-26863

The module PageDeferredPublish, on clicking one of the '''Publish Later buttons''', sets LazyCron to check that page’s countdown every minute and publishes the page when its countdown reaches 0. This means I can publish a page approximately 24 hours in advance (obviously the checking interval and delay time can be changed to your requirements).

I did this by:

'''Creating two fields''' within my install() function: a checkbox field to set to true when a button is checked to indicate the page should countdown, and a countdown field to store the count in seconds for that specific page.

'''Adding hooks''' to both ''ProcessPageEdit::buildForm'' and ''ProcessPageListActions::getExtraActions'' enabling me to add the two buttons.

Checking to see if one of the buttons was clicked with my '''ready() function''' then setting the corresponding page’s checkbox to true.

Using a '''LazyCron hook function''' to check all pages that are unpublished for true checkboxes and then comparing the seconds field to see if the page needs publishing. If not then deduct the elapsed time in seconds.

The result is a '''module that has settings''' (the time interval to check and publish at a later time), '''hooks into the admin''' using buttons and fields, and enables us to '''use other modules installe'''d in PW (i.e. LazyCron).

<syntaxhighlight lang="php">
<?php
/**
* DeferredPublish (0.0.1)
* DeferredPublish publishes a page after a defined amount of time has elapsed using lazycron.
*
* @author Ben Byford
* http://www.benbyford.com
*
* ProcessWire 2.x
* Copyright (C) 2011 by Ryan Cramer
* Licensed under GNU/GPL v2, see LICENSE.TXT
*
* http://www.processwire.com
* http://www.ryancramer.com
*
*/

class PageDeferredPublish extends WireData implements Module {

public static function getModuleInfo() {
return array(
'title' => "PageDeferredPublish",
'version' => "0.0.1",
'summary' => "PageDeferredPublish",
'author' => "Ben Byford",
'href' => "https://github.com/benbyford/PW-intermediate-modules",
'icon' => "clock-o",
'autoload' => true,
'singular' => true,
'requires' => "LazyCron",
);
}

private $postPubLater = null;
private $pageID = null;
private $pagePubLater = null;
private $currentPage = null;

private $submitName = 'pdp_pub_later_submit';
private $listPageName = 'pdp_pub_later_list';
private $fieldName = 'pdp_pub_later';
private $checkboxName = 'pdp_pub_later_check';

private $defaultInterval = 'everyMinute';
private $defaultTime = 86400;

public function install(){
// add new fields needed for module
$this->installFields();
}
public function uninstall(){
// uninstall fields
$this->uninstallFields();
}

// initialize the hook in your AutoLoad module
public function init() {

// get defaults from module setting in CMS
$this->defaultTime = $this->pub_after;
$this->defaultInterval = $this->cron_check;

// get admin URL
$this->adminUrl = $this->wire('config')->urls->admin;

// add hooks to CRON, PageList, PageEdit
$this->addHookAfter("LazyCron::{$this->defaultInterval}", $this, 'publishDefferedPages');
$this->addHook("ProcessPageListActions::getExtraActions", $this, 'hookPageListActions');
$this->addHookAfter("ProcessPageEdit::buildForm", $this, "editForm");
}

public function ready() {

// if list button clicked then grab id
$this->pagePubLater = $this->input->get($this->listPageName);
$this->pageID = $this->input->id;

// get page
$this->currentPage = $this->pages->get($this->pageID);

// if pagelist pub later submit button clicked
if($this->pagePubLater){
$this->message("Page {$this->currentPage->name} deffered for publish.");
}

// if page edit submit button clicked
$this->postPubLater = $this->input->post($this->submitName);
if($this->postPubLater){
$this->message("Page {$this->currentPage->name} deffered for publish.");
}

// if either deffered publish sumbit found then publish page later
if($this->pagePubLater || $this->postPubLater){
$this->publishLater();
}
}

/*
* Hook: ProcessPageEdit::buildForm
*
* add Publish Later button to edit page if not yet published
*/
public function ___editForm(HookEvent $form) {

// get the InputFieldForm object from the event (return value of buildForm())
$form = $form->return;

$page = $this->pages->get($this->input->get->id);
$check = $page->get($this->checkboxName);

// check if publish button available and therfore unpublished
$target = $form->get('submit_publish');

if($target && $check == false){

// get InputfieldText module
$submit2 = $this->modules->get('InputfieldSubmit');
$submit2->attr('name', $this->submitName);
$submit2->attr('id', 'publish_later');
$submit2->attr('class', 'ui-button ui-widget ui-corner-all head_button_clone ui-state-default ui-priority-secondary');
$submit2->attr('value', 'Publish Later'); // Button: save unpublished

// get form element save and place before
$target = $form->get('submit_save');
$form->insertBefore($submit2, $target);

$form->return = $form;
}
}

public function ___hookPageListActions(HookEvent $event) {

// get current page
$page = $event->arguments[0];

// check to see if page is published
$pagePub = $page->is(Page::statusUnpublished);

// check to see if page template has deffered field
$pageHasDefferField = $page->get($this->fieldName);

$actions = array();

// don't get homepage or pages that are already published or are being deffered for publish
if($page->id > 1 && $pagePub == "published" && !is_null($pageHasDefferField) && $page->get($this->checkboxName) == false) {

$actions['publish_later'] = array(
'cn' => 'PublishLater',
'name' => 'pub later',
'url' => "{$this->adminUrl}?{$this->listPageName}=1&id={$page->id}",
);
}
if(count($actions)) $event->return = $actions + $event->return;
}

/*
* Publish Page on cron job
*
* Gets deffered page and publishes
*/
public function ___publish($page) {
$page->removeStatus(Page::statusUnpublished);
$page->removeStatus(Page::statusHidden);
$page->Save();
}

/*
* Main publish later function
*
* Gets deffered page and sets fields to be checked be lazy cron
*/
private function ___publishLater() {

// get page
$page = $this->pages->get($this->pageID);

// set output formatting to false
$page->of(false);

// set field time to settings default time and checkbox to true
$page->set($this->checkboxName, true);
$page->set($this->fieldName, $this->defaultTime);

// save page
$page->save();
$page->of(true);
}

/*
* Lazy Cron hook function
*
* Triggers every [set time interval] and checks pages
* Publishes page if time runout
*
* Adds publish page log
*/
public function ___publishDefferedPages(HookEvent $e){

// seconds since last lazycron
$seconds = $e->arguments[0];

// find all pages with deffered field
$defferedPages = $this->pages->find("{$this->checkboxName}=1,include=unpublished");

// for each page decrease time for deffered field
foreach ($defferedPages as $page) {

// get current page time
$timeTillPublish = $page->get($this->fieldName);

// set time to time minus time past
$timeLeft = $timeTillPublish - $seconds;

// if time passed 0 or less then publish page
$page->of(false);
if($timeLeft <= 0){
// remove flags and save
$this->publish($page);

$page->set($this->fieldName, 0);
$page->set($this->checkboxName, 0);

// log a page has been published
$log = wire('log');
$log->message('CRON:'. $seconds .' Pages: '. $page->name .' published');
}else{
$page->set($this->fieldName, $timeLeft);
}
// save page time
$page->Save();
$page->of(true);
}
}

/*
* Install new module specific fields
*/
private function installFields(){

// install pub later checkbox field
// find installed fields
$f = $this->fields->get($this->fieldName);
if($f){

// if field already found then don't try and make it
$this->message($this->fieldName . ' field found');

}else{

// create new field object to store crontime
$f = new Field();
// get a field type
$f->type = $this->modules->get("FieldtypeInteger");
$f->name = $this->fieldName;
$f->label = 'Publish Time Left';
$f->defaultValue = $this->defaultTime;
$f->icon = 'clock-o';
$f->columnWidth = 50;
$f->collapsed = 1;
$f->flags = 4;

$f->save(); // save the field

// create new field object to store whether to publish or not
$f = new Field();
// get a field type
$f->type = $this->modules->get("FieldtypeCheckbox");
$f->name = $this->checkboxName;
$f->label = 'Publish Page later';
$f->defaultValue = false;
$f->columnWidth = 50;
$f->icon = 'clock-o';
$f->collapsed = 1;
$f->flags = 4;

$f->save(); // save the field
}
}

/*
* Uninstall module specific fields
*/
private function uninstallFields(){

// find installed fields
$fInt = $this->fields->get($this->fieldName);
$fCheck = $this->fields->get($this->checkboxName);

if($fInt && $fCheck){
$fieldIntUsed = $fInt->numFieldgroups();
$fieldCheckUsed = $fCheck->numFieldgroups();

if($fieldIntUsed){
// field in use by template
$this->message('Unable to uninstall field '.$fInt->name);
}else{
// delete installed fields
$this->fields->delete($fInt);
$this->fields->save;
}

if($fieldCheckUsed){
// field in use by template
$this->message('Unable to uninstall field '.$fCheck->name);
}else{
// delete installed fields
$this->fields->delete($fCheck);
$this->fields->save;
}
}
}
}
</syntaxhighlight>

=== Inputfield / Fieldtype ===
[[ProcessWire - Fieldtype erstellen (Module)]]

=== Konfigurationsdatei statt getModuleInfo ===
Bei größeren Konfigruation (z.B. Admin Page Navigation) sinnvoll.
<syntaxhighlight lang="php">
<?php
/**
* ProcessHello.info.php
*
* Return information about this module.
*
* If preferred, you can use a getModuleInfo() method in your module file,
* or you can use a ModuleName.info.json file (if you prefer JSON definition).
*
*/
$info = array(
// Your module's title
'title' => 'Hello: Process Module Example',
// A 1 sentence description of what your module does
'summary' => 'A starting point module skeleton from which to build your own Process module.',
// Module version number: use 1 for 0.0.1 or 100 for 1.0.0, and so on
'version' => 1,
// Name of person who created this module (change to your name)
'author' => 'Ryan Cramer',
// Icon to accompany this module (optional), uses font-awesome icon names, minus the "fa-" part
'icon' => 'thumbs-up',
// URL to more info: change to your full modules.processwire.com URL (if available), or something else if you prefer
'href' => 'http://modules.processwire.com/',
// name of permission required of users to execute this Process (optional)
'permission' => 'helloworld',
// permissions that you want automatically installed/uninstalled with this module (name => description)
'permissions' => array(
'helloworld' => 'Run the HelloWorld module'
),

// page that you want created to execute this module
'page' => array(
'name' => 'helloworld',
'parent' => 'setup',
'title' => 'Hello World'
),
// optional extra navigation that appears in admin
// if you change this, you'll need to a Modules > Refresh to see changes
'nav' => array(
array(
'url' => '',
'label' => 'Hello',
'icon' => 'smile-o',
),
array(
'url' => 'something/',
'label' => 'Something',
'icon' => 'beer',
),
)
// for more options that you may specify here, see the file: /wire/core/Process.php
// and the file: /wire/core/Module.php
);
</syntaxhighlight>

== Interessantes - Read On ==
https://processwire.com/talk/topic/24067-solved-settings-fields-that-dont-save-to-database/
https://processwire.com/talk/topic/24075-solved-create-field-and-add-to-template/
[[ProcessWire Modules - common functions]]

E-Mail Probleme beheben

2022-09-08T13:01:26Z

134.3.84.225: /* Siehe auch */

== Siehe auch ==
All-inkl - Newsletter Anbieter einrichten
[[TYPO3 - E-Mail]]
https://it-stack.de/30/05/2018/anti-spam-basics-fuer-versender-spf-dkim-dmarc-mehr/

== Testtools ==
https://mxtoolbox.com/SuperTool.aspx

== Spam Codes ==
https://www.futurequest.net/docs/SA/ (Spam Assasin Liste mit Scorewerten)
Codes die den Spam Level verändern können
FREEMAIL_FORGED_REPLYTO -> Freemail in Reply-To, aber nicht in From
HEADER_FROM_DIFFERENT_DOMAINS
HTML_MESSAGE
RCVD_IN_DNSWL_NONE
RDNS_NONE - hoher Score: Delivered to internal network by a host with no rDNS
SPF_HELO_NONE - kein spf eintrag nicht so schlimm

== Diverses ==
Make sure you have SPF, DMARC, DKIM, and sign up for their JMRP and SDNS they will tell you.

== SPF ==
https://all-inkl.com/wichtig/anleitungen/kas/tools/dns-werkzeuge/spf_482.html
'''SPF, Sender Policy Framework''', ist ein Standard zur Überprüfung des Absenders einer E-Mail und '''vermutlich der wichtigste Anti-Spam-Indikator'''. SPF ist ein TXT-Eintrag im DNS der Absender-Domain und leicht zu setzen.

Etwas mehr Wissen erfordert unter Umständen das '''Generieren des TXT Eintrags'''. Hier muss beachtet werden, welche Mailserver und Maildienste für das Versenden der Mails benutzt werden. Wenn ich den Mailserver meines Webhosters nutze, jedoch Mails über die Googlemail Weboberfläche schicke (E-Mail über SMTP eingebunden), muss ich das im SPF-Eintrag beachten. Hierzu gibt es von fast allen Anbietern entsprechende Infos/Hilfeseiten, etwas googeln hilft hier schnell.

Ein beispielhafter SPF-Eintrag, der Google als Relay inkludiert, könnte so aussehen:
v=spf1 a mx include:_spf.google.com ~all
* Kein ptr im SPF eintragen, wenn MX gesetzt ist, auch wenn das viele Generatoren immernoch machen.
* Überprüfung mit SPF Check der MXToolBox. Weitere Infos findet ihr bestimmt in der Hilfe eures Maildienstleisters/Hosters mit der Suche nach „SPF“.

=== Syntax ===
Erklärungen zur Syntax von SPF:

Am Anfang des SPF Records wird mit v= die SPF-Version festgelegt. Bislang gibt es nur spf1. Danach werden üblicherweise Direktiven angegeben. Diese bestehen aus einem optionalen Qualifikator und einem Mechanismus.

'''Qualifikatoren:'''

+ Pass - autorisierte Sender, daher Annahme der E-Mail; Standard, wenn kein Qualifikator explizit angegeben wird
- Fail - nicht autorisierte Sender, daher Abweisung der E-Mail
~ SoftFail - nicht autorisierte Sender, E-Mail wird trotzdem angenommen, kann jedoch z.b. als Spam markiert werden
? Neutral - Sender, über deren Gültigkeit nichts gesagt werden kann und die akzeptiert werden müssen, daher Annahme der E-Mail

gängige Mechanismen (=Befehle):

a A-/AAAA-Record der abgefragten oder explizit angegebenen Domain
mx MX-Record der abgefragten oder explizit angegebenen Domain
ptr PTR-Record der abgefragten oder explizit angegebenen Domain
ip4 IPv4-Adresse oder IPv4-Subnetz
ip6 IPv6-Adresse oder IPv6-Subnetz
include SPF-Abfrage der angegebenen Domain, diese sollte einen gültigen SPF-Record besitzen
all immer

Sofern für einen Mechanismus ein Argument übergeben werden soll, dann trennen Sie dies mit einem Doppelpunkt.

=== Beispiele ===
Beispiel für einen sehr gängigen Eintrag
v=spf1 mx a -all
Dieser bedeutet, dass für alle E-Mails, die von Sendern kommen, die sich nicht aus dem A- bzw. MX-Record des DNS ergeben, ein negatives Ergebnis zurückgegeben wird.

v=spf1 a:mail.example.org -all
Mails erlaubt, wenn sie aus den DNS Einträgen der Hauptdomain hervorgehen (-all) oder wenn es vom Server mit dem A-Record zu mail.example.org gehört.

== Mehrere Server im SPF Eintrag ==
Möchten Sie die '''IP eines E-Mail-Server''' in einen SPF-Eintrag aufnehmen, geben Sie vor dem Argument ~all die IP-Adresse des Servers ein. Verwenden Sie das '''Format ip4:Adresse oder ip6:Adresse''', wie in diesem Beispiel:
v=spf1 ip4:172.16.254.1 include:_spf.google.com ~all
Soll die '''Domain eines E-Mail-Servers''' hinzugefügt werden, verwenden Sie für jede Domain eine "'''include'''"-Anweisung. Beispiel:
v=spf1 include:serverdomain.com include:_spf.google.com ~all

=== SPF-Beispiele ===
https://stackoverflow.com/questions/14261214/too-many-dns-lookups-in-an-spf-record?rq=1
==== Amazon SES ====
Here are the TXT records we currently use successfully for Amazon SES as per Authenticating Your Email Address and (it's indeed unfortunate that their documentation doesn't address the quoting needs):

"v=spf1 include:amazonses.com ~all"
"spf2.0/pra include:amazonses.com ~all"

== DKIM ==
DKIM Signiert die Mails, so kann der Empfänger kontrollieren, ob der Inhalt unverändert ankommt. Also erstmal kein Spam Tool.

DKIM, DomainKeys Identified Mail (Standard, Wikipedia), ist wie SPF ebenfalls ein Protokoll zur Überprüfung von eingehenden Mails und deren unverändertem Inhalt.
DKIM nutzt zur Überprüfung eine asymmetrische Verschlüsselungstechnik mit zwei Schlüsseln – einem privaten Schlüssel, der Mails unsichtbar angehängt wird und einem öffentlichen Schlüssel, abgelegt im DNS des Absenders.

Somit kann der Empfänger-Mailserver die Schlüssel aus dem Absender DNS und der Mail-Signatur gegeneinander prüfen und validieren. Das Hinzufügen des privaten Schlüssels in den Mailserver, damit dieser unsichtbar alle ausgehenden Mails damit signiert, erfordert eine fortgeschrittene Anpassung des Mailservers bzw. Konfiguration des Mailers und übersteigt den Rahmen dieses Artikels. Für GMail-Nutzer hilft die Google DKIM Step-by-Step-Anleitung, ansonsten wieder beim Anbieter/Hoster in der Hilfe schauen bzw. Support fragen.

Der zweite Teil besteht aus einem TXT DNS Record, der zuvor generiert werden muss. Benötigt wird dafür die Domain und ein „Selektor“; eine beliebige Zeichenkette, z.B. „meindkim1“. Der Record sollte immer mit v=DKIM1;k=rsa;p= anfangen! Selbst wenn die Generatoren gerne einen der Parameter v oder k weglassen, oder diese als optional angeben, sollten beide gesetzt sein. Info: Beide Überprüfungs-Tools (MxToolBox und GSuite MX-Check) bestätigen einen validen DKIM übrigens nur mit Parametern v UND k, Warnungen falls einer fehlt. Die Überprüfung von DKIM erfordert dann ebenfalls Domain und Selektor und sollte anschließend positiv ausfallen.

Aber Achtung: Ausschließlich den DKIM DNS Eintrag zu setzen, ohne die Mails zu signieren, hat keine weiteren positiven Auswirkungen (meistens aber auch keine negativen) und ist daher nicht zu empfehlen.

=== DKIM bei all-inkl aktivieren ===
https://all-inkl.com/wichtig/anleitungen/providerwechsel/einrichtung/dns/dkim-bei-versand-ueber-unsere-mailserver_541.html
* In den Domaineinstellungen DKIM aktivieren.
* Der passende DNS Eintrag wird automatisch ergänzt und sieht ungefähr so aus:
Name: kas202005201235._domainkey.meineDomain.de
Typ: TXT
Eintrag: v=DKIM1; k=rsa; p=MIIB[MEHR SCHLÜSSELINHALT]QAB

== DMARC ==
https://elasticemail.com/dmarc (Generator für DMARC Einträge)

DMARC, Domain-based Message Authentication, Reporting, and Conformance (Standard, Wikipedia)

Technologie zur Erweiterung von SPF und DKIM. Geliefert werden zusätzliche Informationen, wie der Empfängerserver mit geprüften Mails umgehen soll sowie die Möglichkeit von Reports der Überprüfungen.

Auch hier ein DNS TXT Eintrag, der die Infos liefert. Zwei grundlegende Fragen müsst ihr euch stellen:
# Wie sollen Mails behandelt werden, deren SPF/DKIM-Überprüfung fehlschlägt? Ignorieren / Spam / Abweisen.
# Sollen Daten und fehlgeschlagene Überprüfungen als Reports verschickt werden und an welche Mail-Adresse?

Solltet ihr mit „Ignorieren“ dem Empfangsserver kein Verhalten vorschreiben wollen und auch keinerlei Reporting wünschen (v=DMARC1;p=none;), erfüllt DMARC keinen Zweck und hat auch keine weiteren Effekte auf den Mailempfang, kann also ausgelassen werden.

Restriktiveres Verhalten oder Reporting gewünscht? Dann wird einer der vielen existierenden Generatoren aus den gewählten Optionen einen einfachen bis recht komplexen TXT Record erstellen:
v=DMARC1; p=none; rua=mailto:admin@it-stack.de; ruf=mailto:admin@it-stack.de; fo=1;
Dieser Eintrag schickt Reportings an mich, wenn SPF oder DKIM fehlschlägt sowie generelle Reports, der Mailserver soll die Fehlschläge jedoch wie gewohnt behandeln, ich gebe kein strikteres Vorgehen vor.

== Blacklists ==
Es gibt eine Vielzahl von professionell betriebenen Anti-Spam-Listen, also Blacklists, die von Mailservern zur weiteren Überprüfung abgefragt werden können. Ob mein Mailserver auf einer Blacklist steht, kann ich beispielsweise mit der MxToolBox Blacklist Suche herausfinden. Gebt hier eure Domain ein und eine Auswertung von über 100 Blackslists wird eventuelle Funde aufzeigen. Solltet euer Mailserver nicht die IP eurer Domain teilen oder weitere in das Mailing involvierten MX-Server-IPs bekannt sein, diese am besten auch noch testen.
Eure Domain/IP ist in einer Blacklist gefunden worden? Das ist unpraktisch, kann aber mal passieren. Geblacklistet werden für gewöhnlich ganze Server. Auf einem Shared Server, wie das bei Webhosting fast immer der Fall ist, sind, je nach Vertrag, 20 bis 100 weitere Kunden untergebracht. Die Chance, dass ein anderer Kunde für das Blacklisting verantwortlich ist, ist hoch.
Was tun? Auf der Betreiberseite der Blacklist gibt es meistens Suchen/Informationsportale, in denen Blacklist-Kandidaten, teilweise mit mehr Details und Begründung, gesucht werden können. Ich empfehle zwei Recherchen: Suche nach der Domain und nach der/den IPs.
So kann es sein, dass die IP-Adresse des Servers in mehreren Einträgen gefunden wird (Reportfunde bei Spamhaus ZEN: Link1, Link2, in welchen wiederum eure Domain nicht erwähnt wird), für die Domain jedoch kein Eintrag vorhanden ist. Das sind weitere Hinweise darauf, dass nicht ihr, sondern ein anderer Kunde des Servers Schuld hat.
Unabhängig von diesen Recherchen könnt ihr vermutlich wenig gegen das Blacklisting tun. Manche Betreiber bieten Unblock Formulare an, andere nicht. Informiert auf jeden Fall euren Webhoster/Mailing-Anbieter mit allen herausgefundenen Informationen über das Blacklisting – dieser hat für gewöhnlich andere Optionen und kann direkt selbst in die Behandlung der Problemursache, also gegen entsprechende Kunden, vorgehen.

== User Trust ==
Desweiteren hilft es, sich zusätzlich Trust über den User/Empfänger zu holen – beispielsweise durch das Hinzufügen eurer Absenderadresse zu den Kontakten, das Markieren der Nachrichten als „Wichtig“ oder Versehen mit Sternchen/Markern (je nach Client heißt das anders), den Absender „Nie als Spam markieren“ (ebenfalls je Client anders) und mehr. Alles, was man mit einer Mail oder einem Absender bei dem jeweiligen Anbieter des Empfängers tun kann, dass letztlich einen positiven Effekt hat. Die Anbieter speichern solche Informationen (wie oft wurde eine Mail mit Inhalt X positiv behandelt, wie oft der Absender usw.) und behandeln Mails dieses Absenders zukünftig besser. Diese Maßnahme kann man bis zu einer gewissen Anzahl mit den eigenen Mitarbeitern starten – Mails an ihre private Mailadresse schicken, bestenfalls bei unterschiedlichen Anbietern, und die Mails von ihnen „positiv behandeln“ lassen.

Mac - Bootable USB Stick erzeugen

2022-09-07T16:35:30Z

134.3.84.225: /* = */

Einen bootable USB Stick benötigt man z.b. zur Installation von Betriebssystemen wie Linux. Aber auch Windows 10 oder 11 ist möglich.
Mit dem Mac Terminal hat man alle benötigten Tools.

== Beispiel Ubuntu ISO auf bootable USB Stick: ==
Quelle (Zugriff 2022-09-07)
https://www.cyberciti.biz/faq/creating-a-bootable-ubuntu-usb-stick-on-a-debian-linux/

=== Step 1 – Download Ubuntu .iso image ===

Visit the Ubuntu.com and grab the desktop or server CD/DVD iso image.
=== Step 2 – Find your usb device name on Linux ===

Insert your USB stick and type the following df command to see if it is mounted automatically on a Debian or any other Linux desktop system:

df

Sample outputs (see /media/vivek/data that is my USB):
<pre>
Filesystem 1K-blocks Used Available Use% Mounted on
udev 16432268 0 16432268 0% /dev
tmpfs 3288884 26244 3262640 1% /run
/dev/mapper/md0_crypt 491076512 9641092 456420380 3% /
tmpfs 16444408 105472 16338936 1% /dev/shm
tmpfs 5120 4 5116 1% /run/lock
tmpfs 16444408 0 16444408 0% /sys/fs/cgroup
/dev/sdc1 122546800 124876 116153868 1% /boot
tmpfs 3288880 24 3288856 1% /run/user/119
tmpfs 3288880 72 3288808 1% /run/user/1000
/dev/sdd1 1467360 1467360 0 100% /media/vivek/data
</pre>
You can try the ''lsblk'' command or dmesg command as well to list your usb devices:
lsblk
dmesg

You need to '''unmount''' /media/vivek/data:
sudo umount /media/vivek/data

Or try:
sudo umount /dev/sdd1

'''Another option''' is to run ''dmesg'' command to '''find out usb device name:'''

sudo dmesg

Sample outputs:
<pre>
[461339.310378] usb 2-1.7: new high-speed USB device number 12 using ehci-pci
[461339.420453] usb 2-1.7: New USB device found, idVendor=0781, idProduct=558a
[461339.420457] usb 2-1.7: New USB device strings: Mfr=1, Product=2, SerialNumber=3
[461339.420460] usb 2-1.7: Product: Ultra
[461339.420461] usb 2-1.7: Manufacturer: SanDisk
[461339.420463] usb 2-1.7: SerialNumber: FooBarNixCraftSerialNumber
[461339.421010] usb-storage 2-1.7:1.0: USB Mass Storage device detected
[461339.421457] scsi host6: usb-storage 2-1.7:1.0
[461340.431909] scsi 6:0:0:0: Direct-Access SanDisk Ultra 1.00 PQ: 0 ANSI: 6
[461340.432886] sd 6:0:0:0: Attached scsi generic sg4 type 0
[461340.433448] sd 6:0:0:0: [sdd] 121307136 512-byte logical blocks: (62.1 GB/57.8 GiB)
[461340.435434] sd 6:0:0:0: [sdd] Write Protect is off
[461340.435438] sd 6:0:0:0: [sdd] Mode Sense: 43 00 00 00
[461340.436405] sd 6:0:0:0: [sdd] Write cache: disabled, read cache: enabled, doesn't support DPO or FUA
[461340.449612] sdd: sdd1 sdd2
</pre>
It is clear that /dev/sdd is my usb stick device name. '''You can also use the lsblk command.''' For example:

lsblk
=== Step 3 – Verify Ubuntu .iso CD/DVD image file ===
'''TIP:''' You can find DVD iso image checksum such as 443511f6bf12402c12503733059269a2e10dec602916c0a75263e5d990f6bb93 on Ubuntu.com download page itself.

However, I like to verify my download. For example:
ls -l ubuntu-20.04.1-live-server-amd64.iso

echo "443511f6bf12402c12503733059269a2e10dec602916c0a75263e5d990f6bb93 *ubuntu-20.04.1-live-server-amd64.iso" \
| shasum -a 256 --check

You should get the following output:
ubuntu-20.04.1-live-server-amd64.iso: OK

Once verified you can write it to the USB device.
=== Step 4 – Create a bootable USB stick on Linux ===

'''Warning: Be careful with the USB stick/pen/disk names. Wrong names always result in data loss. Make sure you type the correct name.'''

Type the following dd command to create a bootable USB image from a .ISO file:
sudo dd if=artful-desktop-amd64.iso of=/dev/sdd bs=1M status=progress

Another example:

sudo dd if=ubuntu-20.04.1-live-server-amd64.iso of=/dev/sda bs=1M status=progress

The dd command will write process data to a usb stick (/dev/sdd or /dev/sda)and a progress bar appears on screen.
Ubuntu to create a bootable Ubuntu USB flash drive from terminal

In this example I am going to create a bootable flash drive for ubuntu-18.04.3-live-server-amd64.iso file as follows:

sudo dd if=/isos/ubuntu-18.04.3-live-server-amd64.iso of=/dev/sdb bs=1M status=progress

Ubuntu iso bootable USB create using dd command on Linux

'''Another example'''

sudo dd if=/isos/ubuntu-19.04-live-server-amd64.iso of=/dev/sdb bs=1M status=progress

Here is what I see:

748+0 records in
748+0 records out
784334848 bytes (784 MB, 748 MiB) copied, 119.174 s, 6.6 MB/s

'''Understanding the dd command options'''

dd : Start the dd command to write DVD/CD iso image.
if=/iso/ubuntu.iso : Path to input file.
of=/dev/sdd : Path to destination USB disk/stick.
bs=1M : read and write up to BYTES bytes at a time. In this example, 1M at a time.
status=progress : Display progress bar while writing image to the USB stick such as /dev/sdd. See “Linux dd Command Show Progress Copy Bar With Status” for more info.

=== Step 5: Install Ubuntu using newly created USB drive ===

That’s all, folks! You now have Ubuntu on a USB stick, bootable and ready to install on your Laptop, Desktop or server based system.
Conclusion

You learned how to create a bootable usb pen drive from downloaded Ubuntu desktop or server .ISO image. See Ubuntu download page.

Mac - Bootable USB Stick erzeugen

2022-09-07T16:35:05Z

134.3.84.225: Die Seite wurde neu angelegt: „Einen bootable USB Stick benötigt man z.b. zur Installation von Betriebssystemen wie Linux. Aber auch Windows 10 oder 11 ist möglich. Mit dem Mac Terminal ha…“

Einen bootable USB Stick benötigt man z.b. zur Installation von Betriebssystemen wie Linux. Aber auch Windows 10 oder 11 ist möglich.
Mit dem Mac Terminal hat man alle benötigten Tools.

== Beispiel Ubuntu ISO auf bootable USB Stick: ==
Quelle (Zugriff 2022-09-07)
https://www.cyberciti.biz/faq/creating-a-bootable-ubuntu-usb-stick-on-a-debian-linux/

=== Step 1 – Download Ubuntu .iso image ===

Visit the Ubuntu.com and grab the desktop or server CD/DVD iso image.
=== Step 2 – Find your usb device name on Linux ===

Insert your USB stick and type the following df command to see if it is mounted automatically on a Debian or any other Linux desktop system:

df

Sample outputs (see /media/vivek/data that is my USB):
<pre>
Filesystem 1K-blocks Used Available Use% Mounted on
udev 16432268 0 16432268 0% /dev
tmpfs 3288884 26244 3262640 1% /run
/dev/mapper/md0_crypt 491076512 9641092 456420380 3% /
tmpfs 16444408 105472 16338936 1% /dev/shm
tmpfs 5120 4 5116 1% /run/lock
tmpfs 16444408 0 16444408 0% /sys/fs/cgroup
/dev/sdc1 122546800 124876 116153868 1% /boot
tmpfs 3288880 24 3288856 1% /run/user/119
tmpfs 3288880 72 3288808 1% /run/user/1000
/dev/sdd1 1467360 1467360 0 100% /media/vivek/data
</pre>
You can try the ''lsblk'' command or dmesg command as well to list your usb devices:
lsblk
dmesg

You need to '''unmount''' /media/vivek/data:
sudo umount /media/vivek/data

Or try:
sudo umount /dev/sdd1

'''Another option''' is to run ''dmesg'' command to '''find out usb device name:'''

sudo dmesg

Sample outputs:
<pre>
[461339.310378] usb 2-1.7: new high-speed USB device number 12 using ehci-pci
[461339.420453] usb 2-1.7: New USB device found, idVendor=0781, idProduct=558a
[461339.420457] usb 2-1.7: New USB device strings: Mfr=1, Product=2, SerialNumber=3
[461339.420460] usb 2-1.7: Product: Ultra
[461339.420461] usb 2-1.7: Manufacturer: SanDisk
[461339.420463] usb 2-1.7: SerialNumber: FooBarNixCraftSerialNumber
[461339.421010] usb-storage 2-1.7:1.0: USB Mass Storage device detected
[461339.421457] scsi host6: usb-storage 2-1.7:1.0
[461340.431909] scsi 6:0:0:0: Direct-Access SanDisk Ultra 1.00 PQ: 0 ANSI: 6
[461340.432886] sd 6:0:0:0: Attached scsi generic sg4 type 0
[461340.433448] sd 6:0:0:0: [sdd] 121307136 512-byte logical blocks: (62.1 GB/57.8 GiB)
[461340.435434] sd 6:0:0:0: [sdd] Write Protect is off
[461340.435438] sd 6:0:0:0: [sdd] Mode Sense: 43 00 00 00
[461340.436405] sd 6:0:0:0: [sdd] Write cache: disabled, read cache: enabled, doesn't support DPO or FUA
[461340.449612] sdd: sdd1 sdd2
</pre>
It is clear that /dev/sdd is my usb stick device name. '''You can also use the lsblk command.''' For example:

lsblk
=== Step 3 – Verify Ubuntu .iso CD/DVD image file ===
'''TIP:''' You can find DVD iso image checksum such as 443511f6bf12402c12503733059269a2e10dec602916c0a75263e5d990f6bb93 on Ubuntu.com download page itself.

However, I like to verify my download. For example:
ls -l ubuntu-20.04.1-live-server-amd64.iso

echo "443511f6bf12402c12503733059269a2e10dec602916c0a75263e5d990f6bb93 *ubuntu-20.04.1-live-server-amd64.iso" \
| shasum -a 256 --check

You should get the following output:
ubuntu-20.04.1-live-server-amd64.iso: OK

Once verified you can write it to the USB device.
===
Step 4 – Create a bootable USB stick on Linux ===

'''Warning: Be careful with the USB stick/pen/disk names. Wrong names always result in data loss. Make sure you type the correct name.'''

Type the following dd command to create a bootable USB image from a .ISO file:
sudo dd if=artful-desktop-amd64.iso of=/dev/sdd bs=1M status=progress

Another example:

sudo dd if=ubuntu-20.04.1-live-server-amd64.iso of=/dev/sda bs=1M status=progress

The dd command will write process data to a usb stick (/dev/sdd or /dev/sda)and a progress bar appears on screen.
Ubuntu to create a bootable Ubuntu USB flash drive from terminal

In this example I am going to create a bootable flash drive for ubuntu-18.04.3-live-server-amd64.iso file as follows:

sudo dd if=/isos/ubuntu-18.04.3-live-server-amd64.iso of=/dev/sdb bs=1M status=progress

Ubuntu iso bootable USB create using dd command on Linux

'''Another example'''

sudo dd if=/isos/ubuntu-19.04-live-server-amd64.iso of=/dev/sdb bs=1M status=progress

Here is what I see:

748+0 records in
748+0 records out
784334848 bytes (784 MB, 748 MiB) copied, 119.174 s, 6.6 MB/s

'''Understanding the dd command options'''

dd : Start the dd command to write DVD/CD iso image.
if=/iso/ubuntu.iso : Path to input file.
of=/dev/sdd : Path to destination USB disk/stick.
bs=1M : read and write up to BYTES bytes at a time. In this example, 1M at a time.
status=progress : Display progress bar while writing image to the USB stick such as /dev/sdd. See “Linux dd Command Show Progress Copy Bar With Status” for more info.

=== Step 5: Install Ubuntu using newly created USB drive ===

That’s all, folks! You now have Ubuntu on a USB stick, bootable and ready to install on your Laptop, Desktop or server based system.
Conclusion

You learned how to create a bootable usb pen drive from downloaded Ubuntu desktop or server .ISO image. See Ubuntu download page.

ProcessWire - Editor

2022-09-04T10:27:30Z

134.3.84.225: /* Snippets */

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Tipp - effektives Anpassen ==
Mit der Erweiterung AdminOnSteroids kann man die Anpassungen vereinfachen, da man nicht in jedes Feld muss. Todo - kleineres Modul als Alternative finden.

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

// Auch Code ist möglich:
// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}
</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== ExtraAllowedContent Beispiel: Buttons erlauben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==
Siehe auch
https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/
=== Tabellenmodul anpassen ===
<syntaxhighlight lang="javascript">
Here is another snippet that I use to get rid of unwanted table properties:

// Remove unwanted attributes from tables
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

if (dialogName == 'table') {
var info = dialogDefinition.getContents('info');
info.remove('txtWidth');
info.remove('txtHeight');
info.remove('txtBorder');
info.remove('txtCellPad');
info.remove('txtSummary');
info.remove('txtCellSpace');
info.remove('cmbAlign');
var advanced = dialogDefinition.getContents('advanced');
advanced.remove('advStyles');
advanced.remove('advId'); //Id attribute
advanced.remove('advLangDir'); // writing direction
advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table
}
</syntaxhighlight>

Put this code inside your custom config.js

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>

== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T10:26:59Z

134.3.84.225: /* Snippets */

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Tipp - effektives Anpassen ==
Mit der Erweiterung AdminOnSteroids kann man die Anpassungen vereinfachen, da man nicht in jedes Feld muss. Todo - kleineres Modul als Alternative finden.

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

// Auch Code ist möglich:
// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}
</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== ExtraAllowedContent Beispiel: Buttons erlauben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==
=== Tabellenmodul anpassen ===
<syntaxhighlight lang="javascript">
Here is another snippet that I use to get rid of unwanted table properties:

// Remove unwanted attributes from tables
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

if (dialogName == 'table') {
var info = dialogDefinition.getContents('info');
info.remove('txtWidth');
info.remove('txtHeight');
info.remove('txtBorder');
info.remove('txtCellPad');
info.remove('txtSummary');
info.remove('txtCellSpace');
info.remove('cmbAlign');
var advanced = dialogDefinition.getContents('advanced');
advanced.remove('advStyles');
advanced.remove('advId'); //Id attribute
advanced.remove('advLangDir'); // writing direction
advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table
}
</syntaxhighlight>

Put this code inside your custom config.js

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>

== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T10:26:40Z

134.3.84.225: /* Tabellenmodul anpassen */

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Tipp - effektives Anpassen ==
Mit der Erweiterung AdminOnSteroids kann man die Anpassungen vereinfachen, da man nicht in jedes Feld muss. Todo - kleineres Modul als Alternative finden.

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

// Auch Code ist möglich:
// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}
</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== ExtraAllowedContent Beispiel: Buttons erlauben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>

== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T10:26:01Z

134.3.84.225:

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Tipp - effektives Anpassen ==
Mit der Erweiterung AdminOnSteroids kann man die Anpassungen vereinfachen, da man nicht in jedes Feld muss. Todo - kleineres Modul als Alternative finden.

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

// Auch Code ist möglich:
// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}
</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== ExtraAllowedContent Beispiel: Buttons erlauben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>

=== Tabellenmodul anpassen ===
<syntaxhighlight lang="javascript">
Here is another snippet that I use to get rid of unwanted table properties:

// Remove unwanted attributes from tables
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;

if (dialogName == 'table') {
var info = dialogDefinition.getContents('info');
info.remove('txtWidth');
info.remove('txtHeight');
info.remove('txtBorder');
info.remove('txtCellPad');
info.remove('txtSummary');
info.remove('txtCellSpace');
info.remove('cmbAlign');
var advanced = dialogDefinition.getContents('advanced');
advanced.remove('advStyles');
advanced.remove('advId'); //Id attribute
advanced.remove('advLangDir'); // writing direction
advanced.get('advCSSClasses')['default'] = 'uk-table'; //set default class for table
}
</syntaxhighlight>

Put this code inside your custom config.js
== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T09:31:09Z

134.3.84.225:

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Tipp - effektives Anpassen ==
Mit der Erweiterung AdminOnSteroids kann man die Anpassungen vereinfachen, da man nicht in jedes Feld muss. Todo - kleineres Modul als Alternative finden.

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

// Auch Code ist möglich:
// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}
</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== ExtraAllowedContent Beispiel: Buttons erlauben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>
== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T09:29:06Z

134.3.84.225: /* Eigene Stildefinitionen in der Styles Datei */

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

// Auch Code ist möglich:
// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}
</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== ExtraAllowedContent Beispiel: Buttons erlauben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>
== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T09:28:33Z

134.3.84.225: /* Buttons erlauaben */

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== ExtraAllowedContent Beispiel: Buttons erlauben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>
== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T09:27:50Z

134.3.84.225: /* Styles Dropdown verbessern */

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== Buttons erlauaben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

==== 1. Styles im Dropdown verbessern ====

Standardmäßig nutzt das Style Dropdown die Styles für den Content. Das ist z.B. bei großen Schriftn nicht immer sinnvoll. Das läßt sich aber in den Customstyles überschreiben.

templates/modules/CKEditor/contents.css
<syntaxhighlight lang="css">
/* Styles to load in CKEditor for better usabilty */

.cke_panel_grouptitle {
position: sticky;
top: 0;
z-index: 99;
}

html.cke_panel_container {
scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
margin: 0 !important;
font-size: 0.97rem !important;
}

[data-list-style] li {
margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
color: inherit;
list-style: none;
padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
position: relative;
}

[data-list-style="checkmark"] li::before {
content: '\2714';
position: absolute;
left: -1.1rem;
}
</syntaxhighlight>

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>
== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

ProcessWire - Editor

2022-09-04T08:48:43Z

134.3.84.225: /* CKEditor allgemeines Wissen */

'''HINWEIS: Bei Änderungen an den Styles unbedingt Modul-Cache löschen (Module > Aktualisieren)'''
== Links ==

https://processwire.com/talk/topic/3023-module-ckeditor/
https://processwire.com/talk/topic/14601-solved-ckeditor-custom-stylesclasses/
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

[[CKEditor - Snippets]]

CHECKEN:
https://processwire.com/talk/topic/23437-ckeditor-global-custom-config-frontend-styles-in-the-editor/
Automatische Konfiguration für alle CKEditor Felder

== Der CKEditor in ProcessWire ==
Ist der Standard Editor in PW. Es gibt auch Module mit denen man Ihn ersetzen kann. Im Prinzip aber ein mächtiges Werkzeug.

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

== Konfiguration ==

=== Buttons ===
Im Backend anpassen

=== Format Stile ===
In der Feldkonfiguration unter
Input > Format Tags

=== Eigene Styles ===
Im Styles Dropdown kann man eigene Stile inklusive Klassen definieren.

==== Styles Dropdown Feld im Editor aktivieren ====
'''1. Styles Dropdown aktivieren'''

Feldkonfiguration unter CK Editor Toolbar
Styles
hinzufügen (am besten hinter Format)

==== Eigene Stildefinitionen in der Styles Datei ====
''' 2.Styles Datei hinzufügen '''
Datei unter Eigenes JS Styles Set angeben...
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js
und Datei anlegen. Die sieht z.B. so aus:

<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>
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.'''

Ausführliches Beispiel:

<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);

</syntaxhighlight>

=== Extra Allowed Content ===
Manche Tags werden ausgefiltert. Eigentlich sollte man im Backend CKEditor Extra Allowed Content Regeln anlegen können. Aber Vorsicht: Der '''HTML Purifier filtert''' zusätzlich Tags aus. (z.B. Button Tags) Also im Zweifel mal diesen ausschalten.
site->modules->InputfieldCKEditor->mystyle.js
<syntaxhighlight lang="javascript">
config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</syntaxhighlight>
==== i Tag erlauben (Möglichkeit 2)====
Siehe oben und erlaube
// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

==== Buttons erlauaben ====
Dieses Beispiel ist nur mittelmäßig nützlich. Oft ist es besser einen Style für ein a Tag zu basteln. Da im Editor Buttons ohnehin normalerweise irgendwo hin linken.
<pre>
config.allowedContent = true;
config.extraAllowedContent = 'button(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0;
</pre>

== Aussehen des Editors anpassen ==
Außer den Styles die man dem User anbietet, kann man auch den Editor selbst anpassen und die Usability verbessern:

=== Styles Dropdown verbessern ===
https://processwire.com/talk/topic/19465-ckeditor-styles-dropdown-tips/

== CKEditor allgemeines Wissen ==
Ein paar Infos zu CKEditor ohne PW. Viele Dinge sind ähnlich.
=== Konfiguration ===
==== Toolbar ====
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

=== Plugins ===
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.

Beispiel Widget Plugin:

If you want to add the plugin manually, you will need to:
* Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:
http://example.com/ckeditor/plugins/widget
* Enable the plugin by using the extraPlugins configuration setting. Example:
config.extraPlugins = 'widget';
* Download and configure all its '''dependencies''', too.
In PW

== Snippets ==

=== Praktisches Beispiel 1===

Im Tab Eingabe des Editor Felds kann man verschiedene Dinge Einstellen. Die meisten Felder sind auch recht gut erklärt:

'''Editor Toolbar einstellen'''

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.

Guter Standard mit Tabellen und Styles Dropdown
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>
'''Tags formatieren'''

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.
<pre>
p;h2;h3;h4;h5;h6;pre;address;div
</pre>

''' Styles festlegen '''

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 NICHT den bereits vorgeschlagenen Pfad, sonst wäre bei einem Update alles weg. Besser in /site/templates/modules speichern:
customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js

UIkit Beispiel
<syntaxhighlight lang="javascript">
/* v1.2 */
CKEDITOR.stylesSet.add( 'customstyles', [

/* Objektstile */
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },

/* Blockstyles */
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Vierspalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-4@m' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H3 mit Trennlinie', element: 'h3', attributes: { 'class': 'uk-heading-divider' } },
{ name: 'H3 mit Linie dahinter', element: 'h3', attributes: { 'class': 'line-behind' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift (UIkit)', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},

/* Inline Styles */
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>
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.

Einfaches Beispiel
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'customstyles', [
{ name: 'Mein Spezialabsatz', element: 'p', attributes: { 'class': 'myParagraphStyle' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gelöscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
]);
</syntaxhighlight>

''' Stile im Editor einbinden '''

=== DIV-Stile ===
Mit dem CreateDiv Plugin kann man Stile auch auf Blockelemente statt nur auf Inline Elemente anwenden. Praktisch z.B. für Kästchen etc.
<pre>
Format, Styles, CreateDiv, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote, PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord, -, Undo, Redo, -, Scayt, -, Sourcedialog
</pre>

== Weiter Forum Beispiele ==
https://processwire.com/talk/topic/9606-how-to-configure-ckeditortextarea-field-to-enable-color-toolbar/

== Konfiguration CKEditor in PW (alt)==

/sites
ausgelagert und somit auch Updatefähig. Abschauen kann man im original Modul in
wire/site/modules/InputfieldCKEditor/
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.

=== Wo stellt man was ein ? ===
'''Hinweis:''' Nicht alles was hier steht funktioniert auch so. Am besten im Backend in der Feldkonfiguration schauen und dort die Pfade anpassen.
Ordner:
site/modules/InputfieldCKEditor/
Konfiguration gültig '''für alle Felder im Backend''' (hat bei mir bisher nicht ohne die Backendkonfiguration für das Feld funktioniert)
config.js
Konfiguration für ein bestimmtes Feld falls vorhanden
config.[fieldname.]js
mystyles.js -> ein selbstbenanntes Feld kann im Backend bei der Konfiguration des CKEditor Feldes angegeben werden.

Allgemeine Konfiguration. Z.B. Styles hinzufügen, removeFormatTags,

'''Alles was der Editor beim Eingeben mit '''JavaScript''' bearbeitet. Außerdem '''Style Auswahl anpassen''' alle Optionen die mit '''CKEDITOR.''' anfangen
content.css'''

'''Stile die der Editor bei der Eingabe benutzt. Also quasi die Vorschau für den Benutzer.'''
contents-inline.css

'''Stile für die Vorschau beim Inline Editor'''
Feldkonfiguration im Admin Bereich PW

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.

'''Überschreiben in der config.js''' hat bei mir nicht funktioniert - in aktueller Version 3.062 klappt es..

Auch '''Plugins''' müssen hier ausgewählt werden, damit sie eingebunden werden. Dies funktioniert also alles nur auf Feld-Ebene und nicht global.
=== CKEditor Buttons anpassen===
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.
'''
Beispiel: Hier werden '''Buttons für die Textausrichtung hinzugefügt.'''
<pre>
Format, Styles, -, Bold, Italic,Superscript, -,JustifyLeft,JustifyCenter,JustifyRight,-, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor

PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

=== Default Einstellungen ===
Todo: TESTEN ob das wirklich funktioniert
Kann man im Modulverzeichnis unter site/modules hinterlegen. Achtung nicht im Modulverzeichnis unter wire überschreiben. Das ist beim nächsten Update weg.
/site/modules/InputfieldCKEditor/config.js -> überschreibt oder ergänzt die Default Einstellung
/site/modules/InputfieldCKEditor/config.body.js -> überschreibt oder ergänzt das body Feld
Beispiele:
config.startupOutlineBlocks = true;
<pre>

CKEDITOR.editorConfig = function( config ) {
config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
};
</pre>

Leider funktionieren viele Einstellungen hier nicht, die im original CKEditor möglich sind.

=== Eigene Styles ===
Eigene Stile zur Auswahl im '''Styles''' Dropdown
site->modules->InputfieldCKEditor->mystyles.js
anpassen.
Im Backend den Pfad hinzufügen (siehe Beispiel unten)

=== Konfigurationsbeispiele ===
Im Adminbereich im content_main Feld:

==== CKEditor Toolbar ====
Added justify buttons...
<pre>
Format, Styles, -, Bold, Italic, Superscript, -,JustifyLeft ,JustifyCenter ,JustifyRight , -, RemoveFormat
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord,-,Undo,Redo
Scayt, -, Sourcedialog
</pre>

Blöcke anzeigen, Smileys
<pre>
Format, Styles, -, Bold, Italic, Underline, Strike, Superscript, Subscript,
JustifyLeft ,JustifyCenter ,JustifyRight , -,
NumberedList, BulletedList, -, Blockquote

PWLink, Unlink, Anchor, PWImage, Table, HorizontalRule, SpecialChar, Smiley, ShowBlocks, RemoveFormat,
PasteText, PasteFromWord,-, Undo, Redo, -, Sourcedialog
</pre>

==== Custom Editor CSS File ====
Für die '''im Editor angezeigten Stile'''
site/modules/InputfieldCKEditor/contents.css
<syntaxhighlight lang="css">
@import url('../../templates/vendors/fa/css/font-awesome.min.css');
@import url('../../templates/vendors/bootstrap/css/bootstrap.min.css');
@import url('../../templates/css/main.css');

.cke_editable {
font-size: 14px;
line-height: 1.6em;
}

.cke_contents_ltr blockquote {
padding-left: 20px;
padding-right: 8px;
border-left-width: 5px;
}

.cke_contents_rtl blockquote {
padding-left: 8px;
padding-right: 20px;
border-right-width: 5px;
}
</syntaxhighlight>

==== Custom Editor JS File ====

Für die Auswahlfelder in der '''Toolbar'''
customstyles:/site/modules/InputfieldCKEditor/mystyles.js
<syntaxhighlight lang="javascript">
CKEDITOR.stylesSet.add( 'mystyles', [
{ name: 'Home Icon', element: 'i', attributes: {'class': 'fa fa-home fa-2x'}},
{ name: 'Panel Title', element: 'h4', attributes: {'class': 'panel-title'} },
]);
CKEDITOR.dtd.$removeEmpty['i'] = false; // leere i Tags erlauben (für font awesome)
</syntaxhighlight>

==== config.js ====
In /site/modules/InputfieldCKEditor/config.js (oder config.feldname.js)
<syntaxhighlight lang="javascript">
CKEDITOR.editorConfig = function( config ) {
config.uiColor = '#AADC6E';
config.coreStyles_italic = { element : 'i', overrides : 'em' }; // i nicht durch em überschreiben (für font awesome)
</syntaxhighlight>
== Plugins hinzufügen ==
https://weekly.pw/issue/13/#1-2 -> Plugins für CK Editor etc.
Readme im Plugins Ordner
=== Beispiel DIV Plugin ===
Wenn man mehrere Absätze auswählt und im Styles Menü einen Block-Style auswählt umschließt der CKEditor jeden Absatz mit dem Style.
Das Div Plugin ermöglicht es auch mehrere Blöcke mit einem einzigen Div zu umschließen. So kann man z.B. Kästchen über mehrere Absätze erzeugen.

# Plugin herungerladen und entpacken https://ckeditor.com/cke4/addon/div
# Ordner in site/modules/InputfieldCKEditor/plugins kopieren
# Modul in den Field Settings aktivieren (evtl. geht auch ''config.extraPlugins = 'div';'' in der config.js hinzuzufügen - nicht getestet.

== Probleme beheben ==
=== Bilder - width Attribut beschränkt auf max. 1200px ===
https://processwire.com/talk/topic/9615-skip-width-attributes-on-img/
Der HTML Purifier ist hier das eigentliche Problem. Er beschränkt den Wert auf max 1200. Entweder den HTML Purifier abschalten (in der Feldkonfiguration) oder
wire/modules/Markup/MarkupHTMLPurifier/htmlpurifier/standalone/HTMLPurifier/ConfigSchema/schema.ser
There look for this bit... "HTML.MaxImgLength";i:1200
Change 1200 to your desired maximum value.

=== Cursor springt an den Anfang zurück ===

=== Eigene Styles funktionieren nicht ===
* customstyles statt mystyles als Bezeichner (ganz vorne in der Config) und in der myStyles.js
* Ich hatte Probleme wenn die Datei in site/templates/InputfieldCKEditor lag besser in site/modules/InputfieldCKEditor/

=== Editor wird nicht mehr im Backend angezeigt ===
Hat meistens mit der Konfiguration der myStyles.js zu tun (falscher Pfad o.ä.)

JavaScript - Webfont loaded?

2022-09-03T11:19:16Z

134.3.84.225:

Mit den document ready events kommt man bei css fonts nicht weiter. Diese werden oft später zugeordnet. Daher kann es nachträglich noch zu Größenänderungen kommen, je nachdem wie eine Schrift gestaltet ist.

Es gibt mehrere Möglichkeiten das zu checken. Allerdings sind nicht alle - je nach Situation - geeignet.

== Links ==
Dynamische Schriftgröße - dynamic fontsize
https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready
https://portalzine.de/dev/options-to-detect-when-a-font-face-has-been-loaded/
https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded

== jQuery / fontSpy ==
Der Klassiker

If your project uses jQuery, you could also use jQuery-FontSpy which also works in IE because it determines the font being loaded by watching for an element's dimensions to change. Example usage:
<syntaxhighlight lang="javascript">
fontSpy('Open Sans', {
success: function() {
alert('Font has been loaded');
},
failure: function() {
alert('Font failed to load');
}
});
</syntaxhighlight>

== document.fonts ==
Dieses Objekt steht eigentlich in allen Post IE Browsern zur Verfügung. Für IE gibt es Polyfills (nicht getestet)

Vorsicht mit dem load Event. Dieser wird nicht immer ausgeführt. Keine Ahnung warum in manchen Fällen nicht (evtl. wg. Cache Vorgängen?)

Beispiel
<syntaxhighlight lang="javascript">
(function () {
// no promise support (<=IE11)
if (!('Promise' in window)) {
return;
}
async function fontsReady() {
let ready = await document.fonts.ready; // wait for the promise object
console.log(ready); // show the promise object
fitty('.fitty'); // i.e. use fitty to scale text with class .fitty
}

fontsReady();
})();
</syntaxhighlight>

JavaScript - Snippets

2022-09-03T11:16:56Z

134.3.84.225: /* Must Know - Wichtige JavaScript Snippets und Konzepte */

== Links ==
Siehe auch

[[JavaScript - Plugins]]
[[JavaScripts - Basics]]
[[JavaScript - DOM Manipulation]]
[[jQuery - Snippets]]
[[Browser Fallbacks]]
https://wiki.stephanschlegel.de/index.php?title=JQuery_vs_Vanilla_JavaScript

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== Arrays ==
=== Elemente hinzufügen / entfernen ===
Gegeben ist ein Array items in der Art
[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]

<syntaxhighlight lang="javascript">
// add to end of array
this.friends.push(newFriend)

// add to start of array
this.friends.unshift(newFriend)

// delete item from array via id - v1 -> override complete array
deleteItem(id){
this.items = this.items.filter( item => item.id !== sarchId)
// filter( filterFunction ) uses filterFunction for every item in items.
// If filterFunction returns true the item is kept. item.id !== id returns true for every
// item which has NOT the id
}

// v2 - change array
deleteItem(id){
const itemIndex = this.items.findIndex(item => item.id === id)
this.items.splice(resIndex, 1);
}
</syntaxhighlight>

=== Finden und Suchen ===
<syntaxhighlight lang="javascript">
// find in array and change prop
const identifiedItem = this.items.find(
(item) => item.id === searchId // the same as function(friend){return friend.id...}
)
// filter(callback) - callback is executed on every array (array item) first item match is returned
identifiedItem.isFavourite = !identifiedItem.isFavourite
// identifiedItem is a proxy connected to the original items array.
// thus why we can modify identifiedItems and items will be altered too
</syntaxhighlight>

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]

=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - Numbers ==
const x = '1'
const y = +x // y is a number now
const y = x.parseInt()

== Viewport / Offset / Scrolling ==
=== Element sichtbar im Viewport ===
==== Kommt in den Viewport mit Self-Destroy ====
Wird nur einmal ausgeführt
<syntaxhighlight lang="javascript">
document.body.onscroll = function() {
if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
document.body.onscroll = "";
alert("The tag just came into view");
}
}
</syntaxhighlight>

==== Komplett im Viewport ====
<syntaxhighlight lang="javascript">
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)

);
}

const box = document.querySelector('.box');
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
const messageText = isInViewport(box) ?
'The box is visible in the viewport' :
'The box is not visible in the viewport';

message.textContent = messageText;

}, {
passive: true
});
</syntaxhighlight>

==== Teil im Viewport ====
<syntaxhighlight lang="javascript">
/**
* checks if any part of the element is in viewport
*/
function isInViewport(el){
h = el.height();
hVp = $(window).height();
posY = el.offset().top - $(window).scrollTop();
dh = posY+h;
// dh < 0 -> oben raus
// posY > hVp -> unten raus
if ( dh < 0 || posY > hVp ) return false;
else return true;
}
</syntaxhighlight>
==== Funktion mit GSAP ScrollTrigger starten ===
Counter Beispiel
<syntaxhighlight lang="javascript">
function count(){
$('.counter').each(function() {
var $this = $(this), countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 5000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});

}

ScrollTrigger.create({
trigger: '#counterTrigger',
onEnter: ()=>{
console.log('count')
count()
},

});
</syntaxhighlight>

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== Links ==
[[JavaScript - Tricks mit Links]]

== JavaScript - Verschiedenes ==
=== Enter 2 Tabs ===
JQuery

Wenn der User in einem Formular die Eingabetaste drückt wird in vielen Browsxern das Formular abgesendet. Stattdessen, kann man den Tastendruck in einen Tab verwandeln, dann kommt der User stattdessen ins nächste Eingabefeld. In diesem Beispiel wird der Cursor zu Beginn gleich ins erste Feld gesetzt (eingesetzt bei Mietlager XL Rechner).
<syntaxhighlight lang="javascript">
// enter2tab for textboxes
$(document).ready(function() {
$('input:text:first').focus();
$('input:text').bind('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
var maxIndex = $('input:text').length;
if (nextIndex < maxIndex) {
$('input:text:eq(' + nextIndex+')').focus();
}
}
});
});
</syntaxhighlight>

=== JavaScript Animation ===
Siehe [[Animation im Web]]

=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml

=== Scrolling ===
==== Smooth Scroll & Sticky - Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

</syntaxhighlight>

CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
</syntaxhighlight>

==== Smooth Scroll für Anchor Tags oder toTop Links ====
https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link
noch ein Beispiel (Vanilla)
https://perishablepress.com/vanilla-javascript-scroll-anchor/

===== Beispiel ab 2018 =====
Nutzt das CSS Verhalten (kann man auch direkt als CSS nutzen. Manchmal funktioniert es (Stand 2020) nicht ganz sauber. Safari und Edge funktionieren nicht mit dem CSS Behaviour
<pre>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</pre>

For older browser support, you can use this jQuery technique:
<pre>
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</pre>
And here's the fiddle: http://jsfiddle.net/9SDLw/

If your target element does not have an ID, and you're linking to it by its name, use this:
<pre>
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);

return false;
});
</pre>

===== Beispiel 1 (jQuery) =====
<pre>
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {

var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

===== Beispiel 2 (jQuery) mit Offset =====
statt
.top
einfach
.top-100
http://1stwebmagazine.com/jquery-scroll-to-anchor-point

==== Smooth Scrolling mit Vanilla JS ====
[[JavaScript - Smooth Scrolling]]

===== Beispiel 3 Materialize Pushpin ToTop =====
jQuery Plugin enthalten in MaterializeCSS http://materializecss.com/pushpin.html

Kann für ToTop Navigation oder Fixed Navigations etc. eingesetzt werden. Liegt im Verzeichnis js/pushpin geht aber nicht ohne weiteres Standalone

<syntaxhighlight lang="javascript">
//PUSHPIN TOTOP
$( document ).ready(function(){
$('.totop').pushpin({
top: 500,// distance where pin becomes fixed (class)- default 0
bottom: 'infinity', // distance when pin stops being fixed - default infinity
offset: 24 // style="top:[offset]""" - default 0
})
});

//You can remove pushpin and pushpin classes
$('.tabs-wrapper .row').pushpin('remove');
</syntaxhighlight>
CSS

<syntaxhighlight lang="css">
/* Class for when element is above threshold */
.pin-top {
position: relative;
}
/* Class for when element is below threshold*/
.pin-bottom {
position: relative;
}
/* Class for when element is pinned */
.pinned {
position: fixed !important;
right: 24px;
bottom: 24px;
z-index: 9;
}
/* Only necessary for window height sized blocks. */
html, body, .block {
height: 100%;
}
</syntaxhighlight>

===== Beispiel Markup für ToTop Navigation =====
<syntaxhighlight lang="html5">
<body>
<a class="anchor" name="top"></a>
...

<div class="totop" style="display:none;"><a href="top"><i class="fa fa-angle-double-up fa-2x"></i></a></div>
<script type="text/javascript">
$(document).ready(function() {
$('.totop').hide();
$(window).scroll(function(){
var value = 200; // Toplink beim vertikalen scrollen ab einem Wert von XXX 'px' anzeigen
var scrolling = $(window).scrollTop();
if (scrolling > value) {
$('.totop').fadeIn();
} else {
$('.totop').fadeOut();
}
});
$('.totop').click(function(){
$('html, body').animate({scrollTop:'0px'}, 400);
return false;
});
});
</script>
</syntaxhighlight>

=== Toggle ===
<syntaxhighlight lang="javascript">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
oder registrieren

element.addEventListener('click', myFunctionReference , false);

function toggleNavigation() {
var x = document.getElementById("#mobileNavigationPanel");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</syntaxhighlight>

=== Zwischenablage (Clipboard) modifizieren ===
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
Mit dem Copy Event kann man die Zwischenablage modifizieren wenn der User etwas hineinkopiert. Z.B. könnte das ein Copyright Hinweis sein, den man anhängt.

==== Beispiel - Uppercase ====
<syntaxhighlight lang="html5">

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const source = document.querySelector('div.source');

source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
event.preventDefault();
});

</syntaxhighlight>

==== Beispiel - Copyright Hinweis hinzufügen ====
<syntaxhighlight lang="html5">
<div class="box source" contenteditable="true">Kopiere Text aus dieser Box...</div>
<div class="box target" contenteditable="true">...in diese Box!</div>

<script>
const source = document.querySelector('div.source');
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
copyDate = dd + '.' + mm + '.' + yyyy;
copyHint = '\nQuelle: ' + window.location.href + ' (Zugriff am: ' + copyDate + ')'; //href, hostname or pathname is possible
source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString() + copyHint);
event.preventDefault();
});
</script>
</syntaxhighlight>

== Must Know - Wichtige JavaScript Snippets und Konzepte ==
=== Seite geladen? ===
https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
window.onload = function () {
console.log('Dokument geladen');
function init();
function machwas();
}
</syntaxhighlight>

=== Seite und Bilder geladen ===
<syntaxhighlight lang="javascript">
window.addEventListener('load', function () {
alert("It's loaded!")
})
</syntaxhighlight>

https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
let img = new Image;

img.onload = function() {
console.log ("Bild geladen");
elem.appendChild (img);
}
img.src = "little-snail.png"; // erst nach dem Event Listener!
</syntaxhighlight>

=== Schriften geladen UND angewendet? ===
Siehe
[[JavaScript - Webfont loaded?]]

fontsReady();
=== Seite verlassen ===
https://www.mediaevent.de/javascript/onload.html

=== Feature Detection ===
Herausfinden was ein Browser unterstützt und darauf reagieren.
[[JavaScript - Feature Detection]]

Dynamische Schriftgröße - dynamic fontsize

2022-09-03T11:16:45Z

134.3.84.225: /* Dynamic font-size mit JavaScript */

== Links ==
https://css-tricks.com/fitting-text-to-a-container/
https://codepen.io/chriscoyier/pen/mKXbwB
https://github.com/rikschennink/fitty
== Only CSS ==

== Dynamic font-size mit JavaScript ==
Z.b. mit fitty.js - fitty zieht eine Schrift auf die zur verfügung stehende Breite des Parent Containers.

<syntaxhighlight lang="javascript">
async function fontsReady() {
let ready = await document.fonts.ready; // promice
console.log('fonts ready' + ready);
fitty('.fitty');
}

fontsReady();
</syntaxhighlight>

Schöne Lösung für fitty. Alte Browser werden ohne Fallback ausgeschlossen. Das Basis CSS sollte also wenigstens ordentlich ausschauen.
<syntaxhighlight lang="javascript">
(function () {
// no promise support (<=IE11)
if (!('Promise' in window)) {
return;
}
async function fontsReady() {
let ready = await document.fonts.ready; // promice
console.log('fonts ready' + ready);
fitty('.fitty');
}

fontsReady();
})();
</syntaxhighlight>

Oder mit Fallback über FontFaceObserver (würde ich heute nicht mehr Anwenden für die paar veralteten Browser und wenn dann auf alle Fälle den FFO nicht über CDN laden.
Besser über CSS vernünftiges Styling, dass auch ohne JS ordentlich ausschaut.

<syntaxhighlight lang="html5">
<style>
/* Only set the custom font if it's loaded and ready */
.fonts-loaded .fit {
font-family: 'Oswald', serif;
}
</style>
<script>
(function () {
// no promise support (<=IE11)
if (!('Promise' in window)) {
return;
}

// called when all fonts loaded
function redrawFitty() {
document.documentElement.classList.add('fonts-loaded');
fitty.fitAll();
}

// CSS Font Loading API
function native() {
// load our custom Oswald font
var fontOswald = new FontFace('Oswald', 'url(assets/oswald.woff2)', {
style: 'normal',
weight: '400',
});
document.fonts.add(fontOswald);
fontOswald.load();

// if all fonts loaded redraw fitty
document.fonts.ready.then(redrawFitty);
}

// FontFaceObserver
function fallback() {
var style = document.createElement('style');
style.textContent =
'@font-face { font-family: Oswald; src: url(assets/oswald.woff2) format("woff2");}';
document.head.appendChild(style);

var s = document.createElement('script');
s.src =
'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js';
s.onload = function () {
new FontFaceObserver('Oswald').load().then(redrawFitty);
};
document.body.appendChild(s);
}

// Does the current browser support the CSS Font Loading API?
if ('fonts' in document) {
native();
} else {
fallback();
}
})();
</script>
</syntaxhighlight>

Dynamische Schriftgröße - dynamic fontsize

2022-09-03T11:15:44Z

134.3.84.225: Die Seite wurde neu angelegt: „== Links == https://css-tricks.com/fitting-text-to-a-container/ https://codepen.io/chriscoyier/pen/mKXbwB https://github.com/rikschennink/fitty == Only CSS…“

== Links ==
https://css-tricks.com/fitting-text-to-a-container/
https://codepen.io/chriscoyier/pen/mKXbwB
https://github.com/rikschennink/fitty
== Only CSS ==

== Dynamic font-size mit JavaScript ==
Z.b. mit fitty.js - fitty zieht eine Schrift auf die zur verfügung stehende Breite des Parent Containers.

<syntaxhighlight lang="javascript">
async function fontsReady() {
let ready = await document.fonts.ready; // promice
console.log('fonts ready' + ready);
fitty('.fitty');
}

fontsReady();
</syntaxhighlight>

Oder mit Ausschluss älterer Browser:
<syntaxhighlight lang="javascript">
(function () {
// no promise support (<=IE11)
if (!('Promise' in window)) {
return;
}
async function fontsReady() {
let ready = await document.fonts.ready; // promice
console.log('fonts ready' + ready);
fitty('.fitty');
}

fontsReady();
})();
</syntaxhighlight>

Oder mit Fallback über FontFaceObserver (würde ich heute nicht mehr Anwenden für die paar veralteten Browser und wenn dann auf alle Fälle den FFO nicht über CDN laden.
Besser über CSS vernünftiges Styling, dass auch ohne JS ordentlich ausschaut.

<syntaxhighlight lang="html5">
<style>
/* Only set the custom font if it's loaded and ready */
.fonts-loaded .fit {
font-family: 'Oswald', serif;
}
</style>
<script>
(function () {
// no promise support (<=IE11)
if (!('Promise' in window)) {
return;
}

// called when all fonts loaded
function redrawFitty() {
document.documentElement.classList.add('fonts-loaded');
fitty.fitAll();
}

// CSS Font Loading API
function native() {
// load our custom Oswald font
var fontOswald = new FontFace('Oswald', 'url(assets/oswald.woff2)', {
style: 'normal',
weight: '400',
});
document.fonts.add(fontOswald);
fontOswald.load();

// if all fonts loaded redraw fitty
document.fonts.ready.then(redrawFitty);
}

// FontFaceObserver
function fallback() {
var style = document.createElement('style');
style.textContent =
'@font-face { font-family: Oswald; src: url(assets/oswald.woff2) format("woff2");}';
document.head.appendChild(style);

var s = document.createElement('script');
s.src =
'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js';
s.onload = function () {
new FontFaceObserver('Oswald').load().then(redrawFitty);
};
document.body.appendChild(s);
}

// Does the current browser support the CSS Font Loading API?
if ('fonts' in document) {
native();
} else {
fallback();
}
})();
</script>
</syntaxhighlight>

JavaScript - Webfont loaded?

2022-09-03T10:58:14Z

134.3.84.225:

Mit den document ready events kommt man bei css fonts nicht weiter. Diese werden oft später zugeordnet. Daher kann es nachträglich noch zu Größenänderungen kommen, je nachdem wie eine Schrift gestaltet ist.

Es gibt mehrere Möglichkeiten das zu checken. Allerdings sind nicht alle - je nach Situation - geeignet.

== Links ==
https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/ready
https://portalzine.de/dev/options-to-detect-when-a-font-face-has-been-loaded/
https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded

== jQuery / fontSpy ==
Der Klassiker

If your project uses jQuery, you could also use jQuery-FontSpy which also works in IE because it determines the font being loaded by watching for an element's dimensions to change. Example usage:
<syntaxhighlight lang="javascript">
fontSpy('Open Sans', {
success: function() {
alert('Font has been loaded');
},
failure: function() {
alert('Font failed to load');
}
});
</syntaxhighlight>

== document.fonts ==
Dieses Objekt steht eigentlich in allen Post IE Browsern zur Verfügung. Für IE gibt es Polyfills (nicht getestet)

Vorsicht mit dem load Event. Dieser wird nicht immer ausgeführt. Keine Ahnung warum in manchen Fällen nicht (evtl. wg. Cache Vorgängen?)

JavaScript - Webfont loaded?

2022-09-03T10:56:56Z

134.3.84.225: Die Seite wurde neu angelegt: „Mit den document ready events kommt man bei css fonts nicht weiter. Diese werden oft später zugeordnet. Daher kann es nachträglich noch zu Größenänderunge…“

JQuery

2022-09-03T08:43:19Z

134.3.84.225: /* Der Beginn */

==Quickstart==

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

[[jQuery - Snippets]]

== Links ==
[[jQuery or Vanilla JS]]
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

Gute Tools out of the Box:
Erste Wahl mit allem was man so braucht sind die jQuery Tools:

http://flowplayer.org/tools/index.html

Oder in Kurzform hier: [[JQuery Tools (flowplayer.org)]]

[[jQuery - Snippets]]

[[JQuery - Events]]

Validierung mit jQuery: [[Validate (jQuery Plugin)]]

==Einbinden==
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.

===Über Google===

Hinweis: Google gibt an man solle zuerst den API Code übergeben damit es funktioniert (Obsolet). Der direkte Zugriff funktioniert aber auch ohne. Vielleicht geht es nicht wenn man die google. load Funktion nutzt (hier nicht weiter behandelt) .

Beispiel API Code Übergabe:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

'''Beispiel:'''

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

ui steht für User Interface (Plugins)

=== Über jQuery Server ===
Beispiel:
<script src="http://code.jquery.com/jquery-latest.js"></script>

=== Libary auf eigenem Server ===
==== Geo-bit webmynet ====
ToDo -> Idee ist verschiedene libs auf tools.webmynet.de vorzuhalten ähnlich wie sie auf dem Google Server liegen.
Zweck: einfache Einbindung, Statistik, Testing

=== Typo3 ===
siehe JavaScript Frameworks nutzen

== Der Beginn ==
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:

$(document).ready(function() {
// do stuff when DOM is ready
});

Oder Abgekürzt

$(function() {
// do stuff when DOM is ready
});

Stiftet manchmal Verwirrung. Es gibt einige Möglichkeiten in der Syntax für den ready handler:
<syntaxhighlight lang="javascript">
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

</syntaxhighlight>

=== Document ready oder window ready ? ===
$(document).ready... wartet bis alle Elemente im HTML soweit geladen sind und startet mit der Ausführung der Skripte. Bilder etc. werden im Laufe der Zeit nachgeladen. Soll die Ausführung auf die Bilder warten geht das anders:
<syntaxhighlight lang="javascript">
$(document).ready(function() {
// wait til DOM is ready and do s.th.
});
</syntaxhighlight>
<syntaxhighlight lang="javascript">
$(window).on("load", function() {
// wait till everything (inkl. Images) is loaded and do s.th.
});
</syntaxhighlight>

== Reagieren auf Klick ==
Siehe auch:

[[JQuery - Events]]

<pre>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

</pre>
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren

Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.

== Zugriff auf Elemente ==
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
<pre>
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==
=== jQuery - Animation ===
[[jQuery - Animation]]

== Weitere Funktionen ==
find()
addClass()
removeClass()
hover()
each()
append()

== Ereignisse ==
[[jQuery - Events]]

== AJAX ==
[[jQuery - AJAX]]

== Funktionen in jQuery definieren (5 Wege) ==
[[Funktionen in jQuery]]

== Weitere Beispiele ==
<pre>
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});

$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});

// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});

// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});

// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});

</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

<pre>
jQuerySrc = 'fileadmin/js/jquery-min.js';

// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}

// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
</pre>

== Troubleshooting - Probleme Lösen ==
[[jQuery - Probleme lösen (Troubleshooting)]]

JQuery

2022-09-03T08:42:35Z

134.3.84.225: /* Der Beginn */

==Quickstart==

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

[[jQuery - Snippets]]

== Links ==
[[jQuery or Vanilla JS]]
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

Gute Tools out of the Box:
Erste Wahl mit allem was man so braucht sind die jQuery Tools:

http://flowplayer.org/tools/index.html

Oder in Kurzform hier: [[JQuery Tools (flowplayer.org)]]

[[jQuery - Snippets]]

[[JQuery - Events]]

Validierung mit jQuery: [[Validate (jQuery Plugin)]]

==Einbinden==
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.

===Über Google===

Hinweis: Google gibt an man solle zuerst den API Code übergeben damit es funktioniert (Obsolet). Der direkte Zugriff funktioniert aber auch ohne. Vielleicht geht es nicht wenn man die google. load Funktion nutzt (hier nicht weiter behandelt) .

Beispiel API Code Übergabe:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

'''Beispiel:'''

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

ui steht für User Interface (Plugins)

=== Über jQuery Server ===
Beispiel:
<script src="http://code.jquery.com/jquery-latest.js"></script>

=== Libary auf eigenem Server ===
==== Geo-bit webmynet ====
ToDo -> Idee ist verschiedene libs auf tools.webmynet.de vorzuhalten ähnlich wie sie auf dem Google Server liegen.
Zweck: einfache Einbindung, Statistik, Testing

=== Typo3 ===
siehe JavaScript Frameworks nutzen

== Der Beginn ==
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:

$(document).ready(function() {
// do stuff when DOM is ready
});

Oder Abgekürzt

$(function() {
// do stuff when DOM is ready
});

Stiftet manchmal Verwirrung. Es gibt einige Möglichkeiten in der Syntax:
<syntaxhighlight lang="javascript">
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

</syntaxhighlight>

=== Document ready oder window ready ? ===
$(document).ready... wartet bis alle Elemente im HTML soweit geladen sind und startet mit der Ausführung der Skripte. Bilder etc. werden im Laufe der Zeit nachgeladen. Soll die Ausführung auf die Bilder warten geht das anders:
<syntaxhighlight lang="javascript">
$(document).ready(function() {
// wait til DOM is ready and do s.th.
});
</syntaxhighlight>
<syntaxhighlight lang="javascript">
$(window).on("load", function() {
// wait till everything (inkl. Images) is loaded and do s.th.
});
</syntaxhighlight>

== Reagieren auf Klick ==
Siehe auch:

[[JQuery - Events]]

<pre>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

</pre>
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren

Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.

== Zugriff auf Elemente ==
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
<pre>
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==
=== jQuery - Animation ===
[[jQuery - Animation]]

== Weitere Funktionen ==
find()
addClass()
removeClass()
hover()
each()
append()

== Ereignisse ==
[[jQuery - Events]]

== AJAX ==
[[jQuery - AJAX]]

== Funktionen in jQuery definieren (5 Wege) ==
[[Funktionen in jQuery]]

== Weitere Beispiele ==
<pre>
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});

$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});

// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});

// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});

// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});

</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

<pre>
jQuerySrc = 'fileadmin/js/jquery-min.js';

// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}

// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
</pre>

== Troubleshooting - Probleme Lösen ==
[[jQuery - Probleme lösen (Troubleshooting)]]

ProcessWire - Snippets

2022-09-02T08:28:47Z

134.3.84.225: /* $page Object */

Hier findest du ein paar Basis Snippets. Codebeispiele zu Feldern findest du z.B. über die Seiten zu den Field Types.

== Siehe auch ==
[[ProcessWire - Module Snippets]]
[[ProcessWire - Navigation Snippets]]
[[ProcessWire - Debugging Snippets]]
[[ProcessWire - Selectors]]

== Basics ==
=== Bild in Template einbinden ===
<img src="<?php echo $config->urls->templates?>img/menu.png" alt="Home">

=== Link zu Seite ===
<a href="<?php echo $pages->get('/kontakt/')->url; ?>">
=== Wert aus Textfeld ===
<div class="<? echo $page->get("content_class")?>">
== Bilder ==

=== Umfassende Renderfunktion zum wiederverwenden ===
Hier immer wieder aktualisiert. Todo Option für srcset.
<syntaxhighlight lang="php">

/**
* render image tag from imageobject
* @todo add srcset version,add ukimage version, other attributes
* @todo attributes as object or string
* @param Object Image
* @param Int width
* @return String
*/
function renderImage($image,$w=200,$options=array()){
if(!$image instanceof \ProcessWire\Pageimage) return '';
$defaults = array(
'resizeHeight' => false, // use height instead of width to resize
'srcset' => false, // todo
'uikit' => false, // todo
'aspect' => false,
'noResize' => false,
'classes' => '', // classes as string
'attributes' => false, // attributes as array(attr=>val) or string
'title' => true, // add title tag based on image description
'alt' => true, // add alt tag based on image description
);
$options = array_merge($defaults,$options);
$attributes = array();
$strAttr = '';
$classMarkup = '';

// ATTRIBUTES
$attributesMarkup = '';
if( $options['attributes'] ){
bd( gettype( $options['attributes'] ) );
if( gettype($options['attributes'] ) == 'string') $strAttr = (string)$options['attributes'];
else if( gettype($options['attributes']) == 'array' ){
foreach( (array)$options['attributes'] as $k => $a ){
$attributes[$k] = $a;
}
}
}
if($options['alt'] && $image->description) $attributes['alt'] = $image->description;
if($options['title'] && $image->description) $attributes['title'] = $image->description;
$attributesMarkup = implode(' ', $attributes);
if($strAttr) $attributesMarkup .= " $strAttr";

if($options['classes']) $classMarkup = ' class="'.$options['classes'].'"';

if($options['resizeHeight']){
$i = $image->height($w);
}else if($options['aspect']){
$i = $image->size($w, intval( $w / $options['aspect']) );
}else if($options['noResize']){
// Todo

}else{
$i = $image->width($w);
}
$out = '<img src="'.$i->url.'" '.$classMarkup.$attributesMarkup.'>';
return $out;
}
</syntaxhighlight>

=== Advanced Image Manipulation ===
ImageMagick, Externe Bilder laden, Bilder Vorrendern...
[[Processwire - Advanced Image Manipulation]]

=== Praktische Renderfunktionen ===
<syntaxhighlight lang="php">
/**
* Image Function
*/

/**
* get background-position style via focus point if available
* mainly used in other functions
* @param Pageimage PW image object
* @return Array containing background-position
*/
function getFocusStyles($image){
// Focal Points if available
$imageStyles = array();
if($image->focus){
$focus=$image->focus();
//var_dump($focus);
$imageStyles[] = 'background-position:'.number_format($focus["left"],1,".","") .'% '.number_format($focus["top"],1,".","").'%;';
}
return $imageStyles;
}

/**
* get background-image styles and create image
* @todo - make image set instead of single image
* @param Pageimage
* @param Int Image width
* @param String background-size attribute (cover, contain...)
* @return array
*/
function getBgImageStyles($image, $w = 800,$options = array()){
$defaults = array(
'size' => 'cover',
'noResize' => false
);
$options = array_merge($defaults,$options);

if($image){
$styles = array();
if ($options['noResize']) $myImage = $image;
else $myImage = $image->width($w);
$styles[] = "background-image: url($myImage->url);";
$styles[] = 'background-size: '.$options['size'].'; background-repeat: no-repeat;';
$styles = array_merge( $styles, getFocusStyles($myImage) );
return $styles;
} else return array();

}

/**
* render image tag from imageobject
* @todo add srcset version, add description, add ukimage version, other attributes
* @param Object Image
* @param Int width
* @return String
*/
function renderImage($image,$w=200,$options=array()){
if(!$image instanceof \ProcessWire\Pageimage) return '';
$defaults = array(
'resizeHeight' => false, // use height instead of width to resize
'srcset' => false, // todo
'uikit' => false, // todo
'aspect' => false,
'noResize' => false
);
$options = array_merge($defaults,$options);
if($options['resizeHeight']){
$i = $image->height($w);
}else if($options['aspect']){
$i = $image->size($w, intval( $w / $options['aspect']) );
}else if($options['noResize']){
// Todo

}else{
$i = $image->width($w);
}
$out = '<img src="'.$i->url.'" alt="'.$i->description.'">';
return $out;
}
</php>
</syntaxhighlight>

=== Einzelbild einfügen ===

==== Maximale Breite oder maximale Höhe je nach Orientierung ====
$thumburl = $image->width > $image->height ? $image->size(450,0)->url : $image->size(0,320);

==== Maximale Breite und maximale Höhe berücksichtigen ====
<syntaxhighlight lang="php">
$mW = 180;
$mH = 80;
$thumbUrl = ($mH / $image->height) > ($mW / $image->width) ? $image->size($mW,0)->url : $image->size(0,$mH)->url;
</syntaxhighlight>

====Bild aus Backend als Hintergrund einfügen====
(Feldname hier: ''main_image'')
<syntaxhighlight lang="php">
if($page->main_image){$image = $page->main_image->size(640,960);}
else $image = NULL;
...
if($image){
echo "
<div class='a-3-4 team-image' style='background-image:url({$image->url})'>
<div>{$myContent}</div>
</div>
";
}
</syntaxhighlight>

=== n-tes Bild einfügen ===
$page->images->eq(1); // second image

=== Mehrere Bilder aus dem Backend ===
<syntaxhighlight lang="php">
$myImages='';
if(count($page->images)) {
foreach($page->images as $image) {
$myImages .= '<img class="img-responsive" src="'.$image->url.'">';
}
}
</syntaxhighlight>
'''Beispiel 2'''
<syntaxhighlight lang="php">
echo $page->images->implode(function($item) {
$large = $item->size(1200,800);
$thumb = $item->size(400,300);
return "<li><a href='$large->url'><img src='$thumb->url' alt='$item->description'></a></li>";
}, array('prepend' => '<ul>', 'append' => '</ul>'));
</syntaxhighlight>

==== Einfache Galerie ====
<syntaxhighlight lang="php">
$gallery = '<div class="gallery">';
$images = $page->gallery;

// add thumbnail to gallery
if(count($page->thumbnail)){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$page->thumbnail->url.'"><img src="'. $page->thumbnail->getThumb('thumbnail') .'" title="'. $image->description .'"></a>';
}

foreach($images as $image){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$image->url.'"><img src="'. $image->getThumb('thumbnail') .'" title="'. $image->description .'"></a> ';
}
$gallery .= '</div>';
</syntaxhighlight>

=== Slider mit Processwire ===
[[Processwire - Slider]]

== Videos ==
[[Processwire - Working with Video]]

== File Uploads ==
[[ProcessWire - Uploads]]

== Navigation ==
[[ProcessWire - Navigation Snippets]]

== Seiten ==
http://processwire.com/api/variables/pages/
=== Inhalt einer Seite mit $page->get() ===
Beispiel
<syntaxhighlight lang="php">
<p>Visit us at:  <?php 
$contact = $pages->get("/about/contact/");
echo $contact->address;
?> </p>
</syntaxhighlight>
Kürzer:
<syntaxhighlight lang="php">
<p>Visit us at: <?=$pages->get("/about/contact/")->address?></p>
</syntaxhighlight>

=== Seiten Filtern find() ===
==== "Featured" Checkbox im Backend angehakt ====
<syntaxhighlight lang="php">
<ul> <?php 
$features = $pages->find("featured=1");
foreach($features as $feature)
echo "<li><a href='{$feature->url}'>{$feature->title}</a></li>";
?> </ul>
</syntaxhighlight>

==== Beispiel: Limitierte Ausgabe, Sortieren und in Unterverzeichnis ====
$pages->find("parent=/about/press/, featured=1, limit=3, sort=-date");
oder
$pages->get("/about/press/")->children("featured=1, limit=3, sort=-date");
Finde in Kategorie
$pages->get("/about/press/")->find("featured=1, limit=3, sort=-date");

==== Seiten mit Template xyz ====
$pages->find("template=press_release, featured=1, limit=3, sort=-date");
Ausführliches Beispiel mit Ausgabe
<syntaxhighlight lang="php">
<ul> <?php 
$features = $pages->find("template=press_release, featured=1, limit=3, sort=-date");
foreach($features as $feature) {
echo "<li>" .
"<h3><a href='{$feature->url}'>{$feature->title}</a></h3>" .
"<span class='date'>{$feature->date}</span>" .
"<p>{$feature->summary}</p>" .
"</li>"; 
}
?></ul>
</syntaxhighlight>

== Felder ==
=== Label zu Feldes und Subfeldern ausgeben ===
Beispiel mit dem Combo Profield. Das Prinzip funktioniert bei allen Feldern.
https://processwire.com/talk/topic/26183-getting-label-of-combo-subfield/#comment-217749
<syntaxhighlight lang="php">
$field = $fields->get('your_combo_field_name');
$settings = $field->getComboSettings();
$subfield = $settings->getSubfield('your_subfield_name');

// get label in current user language
$label = $subfield->getLabel();

// to get in a language other than current user language
$label = $subfield->getLabel('de');

// to get localized description
$description = $subfield->getDescription();

// to get localized notes
$notes = $subfield->getNotes();

// also note you can use getLanguageValue
$label = $subfield->getLanguageValue('de', 'label');
</syntaxhighlight>

=== Label eines Felds ausgeben ===
Geht über das Feld-Objekt.
echo $fields->get("body")->label;

=== Ist ein Feld leer ? ===
if($page->summary_de) { ... }
// check whitespace
if(trim($page->summary_de)) { ... }

=== Datumsfelder formatieren ===
<syntaxhighlight lang="php">

// aus Datumsfeldern
echo date("Y-m-d", $page->getUnformatted("closing"));

// aus Unix Timestamp mit Vanilla PHP
echo date("Y-m-d", $news->created);

setlocale(LC_TIME, "de_DE.utf8");
$weekday = strftime ( '%A' , $page->getUnformatted("date") );
$date = date("d.m.Y", $page->getUnformatted("date"));
</syntaxhighlight>

Beispiel aus ProcessWire Blog
<syntaxhighlight lang="php">
setlocale(LC_ALL, array('de_DE','de_DE.iso88591','de_DE.iso885915@euro','de_DE.utf8','de_DE@euro'));
$date = $page->date ? date('d.m.Y',$page->getUnformatted("date")) : date('d.m.Y',$page->getUnformatted("createdStr"));
</syntaxhighlight>

=== Optionen eines Select Felds ausgeben (fieldtypeOptions)===
<syntaxhighlight lang="php">
$options = $fieldtypes->get('FieldtypeOptions')->getOptions('YOURFIELDNAME');
foreach($options as $option) {
echo $option->id;
echo $option->value;
echo $option->title;
}
</syntaxhighlight>

=== Parent von Repeater oder RepeaterMatrix finden ===
Nutzt man ein Repeater Feld muss man manchmal die Seite herausfinden in der das Feld enthalten ist. Hierfür gibt es die Funktion getForPage().
<syntaxhighlight lang="php">
if( get_class($myPage) == 'ProcessWire\RepeaterMatrixPage' || get_class($myPage) == 'ProcessWire\RepeaterPage') {
$forPage = $myPage->getForPage();
//var_dump( $myPage->getForPage());
return $myPage = getImagePage($forPage);
}
</syntaxhighlight>

== Searchbar ==
<pre>

<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
<input type='text' name='q' placeholder='Search' value='<?php echo $sanitizer->entities($input->whitelist('q')); ?>' />
<button type='submit' name='submit'>Search</button>
</form>

</pre>
== Create Admin User ==
=== Reset Password - Passwort zurücksetzen ===
<syntaxhighlight lang="php">
<?php
require "index.php";
$admin = $users->get('admin1'); // or whatever your username is
$admin->setAndSave('pass', 'geheim');
?>
</syntaxhighlight>

https://processwire-recipes.com/recipes/resetting-admin-password-via-api/
Problem
For some reason, you have managed to lock yourself out of a site you are currently developing.

Solution
Paste the following into a file (e.g. "reset.php") in the root folder of the site, then run it.

ProcessWire version >= 2.6.9

<pre>
require "index.php";
$admin = $users->get('admin'); // or whatever your username is
$admin->setAndSave('pass', 'yo123456');
</pre>

ProcessWire version < 2.6.9

<pre>
require "index.php";
$admin = wire('users')->get('admin');
$admin->setOutputFormatting(false);
$admin->set('pass', 'yo12345');
$admin->save('pass');
</pre>

== Editor Link / Login Logout Link ==
_main.php
<syntaxhighlight lang="php">
<div class="editor">
<?php
if($user->isLoggedin()) {
// if user is logged in, show a logout link
echo "<a href='{$config->urls->admin}login/logout/'>Logout ($user->name)</a>";
} else {
// if user not logged in, show a login link
echo "<a href='{$config->urls->admin}'>∆</a>";
}
// output an "Edit" link if this page happens to be editable by the current user
if($page->editable()) echo "<li class='edit nav'><a href='$page->editUrl'>Edit</a></li>";
?>
</div>
</syntaxhighlight>
Siehe auch [[ProcessWire - User Login / Logout]]

== Conditions ==
=== Bedingungen durch Oder Operator in Feldern ===
Wenn das eine Feld leer ist nimm das nächste...
$t = $page->get("long_title|title");
=== Conditions für Navigation ===
<syntaxhighlight lang="php">
// If the page has children, then render navigation to them under the body.
// See the _func.php for the renderNav example function.
if($page->hasChildren) {
$content .= renderNav($page->children);
}
</syntaxhighlight>

<syntaxhighlight lang="php">
// if the rootParent (section) page has more than 1 child, then render
// section navigation in the sidebar
if($page->rootParent->hasChildren > 1) {
$sidebar = renderNavTree($page->rootParent, 3) . $page->sidebar;
}
</syntaxhighlight>
== $page Object ==
Siehe auch [[ProcessWire - Page Object]]
=== Zugriff auf $page in Funktionen ===
Beispiel:
<pre>
function getTitle() {
$page = wire("page");
$t = $page->title;
</pre>
oder einfach übergeben.
=== Variablen zu Render-Datei senden ===
<pre>
// you can send vars (here item count)
// use this inside the field rendering script
// ie. $page->_n
$page->set('_n',$n);
$page->set('_type',$item->type);
$out .= $item->render();
</pre>

== Copy and Paste ==
=== Einfache Datumssteuerung ===
Setzt Felder date_begin und date_end voraus.
<syntaxhighlight lang="php">
// Date check
$dateValid = true;
$now = time();
$start = 0;
$end = 0;
if($page->date_begin){
$start = strtotime( $page->date_begin('Y-m-d') . " 00:00:00");
if( !($now >= $start) ) $dateValid = false;
}
if($page->date_end){
$end = strtotime( $page->date_end('Y-m-d') . " 23:59:59");
if( ($now > $end) ) $dateValid = false;
}

if(!$dateValid) return '';
</syntaxhighlight>

=== Copyright / Published Date ===
<pre>
$published_date = date('d.m.Y',$page->created);
<?= '©'.$published_date ?>
</pre>

=== Stylesheets und Skripte mit AIOM ===
<script src="<?php echo AIOM::JS(array('scripts/jquery-2.2.4.min.js','scripts/jquery.chocolat.js','scripts/jquery.fitvids.js','scripts/jquery.flexslider-min.js', 'scripts/main.js')); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo AIOM::CSS('styles/main.less'); ?>">
<?php echo $homepage->site_title .' '. Date('Y'); ?>

=== Link zur Seite anhand URL-Pfad ===
<?php echo $pages->get('/ueber-uns/')->url; ?>

=== Feld einer Seite ===
$content_left = $page->get('content_left');

=== Bild ===
if($page->main_image){$image = $page->main_image->size(640,960);}
else $image = NULL;
=== Bild von der Homepage ===
in _init.php
$homepage = $pages->get('/');
im Template
if($homepage->config_logo){$logo = $homepage->config_logo->width(280);}
else $logo = NULL;

=== Simple Navigation ===
<pre>
<ul class='nav-list'>
<?php
// Childrens
foreach(($page->children) as $item) {
if($item->id == $page->rootParent->id) {
echo '<li class="current">';
} else {
echo '<li>';
}
echo '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
?>
</ul>
</pre>

=== Auflistung mit div. Feldern aus Kindseiten ===
<syntaxhighlight lang="php">
/**
* Publications list template
*
*/
$publications = '';
$children = $page->children;
foreach($children as $child){
$publications .= '<div class="box">';
$publications .= '<h2><a class="ajax-link" parent="'. $child->parent->title .'" name="'.$child->title.'" href="'. $child->url. '">'. $child->title . '</a></h2>';
$publications .= $child->body;
$publications .= '</div>';
}

$content = $page->body . $publications;
</syntaxhighlight>

=== Minigalerie ===
Thumbnails / Child Pages
<syntaxhighlight lang="php">
$works = '<div class="gallery">';
$children = $page->children;
foreach($children as $child){
$works .= '<a class="ajax-link" parent="'. $child->parent->title .'" name="'.$child->title.'" href="'. $child->url. '">';
$works .= '<h2>'. $child->title . '</h2>';

if(count($child->thumbnail)){
$works .= '<div class="thumbnail"><img src="'. $child->thumbnail->getThumb('thumbnail') .'" title="'. $image->description .'"></div>';
}

$works .= '</a>';
}
$works .= '</div>';

$content = $page->body . $works . '<br/>' . $page->video;
</syntaxhighlight>

=== Page Navigation ===
<syntaxhighlight lang="php">
// add next button if there is another page next
if($page->next->id){
$next = '<div class="next"><i>Next:</i> <a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">'. $page->next->title .'<span class="fa fa-arrow-right"><span></a></div>';
}

$content = '<h2>'. $page->title . '</h2>' . $page->body . '<br/><div class="video">' . $page->video .'</div>' . $next;
</syntaxhighlight>

=== Simple Gallery with next Page ===
<syntaxhighlight lang="php">
$gallery = '<div class="gallery">';
$images = $page->gallery;

// add thumbnail to gallery
if(count($page->thumbnail)){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$page->thumbnail->url.'"><img src="'. $page->thumbnail->getThumb('thumbnail') .'" title="'. $image->description .'"></a>';
}

foreach($images as $image){
$gallery .= '<a class="chocolat-image gallery-item" href="'.$image->url.'"><img src="'. $image->getThumb('thumbnail') .'" title="'. $image->description .'"></a> ';
}
$gallery .= '</div>';

// add next button if there is another page next
if($page->next->id){
$next = '<div class="next"><i>Next:</i> <a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">'. $page->next->title .'<span class="fa fa-arrow-right"><span></a></div>';
}

$content = '<h2>'. $page->title . '</h2>' . $page->body . '<br/>' . $gallery . '<br/><div class="video">' . $page->video .'</div>'. $next;

</syntaxhighlight>

=== Platzhalter-Seite mit Redirect auf erste Unterseite ===
Möchte man eine Eltern-Seite für das Menü generieren die keinen eigenen Inhalt besitzt sondern nur Unterseiten enthält, kann man ein Template für diese Seite erstellen, dass den User auf die erste Unterseite weiterleitet.

Diese Lösung ist ein regulärer Redirect. Ob das die Beste Lösung ist müßte man mal überlegen. Auf alle Fälle besser als Duplicate Content.
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$root = $pages->get("/");
if($page->numChildren){
$session->redirect($page->child()->url);
} else $session->redirect($root->url);
?>

</syntaxhighlight>

== ProcessWire - Debugging Snippets ==
[[ProcessWire - Debugging Snippets]]

E-Mail Probleme beheben

2022-08-29T13:03:01Z

134.3.84.225: /* Syntax */

== Siehe auch ==
[[TYPO3 - E-Mail]]
https://it-stack.de/30/05/2018/anti-spam-basics-fuer-versender-spf-dkim-dmarc-mehr/
== Testtools ==
https://mxtoolbox.com/SuperTool.aspx

== Spam Codes ==
https://www.futurequest.net/docs/SA/ (Spam Assasin Liste mit Scorewerten)
Codes die den Spam Level verändern können
FREEMAIL_FORGED_REPLYTO -> Freemail in Reply-To, aber nicht in From
HEADER_FROM_DIFFERENT_DOMAINS
HTML_MESSAGE
RCVD_IN_DNSWL_NONE
RDNS_NONE - hoher Score: Delivered to internal network by a host with no rDNS
SPF_HELO_NONE - kein spf eintrag nicht so schlimm

== Diverses ==
Make sure you have SPF, DMARC, DKIM, and sign up for their JMRP and SDNS they will tell you.

== SPF ==
https://all-inkl.com/wichtig/anleitungen/kas/tools/dns-werkzeuge/spf_482.html
'''SPF, Sender Policy Framework''', ist ein Standard zur Überprüfung des Absenders einer E-Mail und '''vermutlich der wichtigste Anti-Spam-Indikator'''. SPF ist ein TXT-Eintrag im DNS der Absender-Domain und leicht zu setzen.

Etwas mehr Wissen erfordert unter Umständen das '''Generieren des TXT Eintrags'''. Hier muss beachtet werden, welche Mailserver und Maildienste für das Versenden der Mails benutzt werden. Wenn ich den Mailserver meines Webhosters nutze, jedoch Mails über die Googlemail Weboberfläche schicke (E-Mail über SMTP eingebunden), muss ich das im SPF-Eintrag beachten. Hierzu gibt es von fast allen Anbietern entsprechende Infos/Hilfeseiten, etwas googeln hilft hier schnell.

Ein beispielhafter SPF-Eintrag, der Google als Relay inkludiert, könnte so aussehen:
v=spf1 a mx include:_spf.google.com ~all
* Kein ptr im SPF eintragen, wenn MX gesetzt ist, auch wenn das viele Generatoren immernoch machen.
* Überprüfung mit SPF Check der MXToolBox. Weitere Infos findet ihr bestimmt in der Hilfe eures Maildienstleisters/Hosters mit der Suche nach „SPF“.

=== Syntax ===
Erklärungen zur Syntax von SPF:

Am Anfang des SPF Records wird mit v= die SPF-Version festgelegt. Bislang gibt es nur spf1. Danach werden üblicherweise Direktiven angegeben. Diese bestehen aus einem optionalen Qualifikator und einem Mechanismus.

'''Qualifikatoren:'''

+ Pass - autorisierte Sender, daher Annahme der E-Mail; Standard, wenn kein Qualifikator explizit angegeben wird
- Fail - nicht autorisierte Sender, daher Abweisung der E-Mail
~ SoftFail - nicht autorisierte Sender, E-Mail wird trotzdem angenommen, kann jedoch z.b. als Spam markiert werden
? Neutral - Sender, über deren Gültigkeit nichts gesagt werden kann und die akzeptiert werden müssen, daher Annahme der E-Mail

gängige Mechanismen (=Befehle):

a A-/AAAA-Record der abgefragten oder explizit angegebenen Domain
mx MX-Record der abgefragten oder explizit angegebenen Domain
ptr PTR-Record der abgefragten oder explizit angegebenen Domain
ip4 IPv4-Adresse oder IPv4-Subnetz
ip6 IPv6-Adresse oder IPv6-Subnetz
include SPF-Abfrage der angegebenen Domain, diese sollte einen gültigen SPF-Record besitzen
all immer

Sofern für einen Mechanismus ein Argument übergeben werden soll, dann trennen Sie dies mit einem Doppelpunkt.

=== Beispiele ===
Beispiel für einen sehr gängigen Eintrag
v=spf1 mx a -all
Dieser bedeutet, dass für alle E-Mails, die von Sendern kommen, die sich nicht aus dem A- bzw. MX-Record des DNS ergeben, ein negatives Ergebnis zurückgegeben wird.

v=spf1 a:mail.example.org -all
Mails erlaubt, wenn sie aus den DNS Einträgen der Hauptdomain hervorgehen (-all) oder wenn es vom Server mit dem A-Record zu mail.example.org gehört.

== Mehrere Server im SPF Eintrag ==
Möchten Sie die '''IP eines E-Mail-Server''' in einen SPF-Eintrag aufnehmen, geben Sie vor dem Argument ~all die IP-Adresse des Servers ein. Verwenden Sie das '''Format ip4:Adresse oder ip6:Adresse''', wie in diesem Beispiel:
v=spf1 ip4:172.16.254.1 include:_spf.google.com ~all
Soll die '''Domain eines E-Mail-Servers''' hinzugefügt werden, verwenden Sie für jede Domain eine "'''include'''"-Anweisung. Beispiel:
v=spf1 include:serverdomain.com include:_spf.google.com ~all

=== SPF-Beispiele ===
https://stackoverflow.com/questions/14261214/too-many-dns-lookups-in-an-spf-record?rq=1
==== Amazon SES ====
Here are the TXT records we currently use successfully for Amazon SES as per Authenticating Your Email Address and (it's indeed unfortunate that their documentation doesn't address the quoting needs):

"v=spf1 include:amazonses.com ~all"
"spf2.0/pra include:amazonses.com ~all"

== DKIM ==
DKIM Signiert die Mails, so kann der Empfänger kontrollieren, ob der Inhalt unverändert ankommt. Also erstmal kein Spam Tool.

DKIM, DomainKeys Identified Mail (Standard, Wikipedia), ist wie SPF ebenfalls ein Protokoll zur Überprüfung von eingehenden Mails und deren unverändertem Inhalt.
DKIM nutzt zur Überprüfung eine asymmetrische Verschlüsselungstechnik mit zwei Schlüsseln – einem privaten Schlüssel, der Mails unsichtbar angehängt wird und einem öffentlichen Schlüssel, abgelegt im DNS des Absenders.

Somit kann der Empfänger-Mailserver die Schlüssel aus dem Absender DNS und der Mail-Signatur gegeneinander prüfen und validieren. Das Hinzufügen des privaten Schlüssels in den Mailserver, damit dieser unsichtbar alle ausgehenden Mails damit signiert, erfordert eine fortgeschrittene Anpassung des Mailservers bzw. Konfiguration des Mailers und übersteigt den Rahmen dieses Artikels. Für GMail-Nutzer hilft die Google DKIM Step-by-Step-Anleitung, ansonsten wieder beim Anbieter/Hoster in der Hilfe schauen bzw. Support fragen.

Der zweite Teil besteht aus einem TXT DNS Record, der zuvor generiert werden muss. Benötigt wird dafür die Domain und ein „Selektor“; eine beliebige Zeichenkette, z.B. „meindkim1“. Der Record sollte immer mit v=DKIM1;k=rsa;p= anfangen! Selbst wenn die Generatoren gerne einen der Parameter v oder k weglassen, oder diese als optional angeben, sollten beide gesetzt sein. Info: Beide Überprüfungs-Tools (MxToolBox und GSuite MX-Check) bestätigen einen validen DKIM übrigens nur mit Parametern v UND k, Warnungen falls einer fehlt. Die Überprüfung von DKIM erfordert dann ebenfalls Domain und Selektor und sollte anschließend positiv ausfallen.

Aber Achtung: Ausschließlich den DKIM DNS Eintrag zu setzen, ohne die Mails zu signieren, hat keine weiteren positiven Auswirkungen (meistens aber auch keine negativen) und ist daher nicht zu empfehlen.

=== DKIM bei all-inkl aktivieren ===
https://all-inkl.com/wichtig/anleitungen/providerwechsel/einrichtung/dns/dkim-bei-versand-ueber-unsere-mailserver_541.html
* In den Domaineinstellungen DKIM aktivieren.
* Der passende DNS Eintrag wird automatisch ergänzt und sieht ungefähr so aus:
Name: kas202005201235._domainkey.meineDomain.de
Typ: TXT
Eintrag: v=DKIM1; k=rsa; p=MIIB[MEHR SCHLÜSSELINHALT]QAB

== DMARC ==
https://elasticemail.com/dmarc (Generator für DMARC Einträge)

DMARC, Domain-based Message Authentication, Reporting, and Conformance (Standard, Wikipedia)

Technologie zur Erweiterung von SPF und DKIM. Geliefert werden zusätzliche Informationen, wie der Empfängerserver mit geprüften Mails umgehen soll sowie die Möglichkeit von Reports der Überprüfungen.

Auch hier ein DNS TXT Eintrag, der die Infos liefert. Zwei grundlegende Fragen müsst ihr euch stellen:
# Wie sollen Mails behandelt werden, deren SPF/DKIM-Überprüfung fehlschlägt? Ignorieren / Spam / Abweisen.
# Sollen Daten und fehlgeschlagene Überprüfungen als Reports verschickt werden und an welche Mail-Adresse?

Solltet ihr mit „Ignorieren“ dem Empfangsserver kein Verhalten vorschreiben wollen und auch keinerlei Reporting wünschen (v=DMARC1;p=none;), erfüllt DMARC keinen Zweck und hat auch keine weiteren Effekte auf den Mailempfang, kann also ausgelassen werden.

Restriktiveres Verhalten oder Reporting gewünscht? Dann wird einer der vielen existierenden Generatoren aus den gewählten Optionen einen einfachen bis recht komplexen TXT Record erstellen:
v=DMARC1; p=none; rua=mailto:admin@it-stack.de; ruf=mailto:admin@it-stack.de; fo=1;
Dieser Eintrag schickt Reportings an mich, wenn SPF oder DKIM fehlschlägt sowie generelle Reports, der Mailserver soll die Fehlschläge jedoch wie gewohnt behandeln, ich gebe kein strikteres Vorgehen vor.

== Blacklists ==
Es gibt eine Vielzahl von professionell betriebenen Anti-Spam-Listen, also Blacklists, die von Mailservern zur weiteren Überprüfung abgefragt werden können. Ob mein Mailserver auf einer Blacklist steht, kann ich beispielsweise mit der MxToolBox Blacklist Suche herausfinden. Gebt hier eure Domain ein und eine Auswertung von über 100 Blackslists wird eventuelle Funde aufzeigen. Solltet euer Mailserver nicht die IP eurer Domain teilen oder weitere in das Mailing involvierten MX-Server-IPs bekannt sein, diese am besten auch noch testen.
Eure Domain/IP ist in einer Blacklist gefunden worden? Das ist unpraktisch, kann aber mal passieren. Geblacklistet werden für gewöhnlich ganze Server. Auf einem Shared Server, wie das bei Webhosting fast immer der Fall ist, sind, je nach Vertrag, 20 bis 100 weitere Kunden untergebracht. Die Chance, dass ein anderer Kunde für das Blacklisting verantwortlich ist, ist hoch.
Was tun? Auf der Betreiberseite der Blacklist gibt es meistens Suchen/Informationsportale, in denen Blacklist-Kandidaten, teilweise mit mehr Details und Begründung, gesucht werden können. Ich empfehle zwei Recherchen: Suche nach der Domain und nach der/den IPs.
So kann es sein, dass die IP-Adresse des Servers in mehreren Einträgen gefunden wird (Reportfunde bei Spamhaus ZEN: Link1, Link2, in welchen wiederum eure Domain nicht erwähnt wird), für die Domain jedoch kein Eintrag vorhanden ist. Das sind weitere Hinweise darauf, dass nicht ihr, sondern ein anderer Kunde des Servers Schuld hat.
Unabhängig von diesen Recherchen könnt ihr vermutlich wenig gegen das Blacklisting tun. Manche Betreiber bieten Unblock Formulare an, andere nicht. Informiert auf jeden Fall euren Webhoster/Mailing-Anbieter mit allen herausgefundenen Informationen über das Blacklisting – dieser hat für gewöhnlich andere Optionen und kann direkt selbst in die Behandlung der Problemursache, also gegen entsprechende Kunden, vorgehen.

== User Trust ==
Desweiteren hilft es, sich zusätzlich Trust über den User/Empfänger zu holen – beispielsweise durch das Hinzufügen eurer Absenderadresse zu den Kontakten, das Markieren der Nachrichten als „Wichtig“ oder Versehen mit Sternchen/Markern (je nach Client heißt das anders), den Absender „Nie als Spam markieren“ (ebenfalls je Client anders) und mehr. Alles, was man mit einer Mail oder einem Absender bei dem jeweiligen Anbieter des Empfängers tun kann, dass letztlich einen positiven Effekt hat. Die Anbieter speichern solche Informationen (wie oft wurde eine Mail mit Inhalt X positiv behandelt, wie oft der Absender usw.) und behandeln Mails dieses Absenders zukünftig besser. Diese Maßnahme kann man bis zu einer gewissen Anzahl mit den eigenen Mitarbeitern starten – Mails an ihre private Mailadresse schicken, bestenfalls bei unterschiedlichen Anbietern, und die Mails von ihnen „positiv behandeln“ lassen.

E-Mail Probleme beheben

2022-08-29T13:01:44Z

134.3.84.225: /* SPF */

== Siehe auch ==
[[TYPO3 - E-Mail]]
https://it-stack.de/30/05/2018/anti-spam-basics-fuer-versender-spf-dkim-dmarc-mehr/
== Testtools ==
https://mxtoolbox.com/SuperTool.aspx

== Spam Codes ==
https://www.futurequest.net/docs/SA/ (Spam Assasin Liste mit Scorewerten)
Codes die den Spam Level verändern können
FREEMAIL_FORGED_REPLYTO -> Freemail in Reply-To, aber nicht in From
HEADER_FROM_DIFFERENT_DOMAINS
HTML_MESSAGE
RCVD_IN_DNSWL_NONE
RDNS_NONE - hoher Score: Delivered to internal network by a host with no rDNS
SPF_HELO_NONE - kein spf eintrag nicht so schlimm

== Diverses ==
Make sure you have SPF, DMARC, DKIM, and sign up for their JMRP and SDNS they will tell you.

== SPF ==
https://all-inkl.com/wichtig/anleitungen/kas/tools/dns-werkzeuge/spf_482.html
'''SPF, Sender Policy Framework''', ist ein Standard zur Überprüfung des Absenders einer E-Mail und '''vermutlich der wichtigste Anti-Spam-Indikator'''. SPF ist ein TXT-Eintrag im DNS der Absender-Domain und leicht zu setzen.

Etwas mehr Wissen erfordert unter Umständen das '''Generieren des TXT Eintrags'''. Hier muss beachtet werden, welche Mailserver und Maildienste für das Versenden der Mails benutzt werden. Wenn ich den Mailserver meines Webhosters nutze, jedoch Mails über die Googlemail Weboberfläche schicke (E-Mail über SMTP eingebunden), muss ich das im SPF-Eintrag beachten. Hierzu gibt es von fast allen Anbietern entsprechende Infos/Hilfeseiten, etwas googeln hilft hier schnell.

Ein beispielhafter SPF-Eintrag, der Google als Relay inkludiert, könnte so aussehen:
v=spf1 a mx include:_spf.google.com ~all
* Kein ptr im SPF eintragen, wenn MX gesetzt ist, auch wenn das viele Generatoren immernoch machen.
* Überprüfung mit SPF Check der MXToolBox. Weitere Infos findet ihr bestimmt in der Hilfe eures Maildienstleisters/Hosters mit der Suche nach „SPF“.

=== Syntax ===
Erklärungen zur Syntax von SPF:

Am Anfang des SPF Records wird mit v= die SPF-Version festgelegt. Bislang gibt es nur spf1. Danach werden üblicherweise Direktiven angegeben. Diese bestehen aus einem optionalen Qualifikator und einem Mechanismus.

'''Qualifikatoren:'''

+ Pass - autorisierte Sender, daher Annahme der E-Mail; Standard, wenn kein Qualifikator explizit angegeben wird
- Fail - nicht autorisierte Sender, daher Abweisung der E-Mail
~ SoftFail - nicht autorisierte Sender, E-Mail wird trotzdem angenommen, kann jedoch z.b. als Spam markiert werden
? Neutral - Sender, über deren Gültigkeit nichts gesagt werden kann und die akzeptiert werden müssen, daher Annahme der E-Mail

gängige Mechanismen (=Befehle):

a A-/AAAA-Record der abgefragten oder explizit angegebenen Domain
mx MX-Record der abgefragten oder explizit angegebenen Domain
ptr PTR-Record der abgefragten oder explizit angegebenen Domain
ip4 IPv4-Adresse oder IPv4-Subnetz
ip6 IPv6-Adresse oder IPv6-Subnetz
include SPF-Abfrage der angegebenen Domain, diese sollte einen gültigen SPF-Record besitzen
all immer

Sofern für einen Mechanismus ein Argument übergeben werden soll, dann trennen Sie dies mit einem Doppelpunkt.

Beispiel:
v=spf1 mx a -all
Dieser bedeutet, dass für alle E-Mails, die von Sendern kommen, die sich nicht aus dem A- bzw. MX-Record des DNS ergeben, ein negatives Ergebnis zurückgegeben wird.

v=spf1 a:mail.example.org -all
Mails erlaubt, wenn sie aus den DNS Einträgen der Hauptdomain hervorgehen (-all) oder wenn es vom Server mit dem A-Record zu mail.example.org gehört.

== Mehrere Server im SPF Eintrag ==
Möchten Sie die '''IP eines E-Mail-Server''' in einen SPF-Eintrag aufnehmen, geben Sie vor dem Argument ~all die IP-Adresse des Servers ein. Verwenden Sie das '''Format ip4:Adresse oder ip6:Adresse''', wie in diesem Beispiel:
v=spf1 ip4:172.16.254.1 include:_spf.google.com ~all
Soll die '''Domain eines E-Mail-Servers''' hinzugefügt werden, verwenden Sie für jede Domain eine "'''include'''"-Anweisung. Beispiel:
v=spf1 include:serverdomain.com include:_spf.google.com ~all

=== SPF-Beispiele ===
https://stackoverflow.com/questions/14261214/too-many-dns-lookups-in-an-spf-record?rq=1
==== Amazon SES ====
Here are the TXT records we currently use successfully for Amazon SES as per Authenticating Your Email Address and (it's indeed unfortunate that their documentation doesn't address the quoting needs):

"v=spf1 include:amazonses.com ~all"
"spf2.0/pra include:amazonses.com ~all"

== DKIM ==
DKIM Signiert die Mails, so kann der Empfänger kontrollieren, ob der Inhalt unverändert ankommt. Also erstmal kein Spam Tool.

DKIM, DomainKeys Identified Mail (Standard, Wikipedia), ist wie SPF ebenfalls ein Protokoll zur Überprüfung von eingehenden Mails und deren unverändertem Inhalt.
DKIM nutzt zur Überprüfung eine asymmetrische Verschlüsselungstechnik mit zwei Schlüsseln – einem privaten Schlüssel, der Mails unsichtbar angehängt wird und einem öffentlichen Schlüssel, abgelegt im DNS des Absenders.

Somit kann der Empfänger-Mailserver die Schlüssel aus dem Absender DNS und der Mail-Signatur gegeneinander prüfen und validieren. Das Hinzufügen des privaten Schlüssels in den Mailserver, damit dieser unsichtbar alle ausgehenden Mails damit signiert, erfordert eine fortgeschrittene Anpassung des Mailservers bzw. Konfiguration des Mailers und übersteigt den Rahmen dieses Artikels. Für GMail-Nutzer hilft die Google DKIM Step-by-Step-Anleitung, ansonsten wieder beim Anbieter/Hoster in der Hilfe schauen bzw. Support fragen.

Der zweite Teil besteht aus einem TXT DNS Record, der zuvor generiert werden muss. Benötigt wird dafür die Domain und ein „Selektor“; eine beliebige Zeichenkette, z.B. „meindkim1“. Der Record sollte immer mit v=DKIM1;k=rsa;p= anfangen! Selbst wenn die Generatoren gerne einen der Parameter v oder k weglassen, oder diese als optional angeben, sollten beide gesetzt sein. Info: Beide Überprüfungs-Tools (MxToolBox und GSuite MX-Check) bestätigen einen validen DKIM übrigens nur mit Parametern v UND k, Warnungen falls einer fehlt. Die Überprüfung von DKIM erfordert dann ebenfalls Domain und Selektor und sollte anschließend positiv ausfallen.

Aber Achtung: Ausschließlich den DKIM DNS Eintrag zu setzen, ohne die Mails zu signieren, hat keine weiteren positiven Auswirkungen (meistens aber auch keine negativen) und ist daher nicht zu empfehlen.

=== DKIM bei all-inkl aktivieren ===
https://all-inkl.com/wichtig/anleitungen/providerwechsel/einrichtung/dns/dkim-bei-versand-ueber-unsere-mailserver_541.html
* In den Domaineinstellungen DKIM aktivieren.
* Der passende DNS Eintrag wird automatisch ergänzt und sieht ungefähr so aus:
Name: kas202005201235._domainkey.meineDomain.de
Typ: TXT
Eintrag: v=DKIM1; k=rsa; p=MIIB[MEHR SCHLÜSSELINHALT]QAB

== DMARC ==
https://elasticemail.com/dmarc (Generator für DMARC Einträge)

DMARC, Domain-based Message Authentication, Reporting, and Conformance (Standard, Wikipedia)

Technologie zur Erweiterung von SPF und DKIM. Geliefert werden zusätzliche Informationen, wie der Empfängerserver mit geprüften Mails umgehen soll sowie die Möglichkeit von Reports der Überprüfungen.

Auch hier ein DNS TXT Eintrag, der die Infos liefert. Zwei grundlegende Fragen müsst ihr euch stellen:
# Wie sollen Mails behandelt werden, deren SPF/DKIM-Überprüfung fehlschlägt? Ignorieren / Spam / Abweisen.
# Sollen Daten und fehlgeschlagene Überprüfungen als Reports verschickt werden und an welche Mail-Adresse?

Solltet ihr mit „Ignorieren“ dem Empfangsserver kein Verhalten vorschreiben wollen und auch keinerlei Reporting wünschen (v=DMARC1;p=none;), erfüllt DMARC keinen Zweck und hat auch keine weiteren Effekte auf den Mailempfang, kann also ausgelassen werden.

Restriktiveres Verhalten oder Reporting gewünscht? Dann wird einer der vielen existierenden Generatoren aus den gewählten Optionen einen einfachen bis recht komplexen TXT Record erstellen:
v=DMARC1; p=none; rua=mailto:admin@it-stack.de; ruf=mailto:admin@it-stack.de; fo=1;
Dieser Eintrag schickt Reportings an mich, wenn SPF oder DKIM fehlschlägt sowie generelle Reports, der Mailserver soll die Fehlschläge jedoch wie gewohnt behandeln, ich gebe kein strikteres Vorgehen vor.

== Blacklists ==
Es gibt eine Vielzahl von professionell betriebenen Anti-Spam-Listen, also Blacklists, die von Mailservern zur weiteren Überprüfung abgefragt werden können. Ob mein Mailserver auf einer Blacklist steht, kann ich beispielsweise mit der MxToolBox Blacklist Suche herausfinden. Gebt hier eure Domain ein und eine Auswertung von über 100 Blackslists wird eventuelle Funde aufzeigen. Solltet euer Mailserver nicht die IP eurer Domain teilen oder weitere in das Mailing involvierten MX-Server-IPs bekannt sein, diese am besten auch noch testen.
Eure Domain/IP ist in einer Blacklist gefunden worden? Das ist unpraktisch, kann aber mal passieren. Geblacklistet werden für gewöhnlich ganze Server. Auf einem Shared Server, wie das bei Webhosting fast immer der Fall ist, sind, je nach Vertrag, 20 bis 100 weitere Kunden untergebracht. Die Chance, dass ein anderer Kunde für das Blacklisting verantwortlich ist, ist hoch.
Was tun? Auf der Betreiberseite der Blacklist gibt es meistens Suchen/Informationsportale, in denen Blacklist-Kandidaten, teilweise mit mehr Details und Begründung, gesucht werden können. Ich empfehle zwei Recherchen: Suche nach der Domain und nach der/den IPs.
So kann es sein, dass die IP-Adresse des Servers in mehreren Einträgen gefunden wird (Reportfunde bei Spamhaus ZEN: Link1, Link2, in welchen wiederum eure Domain nicht erwähnt wird), für die Domain jedoch kein Eintrag vorhanden ist. Das sind weitere Hinweise darauf, dass nicht ihr, sondern ein anderer Kunde des Servers Schuld hat.
Unabhängig von diesen Recherchen könnt ihr vermutlich wenig gegen das Blacklisting tun. Manche Betreiber bieten Unblock Formulare an, andere nicht. Informiert auf jeden Fall euren Webhoster/Mailing-Anbieter mit allen herausgefundenen Informationen über das Blacklisting – dieser hat für gewöhnlich andere Optionen und kann direkt selbst in die Behandlung der Problemursache, also gegen entsprechende Kunden, vorgehen.

== User Trust ==
Desweiteren hilft es, sich zusätzlich Trust über den User/Empfänger zu holen – beispielsweise durch das Hinzufügen eurer Absenderadresse zu den Kontakten, das Markieren der Nachrichten als „Wichtig“ oder Versehen mit Sternchen/Markern (je nach Client heißt das anders), den Absender „Nie als Spam markieren“ (ebenfalls je Client anders) und mehr. Alles, was man mit einer Mail oder einem Absender bei dem jeweiligen Anbieter des Empfängers tun kann, dass letztlich einen positiven Effekt hat. Die Anbieter speichern solche Informationen (wie oft wurde eine Mail mit Inhalt X positiv behandelt, wie oft der Absender usw.) und behandeln Mails dieses Absenders zukünftig besser. Diese Maßnahme kann man bis zu einer gewissen Anzahl mit den eigenen Mitarbeitern starten – Mails an ihre private Mailadresse schicken, bestenfalls bei unterschiedlichen Anbietern, und die Mails von ihnen „positiv behandeln“ lassen.

FreeCAD

2022-08-28T17:04:19Z

134.3.84.225: /* Datum Planes */

== Links ==
https://www.youtube.com/playlist?list=PL_28gc6LBA1ve8Aamf1izQjNlqgtBWoLS - Super Einstieg, Playlist mit allen wichtigen Themen.
== Basics ==
Oft genutzter Design Prozess.
* PartDesign Workbench nutzen
* Part erstellen
* Body erstellen
* Sketch erstellen
* Sketch Padding oder Revolve

== Workbench ==
Für verschiedene Aufgaben gibt es verschiedene Arbeitsbereiche, genannt Workbench.

Wichtige Workbenches:

PartDesign - Erstellen von Teilen. Hier verbringt man am meisten Zeit.

Spreadsheet - Wichtig für Parametrisierte Entwürfe. Hier legt man seine Variablen an.

=== Spreadsheet ===
Gutes Makro: EasyAlias

== Patterns, Mirrors, Paths ==
* Ein Pattern benötigt ein eigenes Sketch
=== Linear Pattern ===
* Linear auf einer Achse oder Bezugsachse ausrichten Z.B. Lochreihen
* Angabe von Länge der Reihe, Richtung (Achse) und Anzahl der Löcher
=== Polar Pattern ===
* Ausrichten auf einer Kreislinie
* wichtig ist der Startpunkt (z.b. erstes Loch). Von diesem wird mit oder gegen den Uhrzeigersinn gestartet.
* Angabe von Winkel und Anzahl. Mittelpunkt der Kreisbahn ist Ursprung im aktuellen Koordinatensystem.
=== Mirror Tool ===
Kann an den globelen oder lokalen Ebenen vertikal oder horizontal spiegeln.

Nützlich ist das Spiegeln an einem Datum Plane. So ist man flexibler bezügl. Position und Winkel.

Limitation: Du kannst nicht einen Mirror erneut spiegeln. Wenn man also vertikal und horizontal spiegeln will kann man das '''Multitransform Tool''' nutzen.

=== Multitransform Tool ===
Das Multitransform Tool erlaubt die anderen Transformtools mehrstufig anzuwenden. So kann man hier z.b. auch zweimal Mirror anwenden.

=== Draft Mode und PathArray ===
Mit Path Arrays kann man auch Objekte an Pfaden ausrichen.

Beispiel: Löcher an Pfad:
# Im '''Draft Mode'''
# Path erstellen und Circle erstellen
# Im Combo Panel zuerst Kreis, dann Pfad anwählen und mit Path Array verteilen.
# Path Array in Sketch umwandeln
# Sketch in entsprechendes Objekt ziehen
# Pockets oder was auch immer aus dem Sketch erstellen
# Überflüssige Objekte können gelöscht oder ausgeblendet werden.

== Bezug auf andere Objekte oder Sketches ==
=== External Geometry tool ===
Für Constraint zu anderen Objekten importiert man sich z.B. Edges aus anderen Objekten in das Sketch. Dazu gibt es das '''external Geometry''' Tool in der Sketch Workbench. Vorsicht - funktioniert nicht mit Faces oder ganzen Objekten.

== Datum Planes ==
Wenn man mehrere Objekte (z.B.Löcher) auf einer Objektkante setzen möchte kann man mit Datum Planes arbeiten.
Man erstellt ein Datum Plane z.B. auf der xz-Ebene und setzt einen passenden Offset. Die neue Plane (Ebene) kann man nutzen wie die Standard-Ebenen.
'''
Planes auf Objekten?''' - Das geht, aber hier wird öfter abgeraten, es gäbe Namenskonflikte. Außerdem ist die Positionierung des Mittelpunkts der Plane Ebene manchmal seltsam.

Besser Plane auf Grundebenen und dann Offset und Winkel.

Außerdem kann man auch Sketches direkt auf Objektfaces setzen.

FreeCAD

2022-08-28T17:04:04Z

134.3.84.225: /* Datum Planes */

FreeCAD

2022-08-28T09:58:31Z

134.3.84.225: /* Draft Mode und PathArray */

FreeCAD

2022-08-28T09:58:04Z

134.3.84.225: /* Patterns & Mirror */

== Links ==
https://www.youtube.com/playlist?list=PL_28gc6LBA1ve8Aamf1izQjNlqgtBWoLS - Super Einstieg, Playlist mit allen wichtigen Themen.
== Basics ==
Oft genutzter Design Prozess.
* PartDesign Workbench nutzen
* Part erstellen
* Body erstellen
* Sketch erstellen
* Sketch Padding oder Revolve

== Workbench ==
Für verschiedene Aufgaben gibt es verschiedene Arbeitsbereiche, genannt Workbench.

Wichtige Workbenches:

PartDesign - Erstellen von Teilen. Hier verbringt man am meisten Zeit.

Spreadsheet - Wichtig für Parametrisierte Entwürfe. Hier legt man seine Variablen an.

=== Spreadsheet ===
Gutes Makro: EasyAlias

== Patterns, Mirrors, Paths ==
* Ein Pattern benötigt ein eigenes Sketch
=== Linear Pattern ===
* Linear auf einer Achse oder Bezugsachse ausrichten Z.B. Lochreihen
* Angabe von Länge der Reihe, Richtung (Achse) und Anzahl der Löcher
=== Polar Pattern ===
* Ausrichten auf einer Kreislinie
* wichtig ist der Startpunkt (z.b. erstes Loch). Von diesem wird mit oder gegen den Uhrzeigersinn gestartet.
* Angabe von Winkel und Anzahl. Mittelpunkt der Kreisbahn ist Ursprung im aktuellen Koordinatensystem.
=== Mirror Tool ===
Kann an den globelen oder lokalen Ebenen vertikal oder horizontal spiegeln.

Nützlich ist das Spiegeln an einem Datum Plane. So ist man flexibler bezügl. Position und Winkel.

Limitation: Du kannst nicht einen Mirror erneut spiegeln. Wenn man also vertikal und horizontal spiegeln will kann man das '''Multitransform Tool''' nutzen.

=== Multitransform Tool ===
Das Multitransform Tool erlaubt die anderen Transformtools mehrstufig anzuwenden. So kann man hier z.b. auch zweimal Mirror anwenden.

=== Draft Mode und PathArray ===
Mit Path Arrays kann man auch Objekte an Pfaden ausrichen.

Beispiel: Löcher an Pfad:
# Im '''Draft Mode'''
# Path erstellen und Circle erstellen
# Im Combo Panel zuerst Kreis, dann Pfad anwählen und mit Path Array verteilen.
# Path Array in Sketch umwandeln
# Sketch in entsprechendes Objekt ziehen
# Pockets oder was auch immer aus dem Sketch erstellen

== Bezug auf andere Objekte oder Sketches ==
=== External Geometry tool ===
Für Constraint zu anderen Objekten importiert man sich z.B. Edges aus anderen Objekten in das Sketch. Dazu gibt es das '''external Geometry''' Tool in der Sketch Workbench. Vorsicht - funktioniert nicht mit Faces oder ganzen Objekten.

== Datum Planes ==
Wenn man mehrere Objekte (z.B.Löcher) auf einer Objektkante setzen möchte kann man mit Datum Planes arbeiten.
Man erstellt ein Datum Plane z.B. auf der xz-Ebene und setzt einen passenden Offset. Die neue Plane (Ebene) kann man nutzen wie die Standard-Ebenen.

Testen: Plane auf Objekt setzen - geht das?

FreeCAD

2022-08-28T09:06:49Z

134.3.84.225: /* Multitransform Tool */

== Links ==
https://www.youtube.com/playlist?list=PL_28gc6LBA1ve8Aamf1izQjNlqgtBWoLS - Super Einstieg, Playlist mit allen wichtigen Themen.
== Basics ==
Oft genutzter Design Prozess.
* PartDesign Workbench nutzen
* Part erstellen
* Body erstellen
* Sketch erstellen
* Sketch Padding oder Revolve

== Workbench ==
Für verschiedene Aufgaben gibt es verschiedene Arbeitsbereiche, genannt Workbench.

Wichtige Workbenches:

PartDesign - Erstellen von Teilen. Hier verbringt man am meisten Zeit.

Spreadsheet - Wichtig für Parametrisierte Entwürfe. Hier legt man seine Variablen an.

=== Spreadsheet ===
Gutes Makro: EasyAlias

== Patterns & Mirror ==
* Ein Pattern benötigt ein eigenes Sketch
=== Linear Pattern ===
* Linear auf einer Achse oder Bezugsachse ausrichten Z.B. Lochreihen
* Angabe von Länge der Reihe, Richtung (Achse) und Anzahl der Löcher
=== Polar Pattern ===
* Ausrichten auf einer Kreislinie
* wichtig ist der Startpunkt (z.b. erstes Loch). Von diesem wird mit oder gegen den Uhrzeigersinn gestartet.
* Angabe von Winkel und Anzahl. Mittelpunkt der Kreisbahn ist Ursprung im aktuellen Koordinatensystem.
=== Mirror Tool ===
Kann an den globelen oder lokalen Ebenen vertikal oder horizontal spiegeln.

Nützlich ist das Spiegeln an einem Datum Plane. So ist man flexibler bezügl. Position und Winkel.

Limitation: Du kannst nicht einen Mirror erneut spiegeln. Wenn man also vertikal und horizontal spiegeln will kann man das '''Multitransform Tool''' nutzen.

=== Multitransform Tool ===
Das Multitransform Tool erlaubt die anderen Transformtools mehrstufig anzuwenden. So kann man hier z.b. auch zweimal Mirror anwenden.

== Bezug auf andere Objekte oder Sketches ==
=== External Geometry tool ===
Für Constraint zu anderen Objekten importiert man sich z.B. Edges aus anderen Objekten in das Sketch. Dazu gibt es das '''external Geometry''' Tool in der Sketch Workbench. Vorsicht - funktioniert nicht mit Faces oder ganzen Objekten.

== Datum Planes ==
Wenn man mehrere Objekte (z.B.Löcher) auf einer Objektkante setzen möchte kann man mit Datum Planes arbeiten.
Man erstellt ein Datum Plane z.B. auf der xz-Ebene und setzt einen passenden Offset. Die neue Plane (Ebene) kann man nutzen wie die Standard-Ebenen.

Testen: Plane auf Objekt setzen - geht das?

FreeCAD

2022-08-28T08:58:27Z

134.3.84.225: /* Patterns */

== Links ==
https://www.youtube.com/playlist?list=PL_28gc6LBA1ve8Aamf1izQjNlqgtBWoLS - Super Einstieg, Playlist mit allen wichtigen Themen.
== Basics ==
Oft genutzter Design Prozess.
* PartDesign Workbench nutzen
* Part erstellen
* Body erstellen
* Sketch erstellen
* Sketch Padding oder Revolve

== Workbench ==
Für verschiedene Aufgaben gibt es verschiedene Arbeitsbereiche, genannt Workbench.

Wichtige Workbenches:

PartDesign - Erstellen von Teilen. Hier verbringt man am meisten Zeit.

Spreadsheet - Wichtig für Parametrisierte Entwürfe. Hier legt man seine Variablen an.

=== Spreadsheet ===
Gutes Makro: EasyAlias

== Patterns & Mirror ==
* Ein Pattern benötigt ein eigenes Sketch
=== Linear Pattern ===
* Linear auf einer Achse oder Bezugsachse ausrichten Z.B. Lochreihen
* Angabe von Länge der Reihe, Richtung (Achse) und Anzahl der Löcher
=== Polar Pattern ===
* Ausrichten auf einer Kreislinie
* wichtig ist der Startpunkt (z.b. erstes Loch). Von diesem wird mit oder gegen den Uhrzeigersinn gestartet.
* Angabe von Winkel und Anzahl. Mittelpunkt der Kreisbahn ist Ursprung im aktuellen Koordinatensystem.
=== Mirror Tool ===
Kann an den globelen oder lokalen Ebenen vertikal oder horizontal spiegeln.

Nützlich ist das Spiegeln an einem Datum Plane. So ist man flexibler bezügl. Position und Winkel.

Limitation: Du kannst nicht einen Mirror erneut spiegeln. Wenn man also vertikal und horizontal spiegeln will kann man das '''Multitransform Tool''' nutzen.

=== Multitransform Tool ===
todo

== Bezug auf andere Objekte oder Sketches ==
=== External Geometry tool ===
Für Constraint zu anderen Objekten importiert man sich z.B. Edges aus anderen Objekten in das Sketch. Dazu gibt es das '''external Geometry''' Tool in der Sketch Workbench. Vorsicht - funktioniert nicht mit Faces oder ganzen Objekten.

== Datum Planes ==
Wenn man mehrere Objekte (z.B.Löcher) auf einer Objektkante setzen möchte kann man mit Datum Planes arbeiten.
Man erstellt ein Datum Plane z.B. auf der xz-Ebene und setzt einen passenden Offset. Die neue Plane (Ebene) kann man nutzen wie die Standard-Ebenen.

Testen: Plane auf Objekt setzen - geht das?

FreeCAD

2022-08-28T08:40:23Z

134.3.84.225:

FreeCAD

2022-08-28T08:24:03Z

134.3.84.225: /* Bezug auf andere Objekte oder Sketches */

FreeCAD

2022-08-28T08:23:37Z

134.3.84.225: /* Externe Geometrie */

FreeCAD

2022-08-28T08:16:55Z

134.3.84.225:

FreeCAD

2022-08-28T08:10:55Z

134.3.84.225: /* Linear Pattern */

FreeCAD

2022-08-28T07:45:57Z

134.3.84.225: /* Patterns */

FreeCAD

2022-08-28T07:37:30Z

134.3.84.225:

FreeCAD

2022-08-27T17:32:26Z

134.3.84.225: Die Seite wurde neu angelegt: „== Links == https://www.youtube.com/playlist?list=PL_28gc6LBA1ve8Aamf1izQjNlqgtBWoLS - Super Einstieg, Playlist mit allen wichtigen Themen. == Basics == Oft g…“

FreeCad

2022-08-27T17:27:12Z

134.3.84.225: Die Seite wurde neu angelegt: „FreeCAD“

[[FreeCAD]]

HTML5 - Video Snippets

2022-08-26T07:09:25Z

134.3.84.225: /* GSAP - Slider für Videostart */

== Komplette Beispielskripte ==
=== GSAP - Slider für Videostart ===
Videos mit Ton werden erst nach einer Userinteraktion wie ein Klick auf Play gespielt (Safari, Firefox). Ein Slider Drag funktioniert nicht. Aber man kann den Klick bei der ersten Sliderberührung simulieren und das Video sofort wieder stoppen. Ab diesem Moment können wir den Player auch selbst steuern. Z.B. wenn der Slider komplett gezogen ist.

<syntaxhighlight lang="javascript">
$(document).ready(function(){

//init
const myVideo = document.getElementById('myVideo')
//const myAudio = document.getElementById('myAudio')

tl=gsap.timeline({paused:true});
tl.to('#intro',{backgroundColor:'#28282D', color:'#6E6E75'})
.fromTo('#myVideo',{opacity:0},{opacity:1})
.to('#video-overlay',{backgroundColor:'transparent', backgroundImage:'none'},'<')
.to('#intro-slider',{opacity:0,display:"none"})
.fromTo('#btn-skip',{opacity:0},{opacity:1})
var initClick = false;
$('#slider-plate').on('mousedown', function(){
//myAudio.play();
if(!initClick){
console.log("initial click to prevent autoplay-blocking")
//myVideo.play();
//myVideo.pause();
initClick=true;
}
})

// gsap
gsap.registerPlugin(InertiaPlugin)
Draggable.create("#slider-plate",{
type: "x",
bounds: "#slider-bounds",
inertia:true,
edgeResistance: 1,
dragResistance:0,
duration: {min:0.3, max: 0.5},
snap: {
x: function(xPos) {
if(xPos < this.maxX){return 0}
else{return xPos}
},
},
onThrowComplete: function(){
//console.log("intertia flick complete ended at " + this.x + " out of " + this.maxX);
if(this.x == this.maxX){
tl.play()
console.log("play video")
var promise = myVideo.play()
if (promise !== undefined) {
promise.catch(error => {
console.log("autoplay prevented by browser")
console.log(error)
// show video controls
video = document.getElementById('myVideo')
video.setAttribute("controls","controls")

}).then(() => {
console.log("player started")
});
}
}else {
myVideo.pause();
//myAudio.pause();
console.log("pause video")
}
},
onDragStart: function(){
// stop autosliding
//tl.progress(0);
tlSimDrag.pause();
},
});

// toggle controls
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
// simulate a drag to notice the user
tlSimDrag = new gsap.timeline({
defaults:{ease: "power2.out"},
repeat: -1,
delay: 1,
repeatDelay:3,
});

tlSimDrag.to('#slider-plate',0.7,{x:100}).to('#slider-plate',1.5,{
x:0,
delay: 0.1
});
});

</syntaxhighlight>

HTML5 - Video Snippets

2022-08-26T07:08:57Z

134.3.84.225: Die Seite wurde neu angelegt: „== Komplette Beispielskripte == === GSAP - Slider für Videostart === Videos mit Ton werden erst nach einer Userinteraktion wie ein Klick auf Play gespielt (Sa…“

HTML5 - Video

2022-08-26T07:05:59Z

134.3.84.225:

== Links ==
https://www.html5rocks.com/de/tutorials/video/basics//
[[HTML5 - Video Snippets]]

== Custom Controls ==
=== Hide Controls ===
<pre>
//For Firefox we have to handle it in JavaScript
var vids = $("video");
$.each(vids, function(){
this.controls = false;
});
//Loop though all Video tags and set Controls as false

$("video").click(function() {
//console.log(this);
if (this.paused) {
this.play();
} else {
this.pause();
}
});

video::-webkit-media-controls {
display: none;
}

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>


<video width="800" autoplay controls="false">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</pre>

== Helfer ==
fitvids.js von Chris Coyer responsive videos für YouTube etc. (braucht man heute evtl. nicht mehr)

== Probleme beheben ==
=== Autoplay Policy ===
Oft hängen Probleme mit Sicherheitsfeatures bei den Browsern zusammen. Z.B. spielen Safari und Firefox nicht den Ton mit Autoplay ab.
https://stackoverflow.com/questions/50279454/video-autoplay-doesnt-work-without-hard-refresh

'''Klick''' oder '''mousedown events funktionieren''' - man kann bei der '''ersten Userinteraktion über mousedown das Video starten und sofort wieder pausieren'''. Danach läßt sich der Player auch mit anderen events interaktiv steuern. Evtl. funktioniert das auch wenn zuvor ein anderes Element gesteuert wurde.
==== Safari Play Button funktioniert nicht ====
==== Ton-Probleme ====
Autoplay spielt Ton in einigen Browsern nur mit Usererlaubnis (nicht default). Also entweder autoplay ohne Ton oder manuell starten.

Auch die Interaktion über einen custom event wird teilweise (z.B. Safari) als autoplay interpretiert.

=== Server liefert nicht den richtigen Mime Type ===

"httpd.conf" genügt es, diese Zeilen hinzuzufügen:
<pre>
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
</pre>

=== Safari mobile & Background Video ===
Apple ändert immer wieder die Autoplay Policy. Autoplay funktioniert Stand 2022 nur wenn
- autoplay und playsinline Attribute aktiv
- kein LowPower Mode (evtl. funktionieren Videos unter 3MB -> Testen)
- Videogröße kann eine Rolle spielen (s.o.)
- evtl. spielen noch andere Faktoren wie umgebende Divs etc. eine Rolle.
==== Workarounds ====

Videokodierung - Best Practice

2022-08-26T07:01:53Z

134.3.84.225: /* Background Video */

== Links ==
* https://app.zencoder.com/docs/guides/encoding-settings/html5
[[Video]]

== Video im Web ==
Todo aktualisieren mit webm etc.
* Beste Kompatibilität (Anfang 2017) mp4 mit mp3 und h264
* Beste Kompatibilität (2022) mp4 + webm evtl. auch nur mp4
* Ab neueren Edge Versionen auch webm Unterstützung
* ogv - fraglich ob man das noch benötigt
* YouTube / Vimeo... nicht vergessen
* mov - immer noch Standard auf Mac, wenn man mit Quicktime konvertiert. Im Prinzip (Stand Anfang 2018) auch h264)

== Datenraten ==
=== h264 ===
Was macht der Quicktime Exporter (Anfang 2018 laut Apple):
1080p: MPEG video 10 Mbit/s H.264, up to 1920 x 1080 resolution.
720p: MPEG video 7.5 Mbit/s H.264, up to 1280 x 720 resolution.
480p: MPEG video 3 Mbit/s H.264, up to 640 x 480 resolution.
Das sieht ganz ordentlich aus.
=== Background Video ===
Stark reduzieren, dann spielt es vlt. auch auf Mobilgeräten. Evtl. mit Skripten nachhelfen (siehe auch [[HTML5 - Video]])
* 720p
* bitrate under 700kb/s ( preferably 500kb/s )
* overlay drüber damit Unsauberkeiten kaschiert werden

== Vorschlag von zencoder ==
=== Overview ===
Minimum Formate:
* MP4 + H.264, with AAC or MP3. MP4 video plays natively in Safari, Chrome, and IE9 (Vista/Windows 7). It is also your best option for a Flash video fallback, and plays natively on many devices (iOS, Android, Blackberry, PSP, Xbox, PS3, etc.).
* Use H.264 '''High Profile for the best quality''', or '''Baseline profile if you want the same video to be playable on mobile devices.'''
* Beyond that, use either WebM + VP8 or Ogg + Theora with Vorbis audio for other browsers.

Recommendation: Minimally, MP4 + either WebM or Ogg, or maybe both.

=== Mobile Devices ===
1. Most modern mobile devices support MP4/H.264. This includes the whole iOS series (iPhone, iPod, iPad, Apple TV, etc.), most Android devices, modern Blackberry phones, etc. For most of these, be sure to use the H.264 Baseline profile. Use 640x480 or smaller for iOS and Android, and 480x360 or smaller for Blackberry support.

Note that the same file that plays on an iPhone can play on the web, via HTML5 (some browsers) or Flash. So if you want to reduce versions, use the same one. But you're stuck with Baseline profile for most mobile devices, and Main/High makes a big difference, so using separate output versions is a good idea if you want the best quality for each device.

2. Use 3GP/MPEG4 for older mobile devices. Most Blackberrys and some Androids also support 3GP, and 3GP generally even plays on iPhone/iPod too (since iOS plays MP4/MPEG-4 and 3GP is just a subset of MP4).

Recommendation: Minimally, MP4, 640x480 or 480x360. Maximally, three MP4 versions (480x360, 640x480, 720p + Main profile) plus one or two 3GP versions (320x240 and maybe 176x144). See our earlier post for specific encoding settings.

====1. Get it working ====

HTML5, Flash, Mobile: MP4/H.264, Baseline profile, 480x360 or 640x480
HTML5: WebM or Ogg
<pre>
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"size": "640x480"
},
{
"url": "s3://output-bucket/output-file-name.webm",
"size": "640x480"
}
]
}
</pre>
====2. Round it out====

* HTML5, Flash: MP4/H.264, High profile
* HTML5: WebM
* HTML5: Ogg
* Mobile: MP4/H.264, Baseline profile, 480x360 or 640x480
<pre>
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"h264_profile": "high"
},
{
"url": "s3://output-bucket/output-file-name.webm"
},
{
"url": "s3://output-bucket/output-file-name.ogg"
},
{
"url": "s3://output-bucket/output-file-name-mobile.mp4",
"size": "640x480"
}
]
}
JSONXML
</pre>
====3. Support everything====

* HTML5, Flash: MP4/H.264, High profile
* HTML5: WebM
* HTML5: Ogg
* Mobile: MP4/H.264, Baseline profile, 480x360, for wide compatibility
* Mobile: MP4/H.264, Main profile, 1280x720, for newer iOS devices (iPhone 4, iPad, Apple TV)
* Mobile: 3GP/MPEG4, 320x240 and/or 177x144, for non-smartphones*