Question

使用jquery，我们可以在this jsfiddle之后将tinymce编辑器添加到tinymce编辑器。

角度为<textarea ui-tinymce="{{tinymceOptions}}" ng-model="tinymceValue"> </textarea>的模块为documentation。但添加本地文件并不适用于该模块。

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

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

模板中的

：

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

控制器中的

：

NEW

Answer 1

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

您在JavaScript控制台中是否收到任何错误？也许你可以制作一个简单的CodePen或JS小提琴，以便人们可以看到你的代码？

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

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

Answer 2

经过多次研究、反复试验，我找到了自己的解决方案，它在 angular9 中对我来说效果很好。以下是我遵循的步骤

1 : 安装和导入 ngx-tinymce 参考 https://www.npmjs.com/package/ngx-tinymce.
2 : 以下是 html snipet，其中 [config]="textEditorConfig" 您将指向 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;
    }
  },
  };

Answer 3

您的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){

    });

}

Answer 4

你的html中的

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

因此，在您的控制器中包含'uiTinymceConfig'

然后在你的控制器功能

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

angular-ui-tinymce合并'tinymceOptions'（表达式）和'uiTinymceConfig'：

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

Answer 5

首先创建文件类型的输入元素并执行函数click（）打开对话框文件选择器，按照步骤上传所选图像（在我的情况下我使用ng-file-upload）并检索公共网址，记住使用promises for等待用户操作，最后一步是在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
};

angular-ui-tinymce指令和通过文件浏览器

5 个答案: