software:development:web:docs:web:wysiwyg:sceditor_upload_image
Содержание
SCEditor upload image
Для вставки изображения достаточно вызвать метод `.bashrc` wysiwygEditorInsertHtml()или даже просто insert()использовать его в экземпляре редактора. insert()Метод `.bashrc` принимает BBCode, если используется плагин BBCode, в противном случае он принимает HTML.
Настройка редактора и формы загрузки
<script> $(function() { $("textarea").sceditor({ format: 'bbcode', style: '/minified/themes/content/default.min.css', }); // Сохраняем этот экземпляр редактора, чтобы iframe мог получить к нему доступ window.sceditorInstance = $("textarea").sceditor("instance"); }); </script> <textarea></textarea> <form action="https://www.imageshack.us/redirect_api.php" method="post" enctype="multipart/form-data" target="upload"> <p><label>Изображение: <input type="file" name="media" /></label></p> <p><label>Изменить размер изображения? <input type="checkbox" name="optimage" id="optimage" value="1" checked onclick="optsize.disabled=!this.checked"></label></p> <p><label>Размер: <select name="optsize" id="optsize"> <option value="resample">оптимизировать без изменения размера</option> <option value="100x100">100x75 (аватар)</option> <option value="150x150">150x112 (миниатюра)</option> <option value="320x320">320x240 (для веб-сайтов и электронной почты)</option> <option value="640x640">640x480 (для форумов)</option> <option value="800x800">800x600 (15-дюймовый монитор)</option> <option value="1024x1024">1024x768 (17-дюймовый монитор)</option> <option value="1280x1280">1280x1024 (19-дюймовый монитор)</option> <option value="1600x1600">1600x1200 (21-дюймовый монитор)</option> </select></label></p> <input type="hidden" name="key" value="DEVELOPER_KEY_HERE" /> <input type="hidden" name="rembar" value="yes" /> <input type="hidden" name="error_url" value="https://example.com/imageshack-example.html" /> <input type="hidden" name="success_url" <p><input type="submit" value="Upload" /></p> </form> <iframe style="visibility: hidden; height: 0; width: 0" id="upload" name="upload"></iframe>
imageshack-example.html — страница, на которую осуществляется перенаправление через API ImageShack. Это приведет к вставке HTML-кода или отображению сообщения об ошибке.
imageshack-example.html
<script> // Парсер строки запроса, источник: http://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/ var queryString = {}; window.location.search.replace( new RegExp("([^?=&]+)(=([^&]*))?", "g"), function($0, $1, $2, $3) { queryString[$1] = $3; } ); if(queryString.url) { var img_url = "https://" + queryString.server + ".imageshack.us/img" + queryString.server + "/" + queryString.bucket + "/" + queryString.filename; var html = "<a href=\"" + queryString.url + "\">" + "<img src=\"" + img_url + "\" alt=\"Uploaded Image\" />" + "</a<"; // Этот метод вызывает wysiwygEditorInsertHtml в родительском окне // экземпляре SCEditor parent.window.sceditorInstance.wysiwygEditorInsertHtml(html); } else if(queryString.message) alert(queryString.message); </script>
После отправки формы изображение будет загружено в ImageShack через iframe. После загрузки ImageShack перенаправит пользователя внутрь iframe на страницу с imageshack-example.htmlфайлом, где будет осуществлена вставка изображения или отображено сообщение об ошибке.
Только авторизованные участники могут оставлять комментарии.
software/development/web/docs/web/wysiwyg/sceditor_upload_image.txt · Последнее изменение: — VladPolskiy
