Tutorial: Styling the TinyMCE editor - Revision history

Draginraptor: Added to Community Tutorials category

2021-07-31T17:20:55Z

Added to Community Tutorials category

Draginraptor: Added a gallery to show the before and after of using a skin

2021-07-26T20:20:29Z

Added a gallery to show the before and after of using a skin

Draginraptor: /* Applying the skin */

2021-07-26T17:14:56Z

Applying the skin

Draginraptor: First version of the tutorial completed

2021-07-26T17:14:10Z

First version of the tutorial completed

Draginraptor at 12:59, 26 July 2021

2021-07-26T12:59:38Z

Draginraptor: Created page with "'''Currently a WIP''' This tutorial will guide the reader in styling their TinyMCE editor (the rich text WYSIWYG editor used in Lorekeeper) by applying a skin made with [http..."

2021-07-26T07:24:25Z

Created page with "'''Currently a WIP''' This tutorial will guide the reader in styling their TinyMCE editor (the rich text WYSIWYG editor used in Lorekeeper) by applying a skin made with [http..."

New page

'''Currently a WIP'''

This tutorial will guide the reader in styling their TinyMCE editor (the rich text WYSIWYG editor used in Lorekeeper) by applying a skin made with [http://skin.tiny.cloud/t5/ Tiny's skin editor tool].
This is more focused on the technical aspects of using a completed skin and will not be covering the details of the skin editor itself.

[[File:Default TinyMCE Skin.png|alt=Image of the default skin on [http://skin.tiny.cloud/t5/ Tiny's skin editor tool]|thumb|Default skin seen on Tiny's skin editor tool]]

← Older revision		Revision as of 17:20, 31 July 2021
Line 57:		Line 57:
	* [https://www.tiny.cloud/blog/ Tiny's Blog] - many posts on customising the Tiny editor if you're keen on doing so		* [https://www.tiny.cloud/blog/ Tiny's Blog] - many posts on customising the Tiny editor if you're keen on doing so
	* [https://www.tiny.cloud/docs/ TinyMCE Documentation] - more technical documents on the Tiny editor		* [https://www.tiny.cloud/docs/ TinyMCE Documentation] - more technical documents on the Tiny editor
		+
		+	[[Category:Community Tutorials]]

@@ Line 46: / Line 46: @@
 * resources/views/character/_image_js.blade.php (2 instances)
 Alternatively, you can use something like Visual Studio Code to search all the files for 'tinymce.init'.
 == See Also ==

@@ Line 39: / Line 39: @@
 Refer to the image below for how one of the tinymce.init() calls has been configured to use the newly added BLUE skin.
 <gallery widths="1000px" heights="330px">
-File:TinyMCE Init Config.png|alt=Image of an example configuring TinyMCE to use a custom skin|thumb|Note the commas indicated by the arrows, these may have to added accordingly to avoid syntax errors
+File:TinyMCE Init Config.png|alt=Image of an example configuring TinyMCE to use a custom skin|thumb|Note the commas indicated by the arrows, these may have to be added accordingly to avoid syntax errors
 </gallery>
 You will want to add these changes to every tinymce.init() call in the project. As of 27 Jul 2021, there are tinymce.init() instances in the following files:
@@ Line 46: / Line 46: @@
 * resources/views/character/_image_js.blade.php (2 instances)
 Alternatively, you can use something like Visual Studio Code to search all the files for 'tinymce.init'.
 == See Also ==
 * [http://skin.tiny.cloud/t5/ TinyMCE Skin Tool] - the tool referenced in this tutorial
 * [https://www.tiny.cloud/blog/ Tiny's Blog] - many posts on customising the Tiny editor if you're keen on doing so
 * [https://www.tiny.cloud/docs/ TinyMCE Documentation] - more technical documents on the Tiny editor

@@ Line 1: / Line 1: @@
-'''Currently a WIP'''
+This step-by-step tutorial will guide the reader in styling their TinyMCE editor (the rich text WYSIWYG editor used in Lorekeeper) by applying a skin made with [http://skin.tiny.cloud/t5/ Tiny's skin tool].
-This tutorial will guide the reader in styling their TinyMCE editor (the rich text WYSIWYG editor used in Lorekeeper) by applying a skin made with [http://skin.tiny.cloud/t5/ Tiny's skin editor tool].
+This is more focused on the technical aspects of creating and using a skin and will not be covering the details of the skin editor itself or offering any design advice.
-[[File:Default TinyMCE Skin.png|alt=Image of the default skin as seen on Tiny's skin editor tool|thumb|Default skin seen on [http://skin.tiny.cloud/t5/ Tiny's skin editor tool]]]
+'''NOTE:''' If you are using the Theme Manager extension, the TinyMCE skin will always be the same for everyone. There is probably a way to make the Theme Manager work with styling the editors as well, but that is not covered in this tutorial.
-[[File:Tutorial TinyMCE Skin.png|alt=Image of a custom skin that will be used in this tutorial as seen on Tiny's skin editor tool|thumb|A custom skin that will be used in this tutorial as seen on [http://skin.tiny.cloud/t5/ Tiny's skin editor tool]]]

← Older revision		Revision as of 12:59, 26 July 2021
Line 4:		Line 4:
	This is more focused on the technical aspects of using a completed skin and will not be covering the details of the skin editor itself.		This is more focused on the technical aspects of using a completed skin and will not be covering the details of the skin editor itself.

−	[[File:Default TinyMCE Skin.png\|alt=Image of the default skin on [http://skin.tiny.cloud/t5/ Tiny's skin editor tool]\|thumb\|~~Default~~ skin seen on Tiny's skin editor tool]]	+	[[File:Default TinyMCE Skin.png\|alt=Image of the default skin as seen on Tiny's skin editor tool\|thumb\|Default skin seen on [http://skin.tiny.cloud/t5/ Tiny's skin editor tool]]]
		+	[[File:Tutorial TinyMCE Skin.png\|alt=Image of a custom skin that will be used in this tutorial as seen on Tiny's skin editor tool\|thumb\|A custom skin that will be used in this tutorial as seen on [http://skin.tiny.cloud/t5/ Tiny's skin editor tool]]]