A highly customizable code-inserting editor for markdown or other languages
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
images
parser
php
src
vendor
.gitignore
LICENSE
README.md
composer.json
composer.lock

README.md

Fongshen Editor

A highly customizable code-inserting editor.

About

Fongshen is a code inserting editor, It can integrate and wrap many other text editors and provides multiple buttons sets. Fongshen is based on well known MarkItUp editor but almost rewrite 80% codes.

The name: "Fongshen" in Chinese means the god of wind.

Fongshen's brother is ACE X Markdown Editor in Joomla CMS.

Screen Shot

p-2014-08-11-1

Getting Started

Using ACE

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="src/skins/simple/style.css" />
        <link rel="stylesheet" href="src/type/markdown/style.css" />

        <script src="vendor/jquery/jquery.js"></script>
        <script src="vendor/ace/src-min/ace.js"></script>
        <script src="src/editor/ace-adapter.js"></script>
        <script src="src/fongshen.js"></script>
        <script src="src/type/markdown.js"></script>

        <script>
            jQuery(document).ready(function($)
            {
                var editor = $('#my-editor');

                var options = {
                    id: 'foo',
                    namespace: 'bar',
                    previewAjaxPath: '../parser/markdown.php',
                    previewContainer: '#preview-container',
                    buttons: FongshenMarkdownButtons
                };

                var aceOptions = {
                    lang: 'markdown',
                    wrap: true
                };

                var Fongshen = editor.fongshen(new AceAdapter(aceOptions), options);
            });
        </script>
    </head>
    <body>
        <!-- Editor -->
        <div id="my-editor" class="" style="height: 500px;"></div>

        <!-- Preview -->
        <div id="preview-container"></div>
    </body>
</html>

This will create the simple editor:

p-2014-08-11-2

Using CodeMirror

var editor = $('#my-editor');

var options = {
    id: 'foo',
    namespace: 'bar',
    previewAjaxPath: '../parser/markdown.php',
    previewContainer: '#preview-container',
    resize: false
    buttons: FongshenMarkdownButtons
};

var cmOptions = {
    mode: 'markdown',
    theme: 'elegant',
    lineNumbers: true
};

var Fongshen = editor.fongshen(new CodemirrorAdapter(cmOptions), options);

Dependency Injection

You can create your own editor object and inject it into adapter.

var ace = ace.edit('#my-editor');
var session = ace.getSession();

ace.setTheme("ace/theme/monokai");
session.setMode("ace/mode/markdown");
session.setUseWrapMode(true);

var Fongshen = editor.fongshen(new AceAdapter(ace), options);

Other tutorial please see Examples.

TODO

Add more button set

  • Wiki
  • BBCode
  • reStructuredText

Please comment me if you need other languages.

Add more themes

More documentations, more anything~~~