директива angular-ui-tinymce и загрузка изображения через файловый браузер

Question

С помощью 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 
} 

Answer 1

Я использую эту директиву в одном из моих приложений, и я могу получить эту кнопку, чтобы появиться, используя используя file_browser_callback функции в опции.

У вас возникли ошибки в консоли JavaScript? Возможно, вы можете сделать простой CodePen или JS Fiddle, чтобы люди могли видеть ваш код?

EDIT: Вот код, который делает то, что вы хотите ... он получает эту кнопку. Функция file_browser_callback просто записывает что-то в консоль браузера, но это показывает, что вы действительно можете использовать эту кнопку при использовании этой угловой директивы.

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

Answer 2

ВАШЕГО 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 3

{{tinymceOptions}} в вашем html не может печатать варианты, где значение является функцией.

Таким образом, в вашем контроллере включают 'uiTinymceConfig'

Затем в функции контроллера

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

угловой щ-TinyMCE Слияния 'tinymceOptions' (выражение) и 'uiTinymceConfig':

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