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

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:

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);

Best laravel framework open-source packages.

Fongshen editor

Fongshen Editor

About

Screen Shot

Getting Started

Using ACE

Using CodeMirror

Dependency Injection

TODO

Add more button set

Add more themes

More documentations, more anything~~~

Simon Asika