Skip to content

Example output (generated by example.py)

HTML

<h2>
   draftjs_exporter is an HTML exporter for
   <a href="https://github.com/facebook/draft-js">
    Draft.js
   </a>
   content
  </h2>
  <blockquote cite="http://example.com/">
   Try it out by running this file!
  </blockquote>
  <h3 class="u-text-center">
   Features 📝🍸
  </h3>
  <p>
   The exporter aims to provide sensible defaults from basic block types and inline styles to HTML, that can easily be customized when required. For more advanced scenarios, an API is provided (mimicking React's
   <a href="https://facebook.github.io/react/docs/top-level-api.html#react.createelement">
    <code>
     createElement
    </code>
   </a>
   ) to create custom rendering components of arbitrary complexity.
  </p>
  <hr/>
  <p>
   Here are some features worth highlighting:
  </p>
  <ul class="bullet-list">
   <li>
    Convert line breaks to
    <code>
     &lt;br&gt;
    </code>
    <br/>
    elements.
   </li>
   <li>
    Automatic conversion of entity data to HTML attributes (int &amp; boolean to string,
    <a href="https://facebook.github.io/react/docs/jsx-in-depth.html">
     <code>
      style object
     </code>
     to
     <code>
      style string
     </code>
    </a>
    ).
   </li>
   <li>
    Wrapped blocks (
    <code>
     &lt;li&gt;
    </code>
    elements go inside
    <code>
     &lt;ul&gt;
    </code>
    or
    <code>
     &lt;ol&gt;
    </code>
    ).
    <ul class="bullet-list">
     <li>
      With arbitrary nesting.
      <ul class="bullet-list">
       <li>
        Common text styles:
        <strong>
         Bold
        </strong>
        ,
        <em>
         Italic
        </em>
        ,
        <u>
         Underline
        </u>
        ,
        <code>
         Monospace
        </code>
        ,
        <s>
         Strikethrough.
        </s>
        <kbd>
         cmd + b
        </kbd>
       </li>
       <li>
        <s>
         Overlapping
        </s>
        <strong>
         <s>
          te
         </s>
         <em>
          xt
         </em>
        </strong>
        <em>
         styles.
        </em>
        <strong style="text-decoration: underline;">
         Custom styles
        </strong>
        too!
        <ul class="bullet-list">
         <li>
          <span class="hashtag">
           #hashtag
          </span>
          support via
          <a href="https://github.com/wagtail/draftjs_exporter/pull/17">
           #CompositeDecorators
          </a>
          .
          <ul class="bullet-list">
           <li>
            Linkify URLs too!
            <a href="http://example.com/">
             http://example.com/
            </a>
           </li>
          </ul>
         </li>
        </ul>
       </li>
       <li>
        Depth can go back and forth, it works fiiine (1)
       </li>
      </ul>
     </li>
     <li>
      Depth can go back and forth, it works fiiine (2)
      <ul class="bullet-list">
       <li>
        Depth can go back and forth, it works fiiine (3)
       </li>
      </ul>
     </li>
     <li>
      Depth can go back and forth, it works fiiine (4)
     </li>
    </ul>
   </li>
   <li>
    Depth can go back and forth, it works fiiine (5)
   </li>
  </ul>
  <img alt="Test image alt text" height="200" src="https://placekitten.com/g/300/200" width="300"/>
  <h3 class="u-text-center">
   For developers 🚀
  </h3>
  <ol class="list--depth-0">
   <li class="list-item--depth-0">
    Import the library
   </li>
   <li class="list-item--depth-0">
    Define your configuration
   </li>
   <li class="list-item--depth-0">
    Go!
    <ol class="list--depth-1">
     <li class="list-item--depth-1">
      Optionally, define your custom components.
     </li>
    </ol>
   </li>
  </ol>
  <pre><code>def blockquote(props):
    block_data = props['block']['data']
    return DOM.create_element('blockquote', {
        'cite': block_data.get('cite')
    }, props['children'])
</code></pre>
  Discarded block but the content stays.
  <div>
   Render as
   <span class="missing-entity">
    div
   </span>
  </div>
  <p>
   Voilà!
  </p>

Markdown

draftjs_exporter is an HTML exporter for Draft.js content

Try it out by running this file!

Features 📝🍸

The exporter aims to provide sensible defaults from basic block types and inline styles to HTML, that can easily be customized when required. For more advanced scenarios, an API is provided (mimicking React's createElement) to create custom rendering components of arbitrary complexity.

Here are some features worth highlighting:

  • Convert line breaks to <br> elements.
  • Automatic conversion of entity data to HTML attributes (int & boolean to string, style object to style string).
  • Wrapped blocks (<li> elements go inside <ul> or <ol>).
  • With arbitrary nesting.
    • Common text styles: Bold, Italic, Underline, Monospace, Strikethrough. cmd + b
    • ~Overlapping **te~**xt_ styles. _Custom styles too!

    • hashtag support via #CompositeDecorators.

    • Depth can go back and forth, it works fiiine (1)
  • Depth can go back and forth, it works fiiine (2)
    • Depth can go back and forth, it works fiiine (3)
  • Depth can go back and forth, it works fiiine (4)
  • Depth can go back and forth, it works fiiine (5)

Test image alt text

For developers 🚀

  1. Import the library
  2. Define your configuration
  3. Go!
  4. Optionally, define your custom components.
def blockquote(props):
    block_data = props['block']['data']
    return DOM.create_element('blockquote', {
        'cite': block_data.get('cite')
    }, props['children'])

Discarded block but the content stays.

Render as div
Voilà!