You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For our Contributor Code of Conduct, visit our https://github.com/tinymce/tinymce-docs-4x/blob/develop/CODE_OF_CONDUCT.md#contributor-covenant-code-of-conduct[Contributor Covenant Code of Conduct on GitHub].
We welcome people with technical writing experience to help make TinyMCE's docs as useful to our community as possible. Although you don't need to be an expert developer to contribute, a basic understanding of software development is helpful.
16
20
17
21
What is more important is your ability to articulate complex ideas. Our goal is to help developers understand TinyMCE's functionality as quickly as possible.
18
22
19
23
Simply branch the https://github.com/tinymce/tinymce-docs-4x[docs GitHub repository] and submit a PR, or reach out to the https://github.com/tinymce/tinymce-docs-4x/issues/new?assignees=&labels=question&template=question.md[TinyMCE docs team] if you have a specific question.
The documentation is built with Jekyll. Text files are written in https://kramdown.gettalong.org/[kramdown] and published on https://github.com/tinymce/tinymce-docs-4x[GitHub]. You will find the https://github.com/tinymce/tinymce-docs-4x[repo here].
24
30
25
-
== Markdown & code syntax
31
+
[[markdown--code-syntax]]
32
+
== Markdown & code syntax
33
+
anchor:markdowncodesyntax[historical anchor]
26
34
27
35
The documentation is written in https://kramdown.gettalong.org/[kramdown Flavored Markdown]. If you are not familiar with kramdown https://kramdown.gettalong.org/quickref.html[read this].
28
36
37
+
[[highlighting]]
29
38
=== Highlighting
30
39
31
40
Code language syntax and associated elements are highlighted using an open and closing backtick. For example, this `object` is actually enclosed with backticks like this: `object`.
32
41
33
42
Highlight words relating specifically to executable parts of software languages. Keys and their values when pertaining to objects and methods (particularly the case with TinyMCE) should have backticks. We cannot cover every use case here and contributors need to use their best judgment. What is more important is your ability to articulate complex ideas.
34
43
35
-
=== Code snippets
44
+
[[code-snippets]]
45
+
=== Code snippets
46
+
anchor:codesnippets[historical anchor]
36
47
37
48
Code snippets should always be complete, executable code blocks starting with the `tinymce` object. We write code snippets by enclosing the example code within three opening and closing backticks. The first set of backticks is immediately followed by the code's language, which helps correct syntax highlighting: typically, html, css, js (and sometimes php).
38
49
@@ -59,14 +70,17 @@ tinymce.init({
59
70
});
60
71
----
61
72
62
-
=== URLs and links
73
+
[[urls-and-links]]
74
+
=== URLs and links
75
+
anchor:urlsandlinks[historical anchor]
63
76
64
77
Resources to be linked take the form of placing the linked text between brackets and the URL between parenthesis. Linking an external resource looks like this:
65
78
66
79
----
67
80
hello, [text to link](http://www.example.com) to the URL example.com.
68
81
----
69
82
83
+
[[codepens]]
70
84
=== Codepens
71
85
72
86
Codepens can be added to content using the "codepen.html" include, such as:
@@ -79,7 +93,9 @@ There are several options for this include file - please see `_includes/codepen.
79
93
80
94
The source for each CodePen is store in the `_includes/codepens/` directory.
81
95
82
-
=== Adding metadata to a page
96
+
[[adding-metadata-to-a-page]]
97
+
=== Adding metadata to a page
98
+
anchor:addingmetadatatoapage[historical anchor]
83
99
84
100
Every page should have a meta section starting at line 1 containing information that is both informative and system critical. If you are creating a page or editing one that currently has inadequate meta information, please read the comments next to the default meta fields below.
85
101
@@ -94,42 +110,59 @@ keywords: // Space-separated list of keywords in the content.
94
110
---
95
111
----
96
112
97
-
== Style Guide
113
+
[[style-guide]]
114
+
== Style Guide
115
+
anchor:styleguide[historical anchor]
98
116
99
-
=== TinyMCE v. tinymce
117
+
[[tinymce-v-tinymce]]
118
+
=== TinyMCE v. tinymce
119
+
anchor:tinymcevtinymce[historical anchor]
100
120
101
121
Use the capitalized version of TinyMCE when referring to the open source project or the editor. Use lowercase when referring to the `tinymce` JavaScript object.
102
122
103
-
=== Title capitalization
123
+
[[title-capitalization]]
124
+
=== Title capitalization
125
+
anchor:titlecapitalization[historical anchor]
104
126
105
127
For titles use "Sentence case capitalization". Sentence case capitalization is more comfortable to read in technical documentation.
106
128
129
+
[[spelling]]
107
130
=== Spelling
108
131
109
132
Use United States English. For example, behavior rather than behaviour, and canceled rather than cancelled.
110
133
111
-
=== Proper names
134
+
[[proper-names]]
135
+
=== Proper names
136
+
anchor:propernames[historical anchor]
112
137
113
138
When referring to the name of a development language we use the proper name or, where appropriate, the industry convention. For example, HTML, CSS, JavaScript, jQuery, React, AngularJS (not HTML, css, Jquery or React-js.)
114
139
115
140
The exception to this rule is when we are talking about the code itself (see the note above about TinyMCE v. tinymce). For example, write "HTML is great" when talking about the HTML language, but write, "escape your ``html``" when talking about action with or within a codebase.
Write in a https://www.grammarly.com/blog/first-second-and-third-person/[third person perspective], such as: _He_, _she_, _they_, or _them_.
132
163
133
-
=== Keep it simple
164
+
[[keep-it-simple]]
165
+
=== Keep it simple
166
+
anchor:keepitsimple[historical anchor]
134
167
135
168
Use short, simple words where possible. Use formal language, do not use: slang, acronyms, initialisms, abbreviations, and https://docs.microsoft.com/en-us/style-guide/word-choice/use-contractions[ambiguous contractions (such as _there'd_, or _it'll_)].
* https://github.com/tinymce/tinymce-docs-4x/blob/develop/CONTRIBUTING.md#contributing-to-the-tinymce-developer-documentation[GitHub - Contributing to the TinyMCE developer documentation].
The following procedure assists with building (or compiling) the documentation locally. Tiny recommends testing and reviewing changes locally prior to submitting a pull request.
28
34
29
-
==== Installing Prerequisites
35
+
[[installing-prerequisites]]
36
+
==== Installing Prerequisites
37
+
anchor:installingprerequisites[historical anchor]
30
38
31
-
===== Linux users
39
+
[[linux-users]]
40
+
===== Linux users
41
+
anchor:linuxusers[historical anchor]
32
42
33
43
You need the following programs installed on your computer:
To create a development version of the documentation, run:
103
121
@@ -111,24 +129,31 @@ To view the documentation; in a web browser, navigate to http://localhost:4000/[
111
129
112
130
NOTE: The development version of the documentation will update automatically when you save changes locally.
113
131
114
-
==== TinyMCE API documentation
132
+
[[tinymce-api-documentation]]
133
+
==== TinyMCE API documentation
134
+
anchor:tinymceapidocumentation[historical anchor]
115
135
116
136
The TinyMCE API documentation is maintained within the https://github.com/tinymce/tinymce[TinyMCE project repository] and compiled for the documentation site using https://github.com/tinymce/moxiedoc[MoxieDoc].
117
137
138
+
[[prerequisites]]
118
139
===== Prerequisites
119
140
120
141
* https://nodejs.org/en/[NodeJS].
121
142
* The TinyMCE documentation repository set up for development as described in <<installing-prerequisites,Installing Prerequisites>> and <<first-time-set-up,First time set up>>.
As of version 4.0.17 of TinyMCE, we now follow the WAI-ARIA specification, making it compatible with screen readers such as JAWS and NVDA. At the time of writing, we would *highly* recommend the use of http://www.nvaccess.org/[NVDA] together with https://www.mozilla.org/en-US/firefox/products/[Firefox] for the best Accessibility experience with TinyMCE.
12
12
13
-
== Keyboard shortcuts
13
+
[[keyboard-shortcuts]]
14
+
== Keyboard shortcuts
15
+
anchor:keyboardshortcuts[historical anchor]
14
16
15
17
The `ALT+key` shortcut assumes that you are currently in the content area of the editor.
16
18
@@ -33,7 +35,9 @@ The `ALT+key` shortcut assumes that you are currently in the content area of the
33
35
| Navigate left/right through menu/toolbar
34
36
|===
35
37
36
-
== How to work with the editor
38
+
[[how-to-work-with-the-editor]]
39
+
== How to work with the editor
40
+
anchor:howtoworkwiththeeditor[historical anchor]
37
41
38
42
When you navigate into an editor instance, you will land in the content area. Arrowing up and down will give you paragraphs, headings and other items such as links. Note that NVDA and Firefox treat links as embedded characters, you have actually to navigate into them to read their texts, but they are accessible.
39
43
@@ -45,6 +49,7 @@ From either the menus or toolbars, you can open dialogs such as Insert/Edit or I
45
49
46
50
On the toolbars and in the formatting menu, you can insert emoticons or change the text and background colors. These are panels you open by pressing DownArrow or Enter on their respective menu/toolbar items and then use the arrow keys to select the actual item you want to be applied/inserted. All of these items are also made to talk, so a blind person can change the text color as well and know what they're doing.
47
51
52
+
[[credits]]
48
53
== Credits
49
54
50
55
Most of this text was written by Marco, who is working as an Accessibility QA Engineer and Evangelist at Mozilla. We would like to extend our thanks for the help with the WAI-ARIA implementation, could not have done it without him. http://www.marcozehe.de/[Visit Marco's excellent blog!]
0 commit comments