A markdown editor. http://lab.lepture.com/editor/

Related tags

Editors editor
Overview

Editor

A markdown editor you really want.

Sponsors

Editor is sponsored by Typlog.

Overview

Editor is not a WYSIWYG editor, it is a plain text markdown editor. Thanks for the great project codemirror, without which editor can never be created.

Basic Usage

The easiest way to use Editor is to simply load the script and stylesheet:

<link rel="stylesheet" href="http://lab.lepture.com/editor/editor.css" />
<script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script>
<script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>

You can also use jsdelivr CDN:

<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css">
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script>
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script>

Having done this, an editor instance can be created:

var editor = new Editor();
editor.render();

The editor will take the position of the first <textarea> element.

Get the content

To get back the edited content you use:

editor.codemirror.getValue();

Component

If you are using component, you can install it with:

$ component install lepture/editor

Seajs

If you are using seajs, you can install it with:

$ spm install lepture/editor

Development

You can build the dist files with grunt. After this repo is cloned, dig into the repo, and install everything you need:

$ npm install
$ npm install grunt-cli -g

Now you can create the dist files:

$ grunt transport

You can get everything you need in the build directory.

Configuration

The Editor Class accepts an option as the parameter. The supported options are:

  • element (DOM)

    The element of the textarea. The default value is the first <textarea>.

  • tools (array or false)

    If set false, the editor will have no toolbar.

  • status (array or false)

    If set false, the editor will have no statusbar.

  • actions (object)

  • shortcuts (object)

Example:

new Editor({
  element: document.getElementById('editor'),
  toolbar: []
})

Contributing

Contribution is welcome. As a way to keep all code clean, we use Grunt to build our distributed files. Make sure you have read our Contributing Guide.

License

MIT. Copyright (c) 2013 - 2014 by Hsiaoming Yang

