angular-ui-tinymce 指令和通过文件浏览器上传图片答案

【问题标题】：angular-ui-tinymce directive and image upload via file browserangular-ui-tinymce 指令和通过文件浏览器上传图片
【发布时间】：2016-04-26 17:07:58
【问题描述】：

使用 jquery，我们可以将本地图像添加到 tinymce 编辑器，如 this jsfiddle 之后的 documentation。

tinymce 的模块是 angular-ui-tinymce。但是添加本地文件不适用于该模块。

我的代码如下。如果它有效，当我单击插入/编辑图像时应该有一个像这样的文件浏览按钮。

但它没有出现。除此之外一切正常。可能是模块不支持该功能。有谁知道如何使用这个模块添加本地图像？

在模板中：

<textarea
    ui-tinymce="{{tinymceOptions}}"
    ng-model="tinymceValue">
</textarea>

在控制器中：

 $scope.tinymceOptions: {
      selector: "textarea",
      plugins: 'image',
      file_browser_callback: function(){},
      paste_as_text: true
}

【问题讨论】：

标签： javascript jquery angularjs tinymce tinymce-4

【解决方案1】：

我在我的一个应用程序中使用了该指令，我可以通过使用选项中的 file_browser_callback 函数来显示该按钮。

您是否在 JavaScript 控制台中遇到任何错误？或许您可以用它制作一个简单的 CodePen 或 JS Fiddle，以便人们可以看到您的代码？

编辑：这是一个 CodePen，它可以做你想做的事情......它确实让那个按钮出现。 file_browser_callback 函数只是将一些内容记录到浏览器的控制台，但这表明您在使用该 Angular 指令时确实可以拥有该按钮。

http://codepen.io/michaelfromin/pen/BKOGZG

【讨论】：

已修复。我用于ui-tinymce 的代码仓库不再有效。将其切换到 CDNJS。
太棒了。我现在正在处理这个问题，希望笔能有所帮助！
我无法让文件浏览器在新笔上工作。无论如何，它需要 jquery，这是这个问题的禁区。
文件浏览器绝不需要 jQuery。您可以使用常规 JavaScript 来实现 UI。 tinymce.com/docs/demo/file-picker
欣赏迈克尔的评论。我会检查那个选项。现在我必须手动创建一个上传功能，然后将我从回调中获得的结果图像 url 添加到 Tinymce 内容中。

【解决方案2】：

我通过多次研究、反复试验找到了自己的解决方案，它在 angular9 中对我来说工作正常。以下是我遵循的步骤

1 : 安装和导入 ngx-tinymce 参考 https://www.npmjs.com/package/ngx-tinymce。
2 : 以下是 [config]="textEditorConfig" 的 html 片段，您将指向 tinymce 编辑器的配置。

<div class="col-sm-12 col-md-12 col-lg-12">
    <label class="label modal-label text-uppercase">Texts</label>
        <tinymce
          *ngIf="viewMode?.key !== 'view'"
          #reportEditor
          formControlName="expectation"
          [config]="textEditorConfig"
        ></tinymce>
        <!--  View Mode -->
        <div class="template-view"
            *ngIf="viewMode?.key == 'view'"
             [innerHtml]="activityDetailForm?.value?.expectation">
         </div> 
 </div>

3 : 定义tinymce配置如下

public static htmlEditorConfig =  {
    height: 350,
    theme: 'modern',
    plugins: 'preview fullpage searchreplace directionality visualchars fullscreen  hr pagebreak nonbreaking anchor advlist lists textcolor wordcount contextmenu colorpicker textpattern link image media paste contextmenu',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link autolink openlink unlink | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent | image media',
    contextmenu: 'paste link image',
    image_advtab: false,
    image_uploadtab: true,
    a11y_advanced_options: true,
    content_css: [
      '//fonts.googleapis.com/css?family=Raleway&display=swap',
      '//www.tinymce.com/css/codepen.min.css'
    ],

    file_picker_types: 'image',
    file_picker_callback: function (cb) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.onchange = function (e?: HTMLInputEvent) {
      var file = e.target.files[0];

      var reader = new FileReader();
      reader.onload = function (event) {
        console.log("tinymce",event)
        var blobCache =  event.target.result;
        var blobInfo = blobCache;
        cb(blobInfo, { title: file.name });
      };
      reader.readAsDataURL(file);
    };

    input.click();
    interface HTMLInputEvent extends Event {
      target: HTMLInputElement & EventTarget;
    }
  },
  };

