npm 包 ng-richtext 使用教程

前言

ng-richtext 是一个 AngualrJS 的富文本编辑器 npm 包。它可以提供诸如 bold、italic、underline、lists、blockquote 等功能。本篇文章将介绍如何使用 ng-richtext 编辑器来创建富文本编辑器。

安装

使用 npm 安装

npm install ng-richtext --save

直接下载

从 GitHub 上直接下载 ng-richtext。

介绍

ng-richtext 包含两个组件：ng-richtext 和 ng-richtext-dialogs。

ng-richtext 是主要的富文本编辑器。它具有基本的富文本编辑功能，如 bold、italic、underline、lists、blockquote 等。ng-richtext-dialogs 提供了一个简单的对话框来插入链接和插入图片。

ng-richtext 强制依赖于 AngularJS，所以在使用 ng-richtext 前，需要保证 AngularJS 已经被安装到你的项目中。

使用案例

基本使用方式

将 ng-richtext 作为一个组件添加到你的 html 页面中。在使用时，需要注意的是，该组件需要被包含在一个 form 元素中才能正确工作。

<form>
  <ng-richtext ng-model="myText"></ng-richtext>
</form>

对话框使用方式

添加 ng-richtext-dialogs 作为一个需要的 dependency 模块，以便在应用中使用对话框。

angular.module('myApp', ['ng-richtext-dialogs']);

引入 ng-richtext 和 ng-richtext-dialogs 组件。

<!-- 引入依赖的 js 文件 -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-richtext/ng-richtext.js"></script>
<script src="bower_components/ng-richtext-dialogs/ng-richtext-dialogs.js"></script>

附加资源

• ng-richtext 项目源码
• ng-richtext 在线演示

总结

在本文中，我们介绍了如何使用 ng-richtext 编辑器来创建富文本编辑器。如果你有任何问题，请在评论区留言。

示例代码

HTML

-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
  ----- ----------------
  ------------------ ----------
  ----- ---------------- ----------------------------------------------------
-------
------
  --------------- -------
  ---- -----------------------------
    ------
      ------------ --------------------------------
    -------
  ------
  ------- ---------------------------------------------------
  ------- -----------------------------------------------------------
  ------- -------------------------
-------
-------

JavaScript

angular.module('myApp', ['ng-richtext']);

angular.module('myApp').controller('MyController', function($scope) {
  $scope.myText = '<div>Some <b>dummy</b> text with <i>italics</i></div>';
});

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005582081e8991b448d54cd