WriteFree

" Write Freely "

WriteFree is a simple and clutter-free embeddable rich text editor. Drawing its design from Medium's beautiful editor, WriteFree allows you to offer users a beautiful and immersive writing experience in any environment or setting.

WriteFree features all that's needed to create a masterpiece and nothing more. The idea is to get out of the writer's way and let them focus on what they're working on while still being there for them to add basic styles and insertable elements as necessary.

Editing

Users will find all the editing tools they need and none that they don't. Highlighting a selection of text brings up the Edit Toolbar. This toolbar allows users to bold and italicize text, turn their selection into two varieties of headings (via <h1> and <h2> elements), and wrap selections of text in a hyperlink.

Insertable Elements

WriteFree allows users to insert images and horizontal rules into their text via the Insert Toolar. The Insert Toolbar can be brought up by selecting or creating an empty line in the editor. As of now, users need the public-facing URL for any images they would like to insert.

Using WriteFree in your next project is an easy affair. With one line of JavaScript you have a fully-featured yet easy-to-use text editor ready for your users.

First, grab WriteFree from the jsDelivr CDN: 

<script crossorigin src="https://cdn.jsdelivr.net/npm/writefree@1.2.12/build/js/writefree.min.js" type="text/javascript"></script>

Create a div to use as a container for WriteFree: 

<div id="wfCtn"></div>

Initialize WriteFree, passing in the container: 

const wf = WriteFree(document.getElementById('wfCtn'));

Presumably, you're going to want to do something with what your users write. WriteFree offers a couple methods to help with that.

As of now, there are two methods you can use to manipulate the contents of the WriteFree editor: 

const wfContents = wf.html();
wf.load(wfContents);

WriteFree.html()

The WriteFree.html() method will pull the current contents of the WriteFree editor and return it as a String of HTML elements. You can then use this String as you wish. If you would like to reload a returned String, simply use the WriteFree.load() method, passing in the String you previously obtained from the WriteFree.html() method.

There are a number of options that can be set on initialization. A few of these are set by default but can easily be overridden.

Options for a WriteFree instance are defined in a JavaScript Object passed in as the second parameter to the initialization function like so: 

const wf = WriteFree(ctn, { optionsObject })
Most of the options available are dedicated to styling the editor and its contents. The Edit Toolbar and Insert Toolbar are statically styled and can't be customized. However, the contents of the editor can be easily styled by either passing in the appropriate style Object or class.

Options Definitions

divOrPar [ Type: String, Options: 'P' or 'DIV' ]
You can choose to use paragraph (<p>) or div (<div>) tags to wrap each text section within the editor. Set this to 'P' to for paragraphs or 'DIV' for divs.
sectionClass [ Type: String ]
When included, the class on each paragraph will be set to this String. If using this, set sectionStyle (below) to an empty object to remove default styles.
sectionStyle [ Type: Object ]
An Object containing CSS rules to be applied to each paragraph. If using sectionClass (above), set this to an empty object to remove default styles.
containerClass [ Type: String ]
When included, the class on the editor container will be set to this String. Use this to style the editor as a whole. If using this, set containerStyle (below) to an empty object to remove default styles.
containerStyle [ Type: Object ]
An Object containing CSS rules to be applied to the editor container. Use this to style the editor as a whole. If using containerClass (above), set this to an empty object to remove default styles.
largeHeadingClass [ Type: String ]
When included, the class on large headings (<h1>) will be set to this String. If using this, set largeHeadingStyle (below) to an empty object to remove default styles.
largeHeadingStyle [ Type: Object ]
An Object containing CSS rules to be applied to large headings (<h1>). If using largeHeadingClass (above), set this to an empty object to remove default styles.
smallHeadingClass [ Type: String ]
When included, the class on small headings (<h2>) will be set to this String. If using this, set smallHeadingStyle (below) to an empty object to remove default styles.
smallHeadingStyle [ Type: Object ]
An Object containing CSS rules to be applied to small headings (<h2>). If using smallHeadingClass (above), set this to an empty object to remove default styles.
imgClass [ Type: String ]
When included, the class on inserted images will be set to this String. If using this, set imgStyle (below) to an empty object to remove default styles.
imgStyle [ Type: Object ]
An Object containing CSS rules to be applied to inserted images. If using imgClass (above), set this to an empty object to remove default styles.
emptyPlaceholder [ Type: String ]
The String to use as the placehoder when the editor is empty.

Default Options Object

const defaultOptions = {
  divOrPar: 'p',
  sectionClass: '',
  sectionStyle: {
    'font-size': '1.25rem',
    'max-width': '35rem',
    'margin-left': 'auto',
    'margin-right': 'auto',
  },
  containerClass: '',
  containerStyle: {
    'min-height': '2em',
    'max-width': '100%',
    margin: '1em auto',
    padding: '0em 1.5rem',
    'font-size': '1.25rem',
    'font-family': "'Crimson Text', serif",
    outline: 'none',
    color: '#333',
  },
  largeHeadingClass: '',
  largeHeadingStyle: {
    'font-size': ''2rem',
    'max-width': '35rem',
    'margin-left': 'auto',
    'margin-right': 'auto',
  },
  smallHeadingClass: '',
  smallHeadingStyle: {
    'font-size': '1.5rem',
    'max-width': '35rem',
    'margin-left': 'auto',
    'margin-right': 'auto',
  },
  imgClass: '',
  imgStyle: {
    'margin-left': 'auto',
    'margin-right': 'auto',
    'max-width': '100%',
  },
  emptyPlaceholder: 'Try writing here...',
};