Comments
  • How to get HTML content from the editor

    How to get HTML content from the editor

    For example I have embedded Editor on the page and I need to write something, save it in MySQL and show as HTML on another page. How it is possible to do so?

    Thanks.

    opened by alexbagirov 9
  • Get the Markdown content and put on the textarea to reedit?

    Get the Markdown content and put on the textarea to reedit?

    I want ro reedit the content . so

    1. Get the content (that be published)
    var value = editor.codemirror.getValue(); // the value that be Markdown fommat content
    
    1. put the value to the textarea ,try to 2 ways , but failed
      1. $('.CodeMirror-scroll').text(value);
      2. $('.CodeMirror-scroll').html(value);

    That's a bug?

    opened by sunorry 3
  • Question about the project license

    Question about the project license

    The license of this project said:

    Permission is hereby granted, free of charge to any noncommercial projects (paid for commercial support), including the rights to use, copy, modify, merge of the Software.
    

    But there is not details. So the question is, I'm using a CMS project, which contains this project as one of the available editors, to do a website for some customers. Should I pay you some money? What the price?

    Thanks!

    opened by xiaohanyu 3
  • Editor Preview not working

    Editor Preview not working

    Hello,

    Currently, the editor preview is not working. I've tested both in jsfiddle and on my own website, and the editor preview is just "undefined", and I'm not sure as to how to go about fixing this. I've embedded the editor with the instructions given on the github page.

    There is one error in the google console, one that isn't present in the editor demo on your website, it is: Blink is considering rejecting non spec-compliant cross-origin web font requests: http://lab.lepture.com/editor/fonts/icomoon.woff. Please use Access-Control-Allow-Origin to make these requests spec-compliant.

    I used inspect element on the editor preview, and it is not updating. Any ideas?

    Here's the jsfiddle that does not work. I would link you directly to the one embedded in my website... but, the editor is behind a login area.

    opened by adammesa 2
  • Where do I get the edited markdown?

    Where do I get the edited markdown?

    Sorry, I'dont get it. Where do I get the edited text?

    Its easy to handle the initial markdown from textarea to the editor and change it. But where is the modified text to store or further process?

    opened by klml 2
  • Editing should work in preview mode

    Editing should work in preview mode

    Maybe this is not easy to manage but that would be the only way to use your tool for non techies. Only a few users want to learn a markup language, but a lot cms webmasters would like to have a small markup capable editor available that could not produce i.e. html issues.

    opened by Jako 2
  • Allow to set theme

    Allow to set theme

    While passing the options to CodeMirror.fromTextArea, use theme: options.theme.

    That value would be defined earlier in init as options.theme = options.theme || 'paper';.

    opened by paazmaya 2
  • Please add some sample default text to the editor preview

    Please add some sample default text to the editor preview

    I didn't really need to type all that sample text on http://lab.lepture.com/editor/. Perhaps you can put some filler text in it.

    This is some sample text and what not
    
    ## Here is a Title
    
    This is the regular text that goes [to google](http://google.com).
    
    ![image](http://image.url)
    
    > With some more text and other fun stuff. One thing I don't really like about 
    XYZ is the mess that it creates when you try to do things not needed.
    
    Then again, *you can't expect perfection*.
    
    Of course, I already do.
    
    1. This ithe first item
    2. second item.
    

    Nice work too. WYSIWYG combined with simple text markup. I really like it.

    opened by Xeoncross 2
  • Why not using Marked?

    Why not using Marked?

    I have just took a fast look on your code, but as I can see you're not using Marked.

    Why not?

    I mean, it's actualy the best markdown parser that allow github flavored markdown, which is the most used syntax.

    opened by paulodiovani 1
  • Fixed bug #26 first click on preview button

    Fixed bug #26 first click on preview button

    Now when the preview button is clicked for the first time, the transition from editor.css will fire and the view will slide from right to left, instead of just appearing.

    opened by BugiDev 1
  • Potential security issue

    Potential security issue

    Hey there!

    I belong to an open source security research community, and a member (@ning1022) has found an issue, but doesn’t know the best way to disclose it.

    If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

    Thank you for your consideration, and I look forward to hearing from you!

    (cc @huntr-helper)

    opened by JamieSlome 0
  • Regular Expression DoS vulnerability

    Regular Expression DoS vulnerability

    We are working on the ReDoS problem and detected 1 vulnerable regex(es) from your repository.

    1: ^(?:\s+(?:"(?:[^"\\]|\\\\|\\.)+"|'(?:[^'\\]|\\\\|\\.)+'|\((?:[^)\\]|\\\\|\\.)+\)))? in editor/vendor/markdown.js

    Please try the following:

    var pattern = "^(?:\\s+(?:\"(?:[^\"\\\\]|\\\\\\\\|\\\\.)+\"|'(?:[^'\\\\]|\\\\\\\\|\\\\.)+'|\\((?:[^)\\\\]|\\\\\\\\|\\\\.)+\\)))?";
    var input = " '\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\";
    var re = new RegExp(pattern);
    var matched = input.match(re);
    

    We didn’t create a pull request because we're not sure if these cases are possible to take place in your program, we also do not understand the functionality of these regexes as you do. Thank you for your understanding.

    opened by linci8210 0
  • How to integrate the editor on a reactjs website?

    How to integrate the editor on a reactjs website?

    • Hey I want this editor to be integrated with a reactjs website
    • But after reading the docs here, i didnt find any accurate guide.
    • can you please create a guide for a reactjs website?
    • and how to save the text written on the editor gets saved to the database?
    • is it possible here?
    • please provide a guide to save the text written on this editor to be saved on the database

    thanks

    opened by rohan2734 0
  • the cursor misplacement

    the cursor misplacement

    I don`t know why the cursor is misplacement, like below:

    2222222222 &nbsp&nbsp&nbsp&nbsp I

    I is the cursor, '&nbsp' is the blank space, it mean that there is a large blank space between the cursor and the 222

    opened by lovegnep 0
Owner
Hsiaoming Yang
This guy is too lazy to introduce himself.
Hsiaoming Yang
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

TOAST UI Editor v3 major update planning ?? ?? ?? TOAST UI Editor is planning a v3 major update for 2021. You can see our detail RoadMap here! GFM Mar

NHN 15.5k Jan 3, 2023
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

SimpleMDE - Markdown Editor A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allo

Sparksuite 9.3k Jan 4, 2023
:notebook: Our cool, secure, and offline-first Markdown editor.

Monod Hi! I'm Monod, the Markdown Editor! Monod is a (relatively) secure and offline-first Markdown editor we have built at TailorDev in order to lear

TailorDev 877 Dec 4, 2022
In-browser Markdown editor

StackEdit Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites

Benoit Schweblin 19.9k Jan 9, 2023
A markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark

updated: Saturday, 5th February 2022 A modern looking application built with Electron-Vite-React ?? ✨ Markdown Editor Introduction This application s

Kryptonite 5 Sep 7, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
A chrome extension which helps change ace editor to monaco editor in web pages, supporting all features including autocompletes.

Monaco-It Monaco-It is a chrome extension turning Ace Editor into Monaco Editor, supporting all features including autocompletes. 一些中文说明 Supported Lan

null 3 May 17, 2022
enjoy live editing (+markdown)

Pen Editor LIVE DEMO: http://sofish.github.io/pen Markdown is supported Build status: 0. source code You can clone the source code from github, or usi

小鱼 4.8k Dec 24, 2022
Easily convert markdown files to PDF

ezPDF What's this? This is a simple markdown to pdf parser that supports custom CSS stylesheets. In the future, ezPDF will allow you to preview files

Matheus 12 Oct 11, 2022
A file based wiki that uses markdown

wikmd What is it? It’s a file-based wiki that aims to simplicity. The documents are completely written in Markdown which is an easy markup language th

linbreux 161 Jan 2, 2023
The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Froala 5k Jan 1, 2023
Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Henri Bergius 2.4k Dec 17, 2022
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Ace (Ajax.org Cloud9 Editor)

Ace (Ajax.org Cloud9 Editor) Note: The new site at http://ace.c9.io contains all the info below along with an embedding guide and all the other resour

Ajax.org B.V. 25.2k Jan 4, 2023
In-browser code editor

CodeMirror CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 10

CodeMirror 25.6k Dec 30, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Quill 34.3k Jan 2, 2023
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

yabwe 15.7k Jan 4, 2023
Tiny bootstrap-compatible WISWYG rich text editor

bootstrap-wysiwyg Important information for Github requests/issues Please do not submit issues/comments to this repo. Instead, submit it to https://gi

MindMup 5.6k Jan 3, 2023
HTML5 rich text editor. Try the demo integration at

Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a

Neil Jenkins 4.4k Dec 28, 2022