Директива Google pagedown AngularJS

Ответ 1

Вот рабочая ссылка:

http://cssdeck.com/labs/qebukp9k

UPDATE

• Я сделал некоторые оптимизации.
• Я использую ngModel. $formatters! нет необходимости в других часах $.
• Я использую $timeout, а затем область. $применяются, чтобы избежать ошибок $digest.

Angular.js и производительность

• Если вы достигли производительности, возможно, ваше приложение использует слишком много $watch/$on.
• По моему опыту использование сторонних библиотек может вызвать всевозможные неэффективные/утечки памяти, в основном потому, что он не был реализован с учетом angular/SPA.
• Я смог сделать некоторую интеллектуальную интеграцию для некоторых библиотек, но некоторые просто не подходят для мира angular.
• Если ваше приложение должно показывать более 1000 вопросов, вы, вероятно, должны начать писать свой собственный ретранслятор и предпочитаете динамические вставки DOM.
• Angular.js не будет хорошо работать с множеством привязок данных, если вы не захотите написать какой-нибудь умный материал нижнего уровня (это действительно весело, когда вы знаете, как!).
• Опять же, предпочитайте разбиение на страницы! Как говорит Мишко Хевери: "На самом деле вы не можете показать больше, чем около 2000 единиц информации человеку на одной странице. Что-то большее, чем это действительно плохой пользовательский интерфейс, и люди все равно не могут его обработать".
• Прочтите следующее: Как работает привязка данных в AngularJS?
• Я рад помочь вам, но сначала позвольте мне показать код (свяжитесь со мной)..

Решение:

var app = angular.module('App', []);

app.directive('pagedownAdmin', function ($compile, $timeout) {
    var nextId = 0;
    var converter = Markdown.getSanitizingConverter();
    converter.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
            return "<blockquote>" + rbg(inner) + "</blockquote>\n";
        });
    });

    return {
        require: 'ngModel',
        replace: true,
        template: '<div class="pagedown-bootstrap-editor"></div>',
        link: function (scope, iElement, attrs, ngModel) {

            var editorUniqueId;

            if (attrs.id == null) {
                editorUniqueId = nextId++;
            } else {
                editorUniqueId = attrs.id;
            }

            var newElement = $compile(
                '<div>' +
                   '<div class="wmd-panel">' +
                      '<div id="wmd-button-bar-' + editorUniqueId + '"></div>' +
                      '<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">' +
                      '</textarea>' +
                   '</div>' +
                   '<div id="wmd-preview-' + editorUniqueId + '" class="pagedown-preview wmd-panel wmd-preview"></div>' +
                '</div>')(scope);

            iElement.html(newElement);

            var help = function () {
                alert("There is no help");
            }

            var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
                handler: help
            });

            var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);

            var init = false;

            editor.hooks.chain("onPreviewRefresh", function () {
              var val = $wmdInput.val();
              if (init && val !== ngModel.$modelValue ) {
                $timeout(function(){
                  scope.$apply(function(){
                    ngModel.$setViewValue(val);
                    ngModel.$render();
                  });
                });
              }              
            });

            ngModel.$formatters.push(function(value){
              init = true;
              $wmdInput.val(value);
              editor.refreshPreview();
              return value;
            });

            editor.run();
        }
    }
});

Ответ 2

Это может быть не ответ, но вся проблема возникает, когда вы начинаете использовать Markdown.Editor, который не дает вам много преимуществ.

Конечно, вам нужно использовать его для начинающих редактора markdown, но при использовании уценки они уже не являются новичками (я могу ошибаться).

То, к чему я подошел, состояло в том, чтобы сделать полностью рабочую версию этого без использования редактора.

Он также имеет предварительный просмотр.

Это тоже очень просто.

https://github.com/allenhwkim/wiki

---- править ----
удалены
---- править ----
удалены
---- править ----

Чтобы предоставить полностью работоспособный редактор, после нескольких часов пробного периода и задавая вопросы, самое простое, что я могу получить. Для этого требуются любые $watch или $formatters. Он просто обертывает данный элемент со всеми атрибутами, указанными в текстовом поле.

http://plnkr.co/edit/jeZ5EdLwOfwo6HzcTAOR?p=preview

app.directive('pagedownEditor', function($compile, $timeout) {
  var num=0;
  return {
    priority: 1001, //higher than ng-repeat, 1000
    link: function(scope, el, attrs) {
      var uniqNum = scope.$index || num++;
      var wmdPanel = document.createElement('div');
      wmdPanel.className = "wmd-panel";
      var wmdButtonBar = document.createElement('div');
      wmdButtonBar.id = 'wmd-button-bar-'+uniqNum;
      wmdPanel.appendChild(wmdButtonBar);
      el.wrap(wmdPanel); // el is ng-repeat comment, it takes tim

      var converter = Markdown.getSanitizingConverter();
      var editor = new Markdown.Editor(converter, "-"+uniqNum);
      $timeout(function() {
        wmdPanel.querySelector('textarea').id = 'wmd-input-'+uniqNum;
        wmdPanel.querySelector('textarea').className += ' wmd-input';
        wmdPanel.insertAdjacentHTML('afterend', '<div id="wmd-preview-'+uniqNum+'" '
          +'class="pagedown-preview wmd-panel wmd-preview">');
        editor.run()
      }, 50);
    }
  };

Ответ 3

Вы можете изменить это:

scope.$watch(attrs.ngModel, function () {
var val = scope.$eval(attrs.ngModel);

Для этого:

scope.$watch(attrs.ngModel, function(newValue, oldValue) {
  var val = newValue;
});

Дополнительно можно попробовать прокомментировать этот код:

if (val !== undefined) {
    $wmdInput.val(val);
    ...    

}

Я думаю, что это может быть связано с нечетным поведением.

Ответ 4

Демо: http://plnkr.co/edit/FyywJS?p=preview

Резюме

• Я удалил keyup и добавил крючок на onPreviewRefresh, чтобы убедиться, что щелчок на панели инструментов будет правильно обновляться ng-model.

• Функции в $rootScope продемонстрируют возможность обновления ng-model извне pagedown.

• сохранить функциональность зависит только от вашего выбора, так как теперь вы можете получить доступ к ng-model где-либо сейчас.