diff --git a/docs/advanced.md b/docs/advanced.md new file mode 100644 index 0000000..8876bf1 --- /dev/null +++ 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 %} + + + + ... + + + + +... + + + + +``` + +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` 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 deleted file mode 100644 index 06e1152..0000000 --- a/docs/advanced.rst +++ /dev/null @@ -1,73 +0,0 @@ -Advanced Usage -============== - -.. _custom-css: - -Applying custom CSS -------------------- - -The `content_style`_ and `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`_ styles, -you can apply those styles to edited content in the TinyMCE widget: - -.. code-block:: python - - TINYMCE_DEFAULT_CONFIG = { - ... - 'content_css': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', - ... - } - -.. _content_style: https://www.tinymce.com/docs/configure/content-appearance/#content_style -.. _content_css: https://www.tinymce.com/docs/configure/content-appearance/#content_css -.. _Bootstrap: http://getbootstrap.com/ - -Code Samples ------------- - -TinyMCE v.4.3 and later includes `codesample`_ plugin that allows to insert the samples of programming code -into edited content with pretty syntax highlighting. The ``codesample`` plugin uses `Prism`_ 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: - -.. code-block:: django - - {% load static from staticfiles %} - - - - ... - - - - - ... - - - - - -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`_ plugin in TinyMCE 4, unlike in TinyMCE 3, does not support custom preview dialogs. -Use :ref:`custom Style Sheets` as described in the first subsection on this page. -They work for the preview window too. - -.. _codesample: https://www.tinymce.com/docs/plugins/codesample/ -.. _Prism: http://prismjs.com/ -.. _preview: https://www.tinymce.com/docs/plugins/preview/ diff --git a/docs/conf.py b/docs/conf.py index b91e183..c644f17 100644 --- 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 new file mode 100644 index 0000000..0e49545 --- /dev/null +++ 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`), 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 `. diff --git a/docs/configuration.rst b/docs/configuration.rst deleted file mode 100644 index 2297404..0000000 --- a/docs/configuration.rst +++ /dev/null @@ -1,113 +0,0 @@ -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:: - - 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`_ plugin to - your configuration, and add the necessary menu item/toolbar button. Also read `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`_ and `django-filebrowser-no-grappelli`_ file browsers. -Default: ``True`` if ``'filebrowser'`` is added to `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`), 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`_ 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`_ and `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`_ 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`_. Unpack a :file:`.sox` file -using an archive manager, for example `7zip`_, 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 `TINYMCE_DEFAULT_CONFIG`_. - -.. _django-filebrowser: https://github.com/sehmaschine/django-filebrowser -.. _django-filebrowser-no-grappelli: https://github.com/smacker/django-filebrowser-no-grappelli -.. _TinyMCE documentation: https://www.tinymce.com/docs/ -.. _LANGUAGE_CODE: https://docs.djangoproject.com/en/stable/ref/settings/#language-code -.. _LANGUAGES: https://docs.djangoproject.com/en/stable/ref/settings/#languages -.. _pyenchant documentation: http://pythonhosted.org/pyenchant/tutorial.html#adding-language-dictionaries -.. _this page: http://www.softmaker.com/en/download/dictionaries -.. _7zip: http://www.7-zip.org/ -.. _INSTALLED_APPS: https://docs.djangoproject.com/en/stable/ref/settings/#installed-apps -.. _spellchecker: https://www.tinymce.com/docs/plugins/spellchecker/ diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..b0c2318 --- /dev/null +++ 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 +``` diff --git a/docs/index.rst b/docs/index.rst deleted file mode 100644 index 581cfe9..0000000 --- a/docs/index.rst +++ /dev/null @@ -1,55 +0,0 @@ -Welcome to django-tinymce4-widget documentation! -================================================ - -**django-tinymce4-widget** is a reworked fork of `django-tinymce4-lite`_. It provides a `TinyMCE 4`_ -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`_ or `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 `_. - - -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`_ editor widget. If a version number is omitted, TinyMCE v.4.x.x is assumed. - -.. _django-tinymce4-lite: https://github.com/romanvm/django-tinymce4-lite -.. _TinyMCE 4: https://www.tinymce.com/ -.. _django-filebrowser: https://github.com/sehmaschine/django-filebrowser -.. _django-filebrowser-no-grappelli: https://github.com/smacker/django-filebrowser-no-grappelli -.. _TinyMCE: https://www.tinymce.com/ - -Contents: ---------- - -.. toctree:: - :maxdepth: 2 - - installation - configuration - usage - advanced - test - -Indices and tables -================== - -* :ref:`genindex` -* :ref:`search` diff --git a/docs/installation.md b/docs/installation.md new file mode 100644 index 0000000..31daf07 --- /dev/null +++ b/docs/installation.md @@ -0,0 +1,38 @@ +# Installation + +Install **django-tinymce4-widget** from PyPI: + + $ pip install django-tinymce4-widget + +Add `tinymce` to `INSTALLED_APPS` in `settings.py` for your Django project: + +```python +INSTALLED_APPS = ( + ... + 'tinymce', +) +``` + +Add `tinymce.urls` to `urls.py` for your project: + +```python +urlpatterns = [ + ... + url(r'^tinymce/', include('tinymce.urls')), + ... +] +``` + +If you want to use [django-filebrowser](https://github.com/sehmaschine/django-filebrowser) or [django-filebrowser-no-grappelli](https://github.com/smacker/django-filebrowser-no-grappelli) file manager, install one of those packages. Refer to [django-filebrowser documentation](https://django-filebrowser.readthedocs.org/en/latest/) to learn how to install and configure the filebrowser application. + +For TinyMCE spellchecker plugin you need to install [pyenchant](http://pythonhosted.org/pyenchant/) package: + + $ pip install pyenchant + +On some Linux systems you may also need to install binary `enchant` libraries prior to installing `pyenchant`. For example, on Debian/Ubuntu use the following command: + + $ sudo apt-get install enchant + +Also you need to add the necessary spelling dictionaries if they are missing from `pyenchant` default installation on your system. + +Read {ref}`"Language Configuration"` subsection about configuring the **tinymce4-widget** spellchecker. diff --git a/docs/installation.rst b/docs/installation.rst deleted file mode 100644 index 76f5068..0000000 --- a/docs/installation.rst +++ /dev/null @@ -1,51 +0,0 @@ -Installation -============ - -Install **django-tinymce4-widget** from PyPI:: - - $ pip install django-tinymce4-widget - -Add ``tinymce`` to ``INSTALLED_APPS`` in ``settings.py`` for your Django project: - -.. code-block:: python - - INSTALLED_APPS = ( - ... - 'tinymce', - ) - -Add ``tinymce.urls`` to ``urls.py`` for your project: - -.. code-block:: python - - urlpatterns = [ - ... - url(r'^tinymce/', include('tinymce.urls')), - ... - ] - - -If you want to use `django-filebrowser`_ or `django-filebrowser-no-grappelli`_ file manager, -install one of those packages. Refer to `django-filebrowser documentation`_ to learn -how to install and configure the filebrowser application. - -For TinyMCE spellchecker plugin you need to install `pyenchant`_ package:: - - $ pip install pyenchant - -On some Linux systems you may also need to install binary ``enchant`` libraries -prior to installing ``pyenchant``. -For example, on Debian/Ubuntu use the following command:: - - $ sudo apt-get install enchant - -Also you need to add the necessary spelling dictionaries -if they are missing from ``pyenchant`` default installation on your system. - -Read :ref:`"Language Configuration"` subsection about configuring -the **tinymce4-widget** spellchecker. - -.. _django-filebrowser: https://github.com/sehmaschine/django-filebrowser -.. _django-filebrowser-no-grappelli: https://github.com/smacker/django-filebrowser-no-grappelli -.. _django-filebrowser documentation: https://django-filebrowser.readthedocs.org/en/latest/ -.. _pyenchant: http://pythonhosted.org/pyenchant/ diff --git a/docs/requirements.txt b/docs/requirements.txt index 4fcfd5d..16d1a56 100644 --- a/docs/requirements.txt +++ b/docs/requirements.txt @@ -1,3 +1,4 @@ Django>=1.11,<3.0 sphinx>=2 myst-parser[sphinx] +sphinx_rtd_theme diff --git a/docs/test.md b/docs/test.md new file mode 100644 index 0000000..76e0803 --- /dev/null +++ b/docs/test.md @@ -0,0 +1,31 @@ +# Test Project + +The **tinymce4-widget** sources include **test_tinymce** project that can be used to run automated tests or to try a live TinyMCE 4 editor widget. The test project can also serve as a basic example of **tinymce4-widget** usage. + +To use the test project, first you need to install the necessary dependencies: + + $ pip install -r requirements.txt + +Then you need to create the test database: + + $ python manage.py migrate + +If you want to try TinyMCE in Django Admin, create a superuser to access the Admin interface: + + $ python manage.py createsuperuser + +To run automated tests, enter in the console: + + $ python manage.py test test_tinymce + +To open TinyMCE 4 editor, run the test server: + + $ python manage.py runserver + +Then open the project's start page in your browser: . The browser will open a webpage with a TinyMCE 4 editor. + +```{note} +The commands described in this section need to be run from the **tinymce4-widget** sources root directory. +``` + +The test project is very basic and does nothing else, except for displaying the TinyMCE 4 editor. diff --git a/docs/test.rst b/docs/test.rst deleted file mode 100644 index 14ba62c..0000000 --- a/docs/test.rst +++ /dev/null @@ -1,34 +0,0 @@ -Test Project -============ - -The **tinymce4-widget** sources include **test_tinymce** project that can be used to run automated tests -or to try a live TinyMCE 4 editor widget. The test project can also serve as a basic example of -**tinymce4-widget** usage. - -To use the test project, first you need to install the necessary dependencies:: - - $ pip install -r requirements.txt - -Then you need to create the test database:: - - $ python manage.py migrate - -If you want to try TinyMCE in Django Admin, create a superuser to access the Admin interface:: - - $ python manage.py createsuperuser - -To run automated tests, enter in the console:: - - $ python manage.py test test_tinymce - -To open TinyMCE 4 editor, run the test server:: - - $ python manage.py runserver - -Then open the project's start page in your browser: http://127.0.0.1:8000. -The browser will open a webpage with a TinyMCE 4 editor. - -.. note:: The commands described in this section need to be run from the **tinymce4-widget** - sources root directory. - -The test project is very basic and does nothing else, except for displaying the TinyMCE 4 editor. diff --git a/docs/usage.md b/docs/usage.md new file mode 100644 index 0000000..12e008c --- /dev/null +++ b/docs/usage.md @@ -0,0 +1,65 @@ +# Usage + +## HTMLField for Models + +For developers who want to implement TinyMCE editor in their Django applications in the simplest possible way, **tinymce4-widget** provides a {class}`HTMLField` field for models. This field can can be used instead of a {class}`TextField`. For example: + +```python +from django.db import models +from tinymce import HTMLField + +class MyModel(models.Model): + ... + content = HTMLField('Content') +``` + +Don't forget to apply [safe](https://docs.djangoproject.com/es/1.9/ref/templates/builtins/#safe) filter to the HTML content in your templates to render it properly. For example: + +```django +{{ my_model.content|safe }} +``` + +```{warning} +If you are using TinyMCE editor in publicly facing webpages, it is strongly recommended to define [valid_elements](https://www.tinymce.com/docs/configure/content-filtering/#valid_elements) option for TinyMCE to limit the set of allowed HTML elements and/or to filter submitted content for security reasons. +``` + +In Django Admin interface the widget is used automatically for all +models that have {class}`HTMLField` fields. + +(forms-media)= +If you are using TinyMCE 4 in your website forms, you need to add +`form.media` template variable to the `` section of your +templates: + +```django + + + + ... + {{ form.media }} + + +... + + +``` + +## TinyMCE Widget for Forms + +In custom forms you can use {class}`TinyMCE` form widget to render TinyMCE editor instead of a simple {class}`CharField`: + + from django import forms + from tinymce import TinyMCE + + + class MyForm(forms.Form): + content = forms.CharField(widget=TinyMCE(mce_attrs={'width': 800})) + +The {class}`TinyMCE` class +constructor takes 3 parameters: + +- `attrs` -- general Django widget attributes. +- `mce_attrs` -- additional configuration parameters for TinyMCE 4. These parameters **amend** the existing configuration. For example, in the preceding code sample `'width'` parameter sets TinyMCE widget width to 800 pixels without changing other configuration options. +- `profile` -- TinyMCE 4 configuration parameters. They **replace** the existing configuration. That is, you need to provide a fully defined TinyMCE configuration for `profile` parameter. + +Also see the information about {ref}`form.media` template variable in the preceding subsection. diff --git a/docs/usage.rst b/docs/usage.rst deleted file mode 100644 index db4979a..0000000 --- a/docs/usage.rst +++ /dev/null @@ -1,78 +0,0 @@ -Usage -===== - -HTMLField for Models --------------------- - -For developers who want to implement TinyMCE editor in their Django applications in the simplest possible way, -**tinymce4-widget** provides a :class:`HTMLField` field for models. -This field can can be used instead of a :class:`TextField`. -For example: - -.. code-block:: python - - from django.db import models - from tinymce import HTMLField - - class MyModel(models.Model): - ... - content = HTMLField('Content') - -Don't forget to apply `safe`_ filter to the HTML content in your templates to render it properly. -For example: - -.. code-block:: django - - {{ my_model.content|safe }} - -.. warning:: If you are using TinyMCE editor in publicly facing webpages, it is strongly recommended to define - `valid_elements`_ option for TinyMCE to limit the set of allowed HTML elements and/or - to filter submitted content for security reasons. - -In Django Admin interface the widget is used automatically for all models that have -:class:`HTMLField` fields. - -.. _forms-media: - -If you are using TinyMCE 4 in your website forms, -you need to add ``form.media`` template variable to the ```` section of your templates: - -.. code-block:: django - - - - - ... - {{ form.media }} - - - ... - - - -.. _safe: https://docs.djangoproject.com/es/1.9/ref/templates/builtins/#safe -.. _valid_elements: https://www.tinymce.com/docs/configure/content-filtering/#valid_elements - -TinyMCE Widget for Forms ------------------------- - -In custom forms you can use :class:`TinyMCE` form widget to render TinyMCE editor -instead of a simple :class:`CharField`:: - - from django import forms - from tinymce import TinyMCE - - - class MyForm(forms.Form): - content = forms.CharField(widget=TinyMCE(mce_attrs={'width': 800})) - -The :class:`TinyMCE` class constructor takes 3 parameters: - -- ``attrs`` -- general Django widget attributes. -- ``mce_attrs`` -- additional configuration parameters for TinyMCE 4. - These parameters **amend** the existing configuration. For example, in the preceding code sample ``'width'`` - parameter sets TinyMCE widget width to 800 pixels without changing other configuration options. -- ``profile`` -- TinyMCE 4 configuration parameters. They **replace** the existing configuration. - That is, you need to provide a fully defined TinyMCE configuration for ``profile`` parameter. - -Also see the information about :ref:`form.media` template variable in the preceding subsection.