ngWig 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01065/article/details/141774811

ngWig 开源项目教程

ngWigsimple WYSIWYG editor for AgularJS, for Angular2+ please use - https://github.com/stevermeister/ngx-wig项目地址:https://gitcode.com/gh_mirrors/ng/ngWig

1、项目介绍

ngWig 是一个简单易用的 WYSIWYG（所见即所得）编辑器，专为 AngularJS 设计。它提供了基本的文本编辑功能，如文本样式、标题、列表和文本对齐等。ngWig 是一个轻量级的解决方案，不依赖于 jQuery 或其他复杂的 WYSIWYG 库。

2、项目快速启动

安装

你可以通过 npm 或 bower 安装 ngWig：

npm install ng-wig
# 或者
bower install ng-wig

使用

引入 ngWig 库文件：

<script type='text/javascript' src='path/to/ng-wig.js'></script>

在你的 AngularJS 应用中注入 ngWig 模块：

angular.module('yourApp', ['ngWig']);

在你的 HTML 中使用 ngWig 指令：

<ng-wig ng-model="text1"></ng-wig>

3、应用案例和最佳实践

应用案例

ngWig 可以用于各种需要富文本编辑的场景，例如博客文章编辑、评论系统、内容管理系统等。以下是一个简单的示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>ngWig 示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="path/to/ng-wig.js"></script>
    <link rel="stylesheet" href="path/to/ng-wig.css">
</head>
<body ng-controller="MainCtrl">
    <h1>ngWig 示例</h1>
    <ng-wig ng-model="content"></ng-wig>
    <button ng-click="saveContent()">保存内容</button>

    <script>
        angular.module('myApp', ['ngWig'])
            .controller('MainCtrl', ['$scope', function($scope) {
                $scope.content = '';
                $scope.saveContent = function() {
                    console.log('保存的内容:', $scope.content);
                };
            }]);
    </script>
</body>
</html>