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

0

С помощью jquery мы можем добавить локальные изображения в редактор tinymce как этот jsfiddle, следуя документации.

Модуль для tinymce для угловых угловых ui-tinymce. Но добавление локального файла не работает с этим модулем.

Мой код выглядит следующим образом. Если он работает, должна быть кнопка просмотра файла, подобная этой, когда я нажимаю вставить/редактировать изображение. Изображение 174551

Но он не появляется. Помимо этого все работает. Может быть, модуль не поддерживает эту функцию. Кто-нибудь знает, как добавить локальные изображения с помощью этого модуля?

в шаблоне:

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

в контроллере:

 $scope.tinymceOptions: {
      selector: "textarea",
      plugins: 'image',
      file_browser_callback: function(){},
      paste_as_text: true
}
Теги:
tinymce-4
tinymce

4 ответа

2

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

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

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

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

  • 0
    Эта ручка больше не работает.
  • 1
    Исправлена. Код репо, который я использовал для ui-tinymce больше не действителен. Поменял его на CDNJS.
Показать ещё 4 комментария
0

сначала создайте элемент ввода файла типа и выполните функцию click(), чтобы открыть селектор диалоговых файлов, следуйте шагу, загружающему выбранное изображение (в моем случае я использую ng-file-upload) и извлекаю общедоступный URL-адрес, помните, чтобы использовать обещания для действия пользователя-пользователя, последний шаг - установить url в поле tinymce, это возможно с полем_имя 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
};
0

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

Поэтому в вашем контроллере есть 'uiTinymceConfig'

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

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

angular-ui-tinymce объединяет 'tinymceOptions' (выражение) и 'uiTinymceConfig':

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

ВАШ 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.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){

    });

}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню