docs: covert to markdown with MyST parser

browniebroke · Sep 21, 2020 · 81fa41e · 81fa41e
1 parent 9f9e4be
commit 81fa41e
Show file tree

Hide file tree

Showing 14 changed files with 294 additions and 417 deletions.
diff --git a/docs/advanced.md b/docs/advanced.md
@@ -0,0 +1,47 @@
+# Advanced Usage
+
+(custom-css)=
+## Applying custom CSS
+
+The [content_style](https://www.tinymce.com/docs/configure/content-appearance/#content_style) and [content_css](https://www.tinymce.com/docs/configure/content-appearance/#content_css) TinyMCE configuration options allow to define custom Cascading Style Sheets for the content in TinyMCE editor window.
+
+The `contents_style` option defines inline styles and the `content_css` option defines a URL or a list of URLs for CSS files. For large Style Sheets the latter option is preferable because a browser can cache CSS files.
+
+For example, if your website uses [Bootstrap](http://getbootstrap.com/) styles, you can apply those styles to edited content in the TinyMCE widget:
+
+```python
+TINYMCE_DEFAULT_CONFIG = {
+    ...
+    'content_css': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
+    ...
+}
+```
+
+## Code Samples
+
+TinyMCE v4.3 and later includes [codesample](https://www.tinymce.com/docs/plugins/codesample/) plugin that allows to insert the samples of programming code into edited content with pretty syntax highlighting. The `codesample` plugin uses [Prism](http://prismjs.com/) library for syntax highlighting (default theme). The plugin supports the following languages: **HTML/XML**, **JavaScript**, **CSS**, **PHP**, **Ruby**, **Python**, **Java**, **C#** and **C**/**C++**.
+
+The `codesample` plugin already includes the necessary Prism components to correctly display code samples in TinyMCE, but to make code samples correctly appear on webpages authored with TinyMCE you need to include the links to Prism JavaScript/CSS files into the HTML code of your pages. The **tinymce4-widget** application already includes {file}`prism.js` and {file}`prism.css` files that can be referenced in your Django templates. For example:
+
+```django
+{% load static from staticfiles %}
+<!DOCTYPE html>
+<html>
+<head>
+  ...
+<!-- Prism CSS -->
+<link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
+</head>
+<body>
+...
+<!-- Prism JS -->
+<script src="{% static "tinymce/js/prism.js" %}"></script>
+</body>
+</html>
+```
+
+You can use different Prism themes for your webpages but in TinyMCE the content is always displayed with the default Prism theme.
+
+## The Preview Button
+
+The [preview](https://www.tinymce.com/docs/plugins/preview/) plugin in TinyMCE 4, unlike in TinyMCE 3, does not support custom preview dialogs. Use {ref}`custom Style Sheets<custom-css>` as described in the first subsection on this page. They work for the preview window too.
diff --git a/docs/advanced.rst b/docs/advanced.rst
diff --git a/docs/conf.py b/docs/conf.py
@@ -7,6 +7,7 @@
 import tinymce  # noqa E402 isort:skip
 
 extensions = [
+    "myst_parser",
     "sphinx.ext.autodoc",
     "sphinx.ext.intersphinx",
     "sphinx.ext.viewcode",
@@ -17,7 +18,7 @@
 
 templates_path = ["_templates"]
 
-source_suffix = ".rst"
+source_suffix = ".md"
 
 master_doc = "index"
 
@@ -36,18 +37,7 @@
 
 todo_include_todos = False
 
-html_theme = "alabaster"
-
-html_theme_options = {
-    "github_button": True,
-    "github_type": "star&v=2",
-    "github_user": "romanvm",
-    "github_repo": "django-tinymce4-lite",
-    "github_banner": True,
-    "travis_button": True,
-    "codecov_button": True,
-    "description": "TinyMCE 4 editor for Django",
-}
+html_theme = "sphinx_rtd_theme"
 
 html_sidebars = {"**": ["about.html", "navigation.html", "searchbox.html",]}
 

diff --git a/docs/configuration.md b/docs/configuration.md
@@ -0,0 +1,75 @@
+# Configuration
+
+## Application Configuration
+
+The following options can be defined for **tinymce4-widget** in your Django project's {file}`settings.py` file.
+
+(TINYMCE_DEFAULT_CONFIG)=
+`TINYMCE_DEFAULT_CONFIG` -- TinyMCE 4 widget configuration. **tinymce4-widget** provides a reasonable default configuration with essential editing capabilities, so you need to use this option only if you want to create your own custom TinyMCE configuration.
+
+```{note}
+In **tinymce4-widget** the TinyMCE configuration is defined as a Python {class}`dict`. The {class}`dict` configuration is then translated to JSON configuration according to {class}`json.JSONEncoder` rules.
+```
+
+Default configuration:
+
+```python 
+DEFAULT = {
+    'selector': 'textarea',
+    'theme': 'modern',
+    'plugins': 'link image preview codesample contextmenu table code',
+    'toolbar1': 'bold italic underline | alignleft aligncenter alignright alignjustify '
+               '| bullist numlist | outdent indent | table | link image | codesample | preview code',
+    'contextmenu': 'formats | link image',
+    'menubar': False,
+    'inline': False,
+    'statusbar': True,
+    'height': 360,
+}
+```
+
+`TINYMCE_SPELLCHECKER` -- enables spellchecker function for TinyMCE. For the default configuration it also adds a spellcheck button to TinyMCE toolbar. Default: `False`.
+
+```{note}
+If you are using a custom TinyMCE configuration, don't forget to add [spellchecker](https://www.tinymce.com/docs/plugins/spellchecker/) plugin to your configuration, and add the necessary menu item/toolbar button. Also read [Language Configuration](#language-configuration) subsection about how to configure the spellchecker.
+```
+
+`TINYMCE_FILEBROWSER` -- enables file browser support in TinyMCE image and link dialogs. **tinymce4-widget** supports both [django-filebrowser](https://github.com/sehmaschine/django-filebrowser) and [django-filebrowser-no-grappelli](https://github.com/smacker/django-filebrowser-no-grappelli) file browsers. Default: `True` if `'filebrowser'` is added to [INSTALLED_APPS](https://docs.djangoproject.com/en/stable/ref/settings/#installed-apps), else `False`.
+
+`TINYMCE_JS_URL` -- a path to TinyMCE JavaScript library. Default: {file}`{your_static_url}/tinymce/js/tinymce/tinymce.min.js`. The following example shows how to load the TinyMCE library from a CDN:
+
+    TINYMCE_JS_URL = '//cdn.tinymce.com/4/tinymce.min.js'
+
+`TINYMCE_ADDITIONAL_JS_URLS` -- a {class}`list` of URLs for additional JavaScript files to be used with the TinyMCE widget, for example, custom TinyMCE plugins. Default: None.
+
+`TINYMCE_CSS_URL` -- a path to a CSS file with additional styles for TinyMCE. Unlike content_style and content_css TinyMCE settings (see {ref}`Applying custom CSS<custom-css>`), this CSS is applied to the TinyMCE widget itself, for example to correct the widget position on a page. The default CSS here is rendered from a template and used to correct TinyMCE widget position in Django Admin interface.
+
+`TINYMCE_CALLBACKS` -- allows to define custom TinyMCE callbacks, for example `file_browser_callback` or `spellchecker_callback`. This is a Python {class}`dict` where keys are the names of callbacks and values are JavaScript objects as Python strings. Default: `{}` (an empty {class}`dict`). Read [TinyMCE documentation](https://www.tinymce.com/docs/) to learn about available callbacks.
+
+```{note}
+Custom `file_browser_callback` and `spellchecker_callback` options defined in `TINYMCE_CALLBACKS` override **tinymce4-widget** built-in callbacks.
+```
+
+(language_config)=
+
+## Language Configuration
+
+By default **tinymce4-widget** uses [LANGUAGE_CODE](https://docs.djangoproject.com/en/stable/ref/settings/#language-code) and [LANGUAGES](https://docs.djangoproject.com/en/stable/ref/settings/#languages) Django options to automatically set up TinyMCE interface language and available spellchecker dictionaries. That is why it is recommended to define both options in your project's {file}`settings.py`.
+
+`LANGUAGE_CODE` option defines TinyMCE interface language and writing directionality.
+
+`LANGUAGES` option defines the list of available spellchecker languages. The first language in this list is used as the default one. The list of spellchecker languages also depends on available **pyenchant** dictionaries. For example, on Windows the default **pyenchant** installation includes only English, German and French spellchecker dictionaries. Read [pyenchant documentation](http://pythonhosted.org/pyenchant/tutorial.html#adding-language-dictionaries) to learn how to add additional spellchecker dictionaries.
+
+You can view the list available spellchecker dictionaries by running `enchant.list_languages()` function in a console from your working Python environment. For example:
+
+    >>> import enchant
+    >>> enchant.list_languages()
+    ['de_DE', 'en_AU', 'en_GB', 'en_US', 'fr_FR']
+
+Additional spellchecker dictionaries can be downloaded from [this page](http://www.softmaker.com/en/download/dictionaries). Unpack a {file}`.sox` file using an archive manager, for example [7zip](http://www.7-zip.org/), and copy {file}`.dic` and {file}`.aff` for your language into **pyenchant**/**enchant** installation.
+
+```{note}
+Django language codes in `LANGUAGES` must match dictionary filenames. For example, `'en-us'` in `LANGUAGES` (with a country code) corresponds to {file}`en_US.dic`/{file}`en_US.aff` dictionary files, and `'uk'` (no country code) corresponds to {file}`uk.dic`/{file}`uk.aff` dictionary files.
+```
+
+Also you can completely override TinyMCE automatic language configuration by defining the necessary language options in {ref}`TINYMCE_DEFAULT_CONFIG <TINYMCE_DEFAULT_CONFIG>`.
diff --git a/docs/configuration.rst b/docs/configuration.rst
diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,34 @@
+# Welcome to django-tinymce4-widget documentation!
+
+**django-tinymce4-widget** is a reworked fork of [django-tinymce4-lite](https://github.com/romanvm/django-tinymce4-lite). It provides a [TinyMCE 4](https://www.tinymce.com/) editor widget that can be used in Django forms and models.
+
+The main difference with the original fork is that it **does not** include any static files, it's using the TinyMCE from the CDN by default.
+
+**django-tinymce4-widget** can use [django-filebrowser](https://github.com/sehmaschine/django-filebrowser) or [django-filebrowser-no-grappelli](https://github.com/smacker/django-filebrowser-no-grappelli) as a file manager for TinyMCE 4 to insert images and file links into edited text. In addition to that, the application includes a
+spellchecker service for TinyMCE 4 spellchecker plugin.
+
+## Compatibility
+
+-   **Python**: 3.5-3.7
+-   **Django**: 1.11-2.1
+
+## License
+
+[MIT license](https://en.wikipedia.org/wiki/MIT_License).
+
+## Naming Conventions
+
+In this documentation **django-tinymce4-widget** or **tinymce4-widget** (all lowercase) refers to this Python/Django application, and **TinyMCE 4** or **TinyMCE** (CamelCase) refers to a JavaScript [TinyMCE](https://www.tinymce.com/) editor widget. If a version number is omitted, TinyMCE v.4.x.x is assumed.
+
+## Contents:
+
+```{toctree}
+:caption: Installation & Usage
+:maxdepth: 2
+
+installation
+configuration
+usage
+advanced
+test
+```