Angular>> draftjs_exporter_wagtaildbhtml>> 返回
项目作者： thibaudcolas

项目描述 ：
Convert the Facebook Draft.js editor’s raw ContentState to Wagtail's DB-HTML representation
高级语言： Python
项目地址: git://github.com/thibaudcolas/draftjs_exporter_wagtaildbhtml.git


draftjs_exporter_wagtaildbhtml 🐍 Build Status

Convert the Facebook Draft.js editor’s raw ContentState to Wagtail’s DB-HTML.

Output format

Wagtail’s DB-HTML content representation is an HTML-like XML syntax, with a few custom elements and attributes.

Here are examples of representations specific to this format:

  1. <!-- Bold -->
  2. <b>bold</b>
  3. <!-- Italic -->
  4. <i>Italic</i>
  5. <!-- Image -->
  6. <embed alt="Right-aligned image" embedtype="image" format="right" id="49"/>
  7. <!-- Embed -->
  8. <embed embedtype="media" url="https://www.youtube.com/watch?v=y8Kyi0WNg40"/>
  9. <!-- Document link -->
  10. <a id="1" linktype="document">document link</a>
  11. <!-- Internal page link -->
  12. <a id="42" linktype="page">internal page link</a>

Differences in format compared to Wagtail 1 processing

There are a number of differences between the DB-HTML coming from Wagtail 1’s rich text processing pipeline, and the DB-HTML produced from Draft.js ContentState by draftjs_exporter.

The reasons for those differences are:

  • Wagtail 1’s DB-HTML comes from Hallo, which doesn’t provide much control over its HTML output.
  • Working on arbitrary HTML from the editor, Wagtail’s DB-HTML pipeline doesn’t normalise ambiguous representations.
  • In contrast, draftjs_exporter operates on a more constrained format with less potential for ambiguities.
  • drafjs_exporter also further constraints its output to normalise potentially ambiguous representations.

Spacing unicode character

Hallo inserts \u00a0 after a comma in some cases (no-break space).

  1. <!-- DB-HTML from Hallo in Wagtail -->
  2. <b>bold</b>,\u00a0<i>italic</i>

Order of tags for multiple styles

  • Hallo wraps style tags in the order they are used in the editor
  • draftjs_exporter always wraps style tags in the same order (alphabetical) (style_state.py#L30)
  1. <!-- DB-HTML of Wagtail with Hallo -->
  2. <i><b>italic bold</b></i>
  3. <!-- DB-HTML of draftjs_exporter with Draftail, regardless of activation order -->
  4. <b><i>italic bold</i></b>

Wrapping in p tags

  • Hallo frequently wraps content within p tags.
  • draftjs_exporter only outputs p tags for individual blocks of type UNSTYLED (the editor’s default format).
  1. <!-- DB-HTML of Wagtail with Hallo -->
  2. <p>
  3.     <ul><li>Unordered list item 1</li></ul>
  4.     <p>Horizontal rule:</p>
  5. </p>
  6. <!-- DB-HTML of draftjs_exporter with Draftail -->
  7. <ul><li>Unordered list item 1</li></ul>
  8. <p>Horizontal rule:</p>
  10. <!-- DB-HTML of Wagtail with Hallo -->
  11. <p>
  12.     <hr/>
  13.     <embed embedtype="media" url="https://www.youtube.com/watch?v=y8Kyi0WNg40"/>
  14. </p>
  15. <!-- DB-HTML of draftjs_exporter with Draftail -->
  16. <hr/>
  17. <embed embedtype="media" url="https://www.youtube.com/watch?v=y8Kyi0WNg40"/>

Line breaks

  • Hallo’s behavior has yet to be defined.
  • Draftail always inserts empty blocks for empty lines, and line breaks when using the “soft line break” control / keyboard shortcut.
  1. <!-- DB-HTML of Wagtail with Hallo -->
  2. <ol><li>Ordered list item 1<br/></li></ol>
  3. <!-- DB-HTML of draftjs_exporter with Draftail -->
  4. <ol><li>Ordered list item 1</li></ol>
  6. <!-- DB-HTML of Wagtail with Hallo -->
  7. <p><br/></p>
  8. <!-- DB-HTML of draftjs_exporter with Draftail -->
  9. <p></p>
  11. <!-- DB-HTML of Wagtail with Hallo -->
  12. <p>
  13.     <embed alt="Full width image" embedtype="image" format="fullwidth" id="1"/>
  14.     <br/>
  15. </p>
  16. <!-- DB-HTML of draftjs_exporter with Draftail -->
  17. <embed alt="Full-width image" embedtype="image" format="fullwidth" id="1"/>
  18. <p></p>

To test further

Overlapping style ranges

Installation

Requirements: virtualenv, pyenv, twine

  1. git clone git@github.com:thibaudcolas/draftjs_exporter_wagtaildbhtml.git
  2. cd draftjs_exporter_wagtaildbhtml/
  3. # Install the git hooks.
  4. ./.githooks/deploy
  5. # Install the Python environment.
  6. virtualenv .venv
  7. source ./.venv/bin/activate
  8. make init
  9. # Install required Python versions
  10. pyenv install --skip-existing 2.7.11
  11. pyenv install --skip-existing 3.4.4
  12. pyenv install --skip-existing 3.5.1
  13. # Make required Python versions available globally.
  14. pyenv global system 2.7.11 3.4.4 3.5.1

Commands

  1. make help            # See what commands are available.
  2. make init            # Install dependencies and initialise for development.
  3. make lint            # Lint the project.
  4. make test            # Test the project.
  5. make test-watch      # Restarts the tests whenever a file changes.
  6. make test-coverage   # Run the tests while generating test coverage data.
  7. make test-ci         # Continuous integration test suite.
  8. make dev             # Restarts the example whenever a file changes.
  9. make clean-pyc       # Remove Python file artifacts.
  10. make publish         # Publishes a new version to pypi.

Debugging

  • Always run the tests. npm install -g nodemon, then make test-watch.
  • Use a debugger. pip install ipdb, then import ipdb; ipdb.set_trace().