Skip to content
An inline wysiwyg markdown document editor based on replacing string subsections. WYSIWYG possible via woofmark.
JavaScript HTML
Branch: main
Clone or download
Latest commit 0fcd318 Oct 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create first timers issue template.md (#18) Jan 9, 2019
dist Fail on false + preserving HTML blocks as single sections (#49) Feb 27, 2019
examples Update style.css Oct 15, 2019
spec/javascripts Fail on false + preserving HTML blocks as single sections (#49) Feb 27, 2019
src Fail on false + preserving HTML blocks as single sections (#49) Feb 27, 2019
.gitignore docs and gitignore Feb 25, 2017
.travis.yml Update .travis.yml (#32) Jan 28, 2019
CONTRIBUTING.md added CONTRIBUTING.md (#41) Feb 4, 2019
Gruntfile.js Incorporate "grunt-contrib-connect" (#36) Jan 28, 2019
LICENSE Initial commit Feb 24, 2017
README.md editor options object Aug 8, 2017
bower.json
package-lock.json Bump browserify from 16.2.3 to 16.3.0 (#81) Jul 9, 2019
package.json Bump browserify from 16.2.3 to 16.3.0 (#81) Jul 9, 2019

README.md

inline-markdown-editor

Build Status Code Climate

An inline wysiwyg markdown document editor based on replacing string subsections. WYSIWYG possible via the woofmark-based PublicLab.Editor.

Basics

inline-markdown-editor splits up a Markdown-containing string by double newlines into sections, and parses each into HTML, which it displays.

It then adds an "edit button" beneath each section, which expands a nice form for editing that section either as Markdown or in rich text with a WYSIWYG editor.

Upon submitting the form, an asynchronous AJAX post request is made to the specified server with parameters before and after, containing the original subsection markdown and its replacement. The form listens for a true or false response and updates the section's displayed HTML accordingly.

For a demo, see:

https://publiclab.github.io/inline-markdown-editor/examples/

https://publiclab.github.io/inline-markdown-editor/examples/wysiwyg

Usage

For an easy start, you can begin using inline-markdown-editor by pointing it at a markdown-containing element by its selector, and specifying a URL to send changes to.

inlineMarkdownEditor({
  replaceUrl: '/wiki/replace/',
  selector: '.markdown'
});

You can also specify filters to run on the raw original markdown before display, and afterwards upon the displayed DOM element, as well as override several other defaults:

inlineMarkdownEditor({
  replaceUrl: '/wiki/replace/' + wiki_id,
  selector: '.markdown',
  preProcessor: function preProcessMarkdown(markdown) {
    // do things to markdown here before it's used to construct the form
    return markdown
  },
  postProcessor: function postProcessContent(element) {
    // do things to element here after the section has been converted to HTML and displayed
  },
  defaultMarkdown: function(markdown) {}, // a markdown parser
  buildSectionForm: function() {}, // return a string containing the form element
  onComplete: function(response, markdown, html, el, uniqueId, form, o) {}, // run on completing AJAX post
  isEditable: function(markdown) {}, // returns boolean; whether a given subsection should get an inline form; default skips HTML and horizontal rules
  extraButtons: { 'fa-icon-name': function(element) {} }, // object with keys of icon names for additional buttons with associated actions for each; returns jQuery element upon construction
  submitSectionForm: function(event, before, after, options) {}, // optional, to override the form submission handling for each subsection; before/after represent the text diff
  editorOptions: {} // any options to pass to the built-in PublicLab.Editor instance
});

Contributing

To install this library for development, you'll need NodeJS. You can get the detailed instruction on installing node and npm in its official documentation.

After installing node and npm run npm install from the root directory.

inline-markdown-editor uses grunt - the JavaScript task runner - for compilation of the modules. To install grunt run npm install -g grunt-cli. You may have to use sudo for root privileges.

Make changes to the files in the /src/ directory, then run grunt build to compile into /dist/inlineMarkdownEditor.js. This will use grunt-browserify to concatenate and include any node modules named in require() statements. You'll then be able to try it out in /examples/index.html. Run grunt and leave it running to build as you go.

Tests

Tests are set up with Jasmine, and can be run with npm test.

Goals

  • configurable editors
    • plan for swappable editors; will need to specify both constructor and onEditorSubmit in processSection
  • better modularization of processSection.js
  • more tests

Tests we want

  • defaultMarkdown
  • preProcessor
  • postProcessor
  • insertForm: look for the form, the button
You can’t perform that action at this time.