Инструменты пользователя

Инструменты сайта


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

Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki