当前位置: 首页 > 工具软件 > ngMeditor > 使用案例 >

Medium 样式编辑器 ngMeditor

燕智
2023-12-01

ngMeditor 详细介绍

ngMeditor 是用于 AngularJS 的 Medium 样式编辑器。

特性:

  • Header1-6/Bold/Itatic/underline/(un)order list/hr/justfy.

  • 支持代码输入. 仅需在行开始处输入 ``` ,或格式化它.

  • 支持 Tab 键.

  • 添加空白到 URL 并插入到链接。

  • 扔掉或选择图片插入,或者只从剪切板粘贴,图片存到 QiniuCloud.

使用示例:

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/angular-file-upload-shim.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/angular-file-upload.js"></script>
<script type="text/javascript" src="src/editor.js"></script>
<link rel="stylesheet" href="src/editor.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<ng-meditor ng-model="content" placeholder="placeholder"></ng-meditor>

JS:

//inject ngMeditor directives and services.
angular.module("ieditor", ['angularFileUpload','ngMeditor']);
// config
angular.module("ieditor").run(function ($http, meditorProvider) {
    meditorProvider.config({
            supportCommands:['justfy', 'bold', 'italic', 'underline', 'H1', 'hr', 'code', 'insertOrderedList', 'eraser', 'image', 'fullscreen'],
            qnConfig: {
                endPoint: 'http://upload.qiniu.com',
                tokenFunc: function () {
                    return $http.post('/token');
                }
            }
        }
    );
})
 类似资料: