AngularJS 1.x integration

A rich text editor for AngularJS 1.x

Maintaining a legacy AngularJS (1.x) app? yjd wraps into a small directive with ng-model two-way binding and a $destroy cleanup — no jqLite gymnastics. Tree-shakeable, ~17 KB. On modern Angular? See the Angular guide.

See it running in AngularJS → Docs Playground

01 — Install

Add the editor

Via npm, or a plain <script> (the UMD global is yjd) + the stylesheet — whatever your AngularJS build uses.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">
<script src="https://cdn.jsdelivr.net/npm/@oix1987/yjd"></script>  <!-- global: yjd -->

02 — The directive

An ng-model directive

Create the editor in link, push changes back through $applyAsync, watch ngModel and setContent only when it differs, and destroy() on $destroy.

yjd-editor.directive.js

angular.module('app', []).directive('yjdEditor', function () {
  return {
    restrict: 'E',
    scope: { ngModel: '=', placeholder: '@' },
    link: function (scope, element) {
      var ed = new yjd(element[0], {
        content: scope.ngModel || '',
        placeholder: scope.placeholder,
        onChange: function (html) {
          scope.$applyAsync(function () { scope.ngModel = html; });
        },
      });
      scope.$watch('ngModel', function (v) {
        if (v != null && v !== ed.getContent()) ed.setContent(v);
      });
      scope.$on('$destroy', function () { ed.destroy(); });
    },
  };
});

03 — Use it

index.html

<yjd-editor ng-model="html" placeholder="Write…"></yjd-editor>

Live

The editor itself

A real yjd instance (the same one the directive mounts). Type in it, or open the running AngularJS example.

yjd-editor.directive.js — live

Notes

$applyAsync, not $apply

yjd's onChange fires outside a digest — $applyAsync batches the model update safely.

Cleanup on $destroy

The scope.$on('$destroy') handler calls destroy() so nothing leaks when the view unloads.

~17 KB, tree-shakeable

Or the all-in-one UMD via <script> — whatever fits a legacy build.

No lock-in

Same core in Angular, React, Vue.

Running AngularJS example · Modern Angular · React · Vue · Docs