【讨论】：

【解决方案3】：

您的 html 中的{{tinymceOptions}} 可能无法打印值为函数的选项。

所以在你的控制器中包含'uiTinymceConfig'

然后在你的控制器函数中

uiTinymceConfig.file_browser_callback = function(){ debugger; };

angular-ui-tinymce 合并 'tinymceOptions' (表达式) 和 'uiTinymceConfig' :

angular.extend(options, uiTinymceConfig, expression, setupOptions);

【讨论】：

【解决方案4】：

你的 HTML

<textarea data-ui-tinymce id="tinymce1" ng-model="data"></textarea>

<form id="image" style="width:0px;height:0;overflow:hidden">
    <input type="file" file-model="imageFile"/>
</form>

您的 TINYMCE 配置

tinymce.init({
    selector: 'textarea',

    automatic_uploads:true,
    file_browser_callback_types: 'file image media',
    file_browser_callback: function(field_name, url, type, win) {
        if(type=='image') {
            $('#editorImage input').click();
        }
    } 

});

你的指令

directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                    scope.uploadImage();
                });
            });
        }
    };
}]);

您的控制器功能

$scope.uploadImage =function (){

    var fd = new FormData();
    fd.append('file', $scope.imageFile);
    $http({
        method:"POST",
        url: URL,
        data: fd,
        timeout:60000,
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).success(function(response,status){

    });

}

【讨论】：

【解决方案5】：

首先创建文件类型的输入元素并执行函数click()打开对话框文件选择器，按照步骤上传选定的图像（在我的情况下我使用ng-file-upload）并检索公共url，记住使用等待用户的承诺操作，最后一步是在 tinymce 的字段中设置 url 这可以使用 field_name document.getElementById(field_name).value

$scope.tinymceOptions = {
    selector: "textarea",
    plugins: 'image',
    file_browser_callback: function (field_name, url, type, win) {               
        let input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');            
        input.click();
        input.addEventListener('change', (event) => {
            let defered = $q.defer();
            Upload.upload({
                url: MultimediaService.uploadDocument(),
                data: {
                    file: event.path[0].files[0]
                }
            }).then(function (resp) {
                defered.resolve(resp);                        
            }, function (err) {
                defered.reject(err);
            });
            defered.promise.then(function (resp) {
                document.getElementById(field_name).value = resp['data']['url'];
                return resp['data']['url'];
            }, function (err) {
                return null;
            });
        });
    },
    paste_as_text: true
};

【讨论】：

【解决方案6】：

这对我有用，使用 @tinymce/angular - angular 版本 11

在component.html文件中

<editor [id]="'editorID1'" style="margin-left: 0em" [formControlName]="'questiontext'" placeholder="Date"
       class="form-control" apiKey=" place your api key here" [init]="editorConfig">
</editor>

在ts文件中：

  let editorConfig = {
  paste_data_images: true,

  file_picker_callback: function(callback:any, value:any, meta:any) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
      if (meta.filetype == 'image') {
         input.click();
         // jQuery('#test-upload').trigger('click');
         //   input.on('change', function(e:any) {               
          input.onchange = function (e:any) {
          //jQuery('#test-upload').on('change', function(e:any) {
              var file:any = e.target.files[0];
              var reader = new FileReader();
              reader.onload = function(e: any) {
                  callback(e.target.result, {
                      alt: ''
                  });
              };
              reader.readAsDataURL(file);
          };
      }
  },

...
}

【讨论】：