С помощью jquery мы можем добавить локальные изображения в редактор tinymce
как этот jsfiddle, следуя документации.
Модуль для tinymce
для угловых угловых ui-tinymce. Но добавление локального файла не работает с этим модулем.
Мой код выглядит следующим образом. Если он работает, должна быть кнопка просмотра файла, подобная этой, когда я нажимаю вставить/редактировать изображение.
Но он не появляется. Помимо этого все работает. Может быть, модуль не поддерживает эту функцию. Кто-нибудь знает, как добавить локальные изображения с помощью этого модуля?
в шаблоне:
<textarea
ui-tinymce="{{tinymceOptions}}"
ng-model="tinymceValue">
</textarea>
в контроллере:
$scope.tinymceOptions: {
selector: "textarea",
plugins: 'image',
file_browser_callback: function(){},
paste_as_text: true
}
Я использую эту директиву в одном из своих приложений, и я могу получить эту кнопку, чтобы она появилась, используя функцию file_browser_callback
в параметрах.
Получаете ли вы какие-либо ошибки в консоли JavaScript? Возможно, вы можете сделать простой CodePen или JS Fiddle, чтобы люди могли видеть ваш код?
EDIT: Вот код, который делает то, что вы хотите... он получает эту кнопку, чтобы появиться. Функция file_browser_callback
просто записывает что-то в консоль браузера, но это показывает, что вы действительно можете использовать эту кнопку при использовании этой директивы Angular.
сначала создайте элемент ввода файла типа и выполните функцию 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
};
{{tinymceOptions}}
в вашем html не может печатать параметры, в которых значение является функцией.
Поэтому в вашем контроллере есть 'uiTinymceConfig'
Затем в вашей функции контроллера
uiTinymceConfig.file_browser_callback = function(){ debugger; };
angular-ui-tinymce объединяет 'tinymceOptions' (выражение) и 'uiTinymceConfig':
angular.extend(options, uiTinymceConfig, expression, setupOptions);
ВАШ 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){
});
}
ui-tinymce
больше не действителен. Поменял его на CDNJS.