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="https://github.com/asika32764/fongshen-editor/blob/master/src/skins/simple/style.css" />
<link rel="stylesheet" href="https://github.com/asika32764/fongshen-editor/blob/master/src/type/markdown/style.css" />
<script src="https://raw.githubusercontent.com/asika32764/fongshen-editor/master/vendor/jquery/jquery.js"></script>
<script src="https://raw.githubusercontent.com/asika32764/fongshen-editor/master/vendor/ace/src-min/ace.js"></script>
<script src="https://raw.githubusercontent.com/asika32764/fongshen-editor/master/src/editor/ace-adapter.js"></script>
<script src="https://raw.githubusercontent.com/asika32764/fongshen-editor/master/src/fongshen.js"></script>
<script src="https://raw.githubusercontent.com/asika32764/fongshen-editor/master/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);
Other tutorial please see Examples.
TODO
Add more button set
- Wiki
- BBCode
- reStructuredText
Please comment me if you need other languages.