Невозможно отобразить значок изображения с помощью angular2-tinymce
Я хочу вставить изображение с помощью редактора tinymce. Я использую angular2-tinymce. Ниже приведены мои настройки:
TinymceModule.withConfig({
auto_focus: false, menubar: false, statusbar: false,
plugins: ["link", "paste", "table", "advlist", "autoresize", "lists", "code", "image"],
toolbar: 'formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | image',
}",
})
Я получаю следующую ошибку на консоли:
Где я делаю неправильно?
ОБНОВИТЬ
теперь я обновил angular.json со следующими настройками:
"node_modules/tinymce/plugins/image/plugin.js"
Теперь приходит другая ошибка:
@AndrewHill я использую angular.json в angular 6
Это конфигурация вашего приложения. Как вы связываете/создаете свой код?
@AndrewHill извините за недопонимание. я использую ng-serve для создания приложения, поскольку я тестирую его на локальной машине с помощью angular-cli
Хорошо. angular2-tinymce требует для запуска tinymce. Вы бегали и npm install --save tinymce, и npm install --save angular2-tinymce?
@AndrewHill еще нет. я использовал только npm install angular2-tinymce --save.
Давайте продолжить обсуждение в чате.
Ответы 2
Вероятно, вам не хватает зависимости tinymce, на которую опирается angular2-tinymce.
Запустите следующее:
npm install --save tinymce angular2-tinymce
Убедитесь, что вы выполнили все необходимые шаги в их документации по использованию.. Похоже, вам также нужно скопировать некоторые ресурсы в папку с ресурсами.
Извините, Эндрю .. я не могу принять этот ответ. я тоже не устанавливал tinymce. Я решил это.
Я решил свою проблему. Я выполнил шаги, определенные ниже:
Шаг 1: Вставьте в модуль следующую строку:
import 'tinymce/plugins/image';
Шаг 2: Обновите конфигурацию tinymce в модуле следующими строками:
plugins: ['image', 'code'],
min_height:400,
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input') as HTMLInputElement;
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var res = <HTMLInputElement>this;
var file:File = res.files[0];
var reader = new FileReader();
reader.onload = function () {
var base64 = reader.result.toString();
// call the callback and populate the Title field with the file name
cb(base64, { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
},
toolbar: 'formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
Вот и все. Спасибо.
Может проблема в окружающей среде. Используете ли вы
angular-cliдля объединения своего приложения?