README.md · varHarrie/angular-mdeditor

#angular-mdeditor 基于angular directive的markdown编辑器。

###安装

bower install angular-mdeditor

###使用

angular.module('demoApp',[
	'harrie.mdeditor'
])
.controller('demoCtrl',['$scope',function($scope){
	$scope.text='### 标题';
}]);

<body ng-app="demoApp" ng-controller="demoCtrl">
	<mdeditor text="text"></mdeditor>
</body>

###设置

工具栏

$scope.toolbar=[
	{action:'bold',icon:'fa fa-bold',tip:'加粗(Ctrl+B)'},
	{action:'italic',icon:'fa fa-italic',tip:'斜体(Ctrl+I)'},
	{action:'header',icon:'fa fa-header',tip:'标题(Ctrl+H)'},
	{separator:true},
    {action:'ul',icon:'fa fa-list-ul',tip:'无序列表(Ctrl+U)'},
	{action:'ol',icon:'fa fa-list-ol',tip:'有序列表(Ctrl+O)'},
	{action:'code',icon:'fa fa-code',tip:'代码(Ctrl+K)'},
	{action:'quote',icon:'fa fa-quote-left',tip:'引用(Ctrl+Q)'},
    {separator:true},
	{action:'link',icon:'fa fa-link',tip:'连接(Ctrl+L)'},
	{action:'img',icon:'fa fa-picture-o',tip:'图片(Ctrl+G)'},
	{separator:true},
	{action:'undo',icon:'fa fa-undo',tip:'撤销'},
	{action:'redo',icon:'fa fa-repeat',tip:'重做'},
	{action:'preview',icon:'fa fa-eye',tip:'浏览'},
	{action:'fullscreen',icon:'fa fa-arrows-alt',tip:'全屏'}
];

<mdeditor text="text" toolbar='toolbar'></mdeditor>

主题

<mdeditor text="text" theme='default'></mdeditor>

可用主题请看CodeMirror Theme

布局

$scope.classNames={
	wrapper:'mdeditor',
	toolbar:'mdeditor-toolbar',
	toolbarItem:'mdeditor-toolbar-item',
	separator:'mdeditor-toolbar-separator',
	textarea:'mdeditor-textarea',
	preview:'mdeditor-preview'
};

<mdeditor text="text" class-names='classNames'></mdeditor>

快捷键

$scope.shortcut:{
	'Ctrl-B':'bold',
	'Ctrl-I':'italic',
	'Ctrl-H':'header',
	'Ctrl-U':'ul',
	'Ctrl-O':'ol',
	'Ctrl-K':'code',
	'Ctrl-Q':'quote',
	'Ctrl-L':'link',
	'Ctrl-G':'img'
};

<mdeditor text="text" shortcut='shortcut'></mdeditor>

varHarrie / angular-mdeditor

简介

发行版

贡献者

近期动态

varHarrie / angular-mdeditor .gitee-modal { width: 500px !important; }

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

varHarrie / angular-mdeditor