Kindeditor - мощный онлайн -редактор HTML с открытым исходным кодом, который поддерживает эффекты редактирования Wysiwyg. Он написан в JavaScript и может легко интегрироваться с несколькими различными локалами, такими как .NET, PHP, ASP, Java и т. Д. Официальный веб -сайт можно просмотреть здесь: http://kenderitor.net/index.php
Сам Kindeditor предоставляет много очень практических плагинов, и поскольку код является открытым исходным кодом, разработчики могут расширять и изменять его по мере необходимости.
Рассмотрим этот сценарий при редактировании контента веб -сайта с использованием Kindeditor: редакторы, как правило, копируют контент с других страниц или документов Word в редактор KindeDitor, а не пишут контент из чистого листа бумаги. Если копированный контент содержит изображения, вам нужно сначала загрузить изображение с адреса источника в локальную область и загрузить его на сервер, где находится этот веб -сайт, в противном случае изображение все равно будет указывать на страницу или документ, который вы скопировали, что приведет к правильному открытию изображения на странице. Редакторам часто приходится обрабатывать много документов, и такие операции, несомненно, очень громоздки. Может ли Kindeditor автоматически распознать контент, вставленное в него и загрузить изображение на сервер? Следующий код реализует эту функцию.
Для получения подробной информации о том, как использовать Kindeditor на странице, вы можете просмотреть официальную документацию на веб -сайте.
Основная идея реализации этой функции: добавить код в событие Keyup редактора Kindeditor, чтобы проверить, содержит ли редактор изображения; Узнайте изображения, которые необходимо автоматически загружать на сервер, вызовите программу загрузки изображения через AJAX, чтобы загрузить изображения на сервер; В функции обратного вызова AJAX измените адрес SRC соответствующего изображения на локальный относительный адрес.
Эта функция не поддерживает копирование и загрузку изображений в Word на сервер.
На картинке выше является конечный результат. Программа автоматически распознает контент в редакторе. Если есть изображения, которые необходимо загрузить, в верхней части редактора будет отображаться сообщение о приглашении. Когда пользователь нажимает на ссылку «Загрузка», программа вызовет программу загрузки изображения через запрос AJAX и изменит адрес SRC соответствующего изображения на локальный относительный адрес в функции обратного вызова.
Конкретные шаги реализации и связанные с ними коды:
1. Модификация редактора Kindeditor
Найдите файл kindeditor.js и добавьте пользовательский код в событие Keyup (). Код, предоставленный различными версиями Kindeditor, может сильно различаться и потребовать поиска с помощью официальных документов. Эта статья основана на версии Kindeditor 4.1.10.
2. Код файла Auto.js
function df () {var haspicContainer = document.getElementById ("has_pic"); if (has_pic" == null) { haspicContainer = document.createElement("div"); haspicContainer.id = "has_pic"; haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>You have an image that needs to be uploaded to Сервер </b> <a href = 'javascript: uploadpic ();' > Upload </a> </div> <div id = 'подтверждение'> </div> "; $ (". Ke-toolbar "). После (haspiccontainer);} var img = $ (". Ke-edit-iframe "). Contents (). Найти (" img "); var piccount = 0; var =" "; $ (img). (that.attr ("src") .indexof ("http: //")> = 0 || $ (img). $ ("#has_pic"). Hide (); bearefesend: function () {$ ("#upload") $ (". ke-edit-iframe"). contents (). find ("img"); это. href = 'javascript: closeUpload ();'> close </a> ");} else $ ("#enform "). Text (" upload не удалось! ");}});}$ (". ke-edit-iframe"). Содержание (). Найти ("IMG") используется для поиска всех изображений в контенте редактора. По умолчанию содержание редактора сохраняется в элементе iframe, который имеет свойство Class = "ke-edit-iframe". Программа будет определять, содержит ли значение каждого атрибута SRC «http: //» или «https: //», тем самым определяя, является ли изображение удаленным изображением или локальным изображением. Если изображение является удаленным изображением, uploadpic.ashx вызывается методом jQuery Ajax для загрузки на сервер. В то же время измените адрес SRC соответствующего изображения в функции обратного вызова.
3. uploadpic.ashx код файла
public class uploadpic: ihttphandler {public void processRequest (контекст httpcontext) {context.response.contenttype = "text/plain"; String pic = context.request.queryString ["pic"]; string [] arr = pic.split ('|'); string str = ""; Uploadimg st = new uploadimg (); for (int i = 0; i <arr.length; i ++) {if (arr [i] .indexof ("http: //")> = 0 || arr [i] .indexof ("https: //")> = 0) {string std = St.saveurlpics (arr [i], "..//uploads/image/"); if (std.length> 0) {if (i == arr.length - 1) strr += std; else strr + = std + "|"; }}} context.response.write (sstr); } public bool Isreusable {get {return false; }}} public class uploadimg {public String saveUrlpics (String imgurlary, String Path) {String strhtml = ""; string dirpath = httpcontext.current.server.mappath (path); попробуйте {if (! dirctory.exists (dirpath)) {Directory.createdirectory (dirpath); } string ymd = datetime.now.toString ("yyyyMmdd", dateTimeformatinfo.invariantinfo); dirpath + = ymd + "/"; if (! dirctory.exists (dirpath)) {directory.createdirectory (dirpath); } string newFilEname = datetime.now.toString ("yyyyMmddhhmmss_ffff", datetimeformatinfo.invariantinfo) + imgurlary.substring (imgurlary.lastindexof (".")); Webclient wc = new WebClient (); wc.downloadfile (imgurlary, dirpath + newfilename); strhtml = ymd + "/" + newFilename; } catch (Exception ex) {// return ex.message; } return strhtml; }}Удаленное изображение загружается в относительный путь сервера "/uploads/image/" с помощью метода WebClient, а папка и соответствующие имена файлов будут автоматически генерироваться в соответствии с датой. Возвращенный результат содержит локальные относительные адреса всех изображений, разделенных «|». В функции uploadpic () файла Auto.js на шаге 2 успех метода обратного вызова получает значение и анализирует его и назначает адрес атрибуту SRC соответствующего изображения.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.