• Stars
    star
    225
  • Rank 177,187 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An easy to use markdown editor with live preview and Image uploading

WIPBICTBF : Work in progress but it's close to be finished

The result

DEMO

How it works

To transform a textarea in an markdown editor you just have to create a new MdEditor instance

var md = new MdEditor('#mdeditor');

You can pass options as the second parameter

var md = new MdEditor('#mdeditor', {
uploader: false, //'http://local.dev/Lab/MdEditor/app/upload.php?id=',
preview: true,
images: [
  {id: '1.jpg', url: 'http://lorempicsum.com/futurama/200/200/1'},
]
});

Options

I created options for my needs, if you have some new ideas, PR are welcomed.

  • labelClose 'Do you really want to close this window ? Every edit you did could be lost'
  • labelInsert: 'Insert', This label is used within the image uploader
  • labelDelete: 'Delete',
  • labelSuccess: 'Content saved with success', This label is used when saving using ctrl + s
  • labelImage: 'Insert your image url', This label is used within the image uploader is not availabled
  • labelConfirm: 'Do you really want to delete this picture ?'
  • preview: true, Enable the preview for the inline editor (preview is always displayed when fullscreen is enabled
  • uploader: false, false to disable the image uploader (using drag'n drop) or a string containing the REST api endpoint
  • uploaderData: {}, additional data to send when uploading (CSRF token for instance
  • ctrls: true, enable autosaving, it will submit the form using ajax (so if you have additional fields, they will be sent too)
  • images: [], an array containing initial images to display within the image uploader
  • imageURL: function(){ return el.url }, how to fetch the image URL from the image data
  • flash: function(message, type) {return window.alert(message) }, a function that display error or success message. you can replace it using jgrowl or a notification system of your choice.

Contributing

Before you can start you have to download you have to install npm dependencies, bower dependencies, then start gulp serve task

  • npm install
  • bower install
  • gulp serve

Then you can edit app/scripts/mdeditor.coffee to do some edits.

Todo

  • Rework the gulpfile.js
  • Test it on multiple browsers (only tested with chrome atm)

More Repositories

1

Grafikart.fr

Dépôt pour la nouvelle version de Grafikart.fr
PHP
634
star
2

BlogMVC

Helping you select a MVC Framework showing you the source code of a Blog App
PHP
214
star
3

Zoombox

Zoombox is an easy to use Javascript class that allow you to overlay images and videos on the current page.
JavaScript
160
star
4

dotfiles

Personnal dotfiles to make new servers feel like home
Shell
115
star
5

CSS3-Loaders

CSS
105
star
6

CustomElement-DropFiles

Customized built-in element to add user interactions on a file input with multiple files as a progressive enhancement.
TypeScript
88
star
7

filemanager-element

A simple file browser distributed as a custom element
TypeScript
78
star
8

grafisearch

Un front pour faire mes recherches en local
TypeScript
54
star
9

WPHP-Framework

Un framework pour wordpress dédié au développeur PHP
PHP
52
star
10

intellij-tinacious

🚥 Tinacious Design syntax theme for Jetbrains IDE
46
star
11

dev-map

Carte d'apprentissage du développement Web
TypeScript
45
star
12

OpenApiToTS

Convert openapi.yml file to ts declaration
TypeScript
40
star
13

ReorderJS

Parceque je voulais un système permettant de réorganiser des éléments en grille
JavaScript
37
star
14

Grafikart-DockerPHP

Docker image for Grafikart
Dockerfile
34
star
15

tokyo-night-jetbrains-theme

29
star
16

olympics-medals

CSS
25
star
17

CustomElement-SpinningDots

A spinning loader, with dots
JavaScript
24
star
18

headless-elements

Custom HTML elements for generic components (dropdown, modal...) without style.
JavaScript
23
star
19

WebDeckOBS

TypeScript
23
star
20

Neon-Startpage

Trying to reproduce Opera Neon StartPage
JavaScript
22
star
21

video.grafikart.fr

Un serveur NodeJS pour gérer le streaming de video et l'upload youtube
TypeScript
19
star
22

Challenges

JavaScript
16
star
23

BlogMVC-Laravel

BlogMVC done with Laravel 5
PHP
16
star
24

twitch-overlay

The code of my twitch overlay
JavaScript
15
star
25

Tracky

Tracky chrome extension source code
CSS
15
star
26

DigestTracker

Dashboard pour le suivie de problèmes digestif
PHP
14
star
27

grafibot

Bot discord
TypeScript
13
star
28

shaper

WIP : Un pictionary mais avec 15 trait droits (sans courbes)
TypeScript
11
star
29

Grafilang

Un langage de programmation simplifié pour apprendre l'algorithmique
TypeScript
10
star
30

subsearch

Learning golang
Go
8
star
31

PokeNative

A pokemon app created using react native
TypeScript
7
star
32

go-web-boilerplate

This is a boilerplate when starting a new web server using golang.
Go
7
star
33

siteback

Petit outil personnel qui permet de sauvegarder un site rapidement
Go
6
star
34

ColorExtractor

Extract color from a file and display a grid.
JavaScript
6
star
35

TutoRecipeApi

Préparation d'une petite API en prévision du TP React.
TypeScript
6
star
36

PSR15-CsrfMiddleware

A PSR-15 compatible middleware to prevent CSRF
PHP
5
star
37

Slides

Code source des slides utilisés pour certaines vidéos
HTML
5
star
38

elixir-bootform

Create bootstrap forms with elixir
Elixir
5
star
39

rtag

A Cli tool to generate marker when recording a video
Go
5
star
40

nvim

Nvim configuration
Lua
4
star
41

demo-error-vite

HTML
3
star
42

StreamlabCSS

Dépôt pour tester et créer le CSS du tchat streamlabs
JavaScript
3
star
43

PrepWP

Code pour un tutoriel WordPress
PHP
3
star
44

TrashRepo

For demo purpose
SCSS
2
star
45

PrepReactQuery

Dépôt pour tester react query
JavaScript
2
star
46

SubtitleMe

Une expérimentation avec Electron (WIP)
JavaScript
2
star
47

arraytree-gem

The goal of this gem is to add some usefull methods for array.
Ruby
1
star