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

Question

With jquery we can add local images to tinymce editor like this jsfiddle following the documentation .

The module for tinymce for angular is angular-ui-tinymce . But adding local file doesn't work with that module.

My code as follows. If it works there should be a file browse button like this when I click insert/edit image .

But it doesn't appear. Other than that everything works. May be the module doesn't support that feature. Does anyone know how to add local images with this module?

in template:

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

in controller:

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

Answer 1

I use that directive in one of my apps and I can get that button to appear by using the using the file_browser_callback function in the options.

Do you get any errors in the JavaScript console? Perhaps you can make a simple CodePen or JS Fiddle of this so people can see your code?

EDIT: Here is a CodePen that does what you want ... it does get that button to appear. The file_browser_callback function just logs something to the browser's console but this shows that you can indeed have that button while using that Angular directive.

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

Answer 2

I found a solution my own with several research, trial and error its working fine for me in angular9. following are the steps I followed

1 : Install & import ngx-tinymce refer https://www.npmjs.com/package/ngx-tinymce .
2 : Following is the html snipet where [config]="textEditorConfig" you will point to the configurations of tinymce editor.

<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 : Define tinymce configuration as follows

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;
    }
  },
  };

Answer 3

YOUR 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>

YOUR TINYMCE CONFIGURATION

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();
        }
    } 

});

YOUR DIRECTIVE

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();
                });
            });
        }
    };
}]);

YOUR CONTROLLER FUNCTION

$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){

    });

}

Answer 4

{{tinymceOptions}} in your html may not print the options where the value is a function.

So in your controller include 'uiTinymceConfig'

Then in your controller function

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

angular-ui-tinymce merges 'tinymceOptions' (expression) and 'uiTinymceConfig' :

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

Answer 5

first create input element of type file and execute function click() to open dialog file selector, follow step is upload selected image (in my case I use ng-file-upload ) and retrieve the public url, remember use promises for wait user action, last step is set url in field of tinymce this is posible with 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
};

Answer 6

This has worked for me, used @tinymce/angular - angular version 11

In component.html file

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

It's in ts file:

  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);
          };
      }
  },

...
}