Question

我想为codemirror和dropzone all-in-one构建一个指令。首先，文本从markdown转换为html。然后，如果存在dropzoneConfig，那么[！ ...]值将替换为dropzone upload字段。上传完成后，上传将替换为上传的图像。

我接下来想要的是[！ ...]将在textarea中替换 [！ ...]（IMAGEURL），其中imageurl是我上传的网址。

我收到了以下代码：

angular.module('cms').directive('markdownPreview', ['$sanitize', '$parse', function ($sanitize, $parse) {
return {
  restrict: 'AE',
  link: function (scope, element, attrs, ctrl) {

    /* global showdown */
    var converter = new showdown.Converter();

    scope.$watch(attrs.preview, function (value) {

      element.html($sanitize(converter.makeHtml(value)));

      if (attrs.dropzoneConfig) {

        //var preview = $parse(attrs.preview);
        //console.log(preview(scope));

        var regexp = /<p>(?:\{<(.*?)>\})?!(?:\[([^\n\]]*)\])<\/p>/;
        var newHTML = element.html().replace(
                new RegExp(regexp, 'gim'),
                '<p class="dropzone"></p>'
                );

        element.html(newHTML);

        var dropzoneFields = element[0].getElementsByClassName('dropzone');
        angular.forEach(dropzoneFields, function (dropzoneField, key) {

          var config = scope[attrs.dropzoneConfig];

          /* global Dropzone */
          var dropzone = new Dropzone(dropzoneField, config.options);

          dropzone.on('success', function (file, response) {

            /* global $ */
            var holderP = $(file.previewElement).closest('p');

            holderP.removeClass('dropzone').html('<img src="' + response.file + '"/>');

            // regex to replace [!imageName] with [!imageName](imageURL) 
            var nth = 0;
            var newMarkdown = value.replace(/^(?:\{<(.*?)>\})?!(?:\[([^\n\]]*)\])(:\(([^\n\]]*)\))?$/gim, function (match, i, original) {
              nth++;
              return (nth === (key + 1)) ? (match + '(' + response.file + ')') : match;
            });

          });
        });
      }

    });
  }
};
 }]);

我的HTML：

<textarea class="form-group" ng-model="vm.page.content" ui-codemirror-opts="editorOptions" ui-codemirror name="content" id="content" required></textarea>

<div class="rendered-markdown" preview="vm.page.content" dropzone-config="dropzoneConfig" markdown-preview></div>

一切正常 - 但我不知道如何将newMarkdown-Value设置为textarea。我怎样才能做到这一点？

Angular Dropzone＆amp; Codemirror指令

0 个答案: