Недавно, из-за требований проекта, необходима фронтальная коробка редактирования текста с функцией загрузки изображений в реальном времени. Я сравнил несколько плагинов онлайн. Во -первых, это был Ueitor's Baidu и обнаружил, что структура была слишком большой. Это было не то, что я хотел увидеть, была ли небольшая структура введена так много файлов; Во -вторых, это был Easyui Jquery. Хотя личная версия бесплатна, проект принадлежит бизнесу компании, и кажется, что не подходит для использования коммерческой версии фреймворка. Учитывая, что передняя часть проекта в основном построена на начальной загрузке, был наконец выбран плагин Bootstrap-Wysiwyg, который очень прост, легкий и очень расширяемый.
Очень удобно ввести Bootstrap-Wysiwyg и реализацию функции редактирования текста, но я заметил, что загрузка изображения реализована с использованием FileApi. Для большинства веб -сайтов, хотя пользовательский опыт без загрузки очень хорош в FileApi, когда он фактически хранится в базе данных, мы все еще надеемся сохранить статический путь изображения на сервере, а не на строковых изображениях. Короче говоря, нам нужно сделать небольшой переписывание Bootstrap-Wysiwyg (далее именуемое WY).
Во -первых, давайте соблюдаем элементы управления изображением на странице. Пропустите другие элементы управления и проверьте исходный код. Легко найти следующий код:
<div> <a id = "pictureBtn"> <i> </i> </a> <input type = "file" data-role = "Magic-overlay" data-target = "#picture" data-edit = "insertimage"/> </div>
Давайте сделаем объяснение. Свойства Data Role и Data Target являются предопределенными событиями в начальной загрузке. Здесь мы можем понять это как связанное с макетом, не учитывая его. Ключевой момент здесь. Третья собственность данных-нет такого события в начальной загрузке. Наблюдайте за Bootstrap-wysiwyg.js, вы можете найти некоторые коды, подобные этим:
Toolbar.find ('input [type = file] [data-' + options.commandrole + ']') .Change (... ... CommandRole: 'Edit',Другими словами, это свойство фактически реализовано для облегчения селекторов, что эквивалентно добавлению события слушателя к кнопке изображения.
Давайте продолжим изучать предварительный просмотр изображений WY. Первый шаг, как показано в приведенном выше коде, слушатель завоевывает событие изменения FileInput, ответов и вызывает функцию вставки.
RestoreSelection (); if (this.Type === 'file' && this.files && this.files.length> 0) {insertfiles (this.files);} saveselection (); his.value = '';Найти функцию вставки
insertfiles = function (files) {editor.focus (); $ .iphy (files, function (idx, fileinfo) {if (/^image///.test(fileinfo.type)) {$ .when (readfileintodataurl (fileinfo)). Dod (function (dataUrl) {execcommand ('unsertimage', datairl);}). Options.fileUploaderror ("file-reader", e); }Мы заметили, что он использует метод $ .deferred () jQuery, сначала называемый методом readfileintodataurl, а затем успешно выводит изображение в текстовое поле с помощью метода самостоятельно заинтересованного в ExecCommand. Эта картина на самом деле является тегом <mg>, но атрибут SRC - это изображение, представленное строкой. Таким образом, нам нужно на самом деле загрузить файл после запуска слушателя, получить SRC изображения, а затем передать ссылку на последующий метод execcommand.
Поскольку автор не очень хорошо знаком с отложением, он все еще использует более распространенный режим обратного вызовов
Соблюдайте метод вызова AjaxFileUpload:
$ .ajaxFileUpload ({url: ..., secureUrl: false, fileElementId: ..., datatype: "json", успех: function (obj) {...}, error: function () {...}});Существует два требуемых свойства, URL и FileElementId. Чтобы поддерживать правильность зависимости, не рекомендуется переписать AjaxFileUpload. Однако, поскольку элемент управления WY реализован слушателем, нереально передавать параметры с помощью функций, поэтому нам необходимо определить некоторые свойства для самого ввода, чтобы достичь нашей цели.
Добавьте некоторые свойства в файловом
<input type = "file" id = "pictureInput" name = "picture" data-role = "Magic-overlay" data-target = "#pictureBtn" data-edit = "insertimage" action = "..." />
Идентификатор используется в качестве FileElementId, и атрибут имени также необходим, главным образом для выбора фонового значения, действие - это URL, на который необходимо отправить изображение.
Определите функцию в Bootstrap-wysiwyg.js, вызванном uploadfiletoserver, формат функции заключается в следующем:
var oploadfileToServer = function (id, action, обратный вызов) {$ .ajaxFileUpload ({url: action, secureUrl: false, fileElementId: id, datatype: 'json', success: function (obj) {if (obj.status) {callback (obhexexcrecement inerseR-in ererseR-in ererser obj.message);Перепишите метод INSERTFILES следующим образом:
insertFiles = function (файлы, id, action) {editor.focus (); $. опции.В то же время, сделайте определенные изменения слушателю, чтобы получить необходимые атрибуты
toolbar.find ('input [type = file] [data-' + options.commandrole + ']') .Change (function () {restorySelection (); if (this.type === 'file' && this.files && this.files.length> 0) {insertfiles (this.files, $ (this). } saveselection ();В основном были добавлены две позиции параметров.
Таким образом, переписывание завершено. Обратите внимание , что чтобы убедиться, что правильное выполнение выполняется, пожалуйста, обратитесь к AjaxFileUpload.js перед управлением.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.