Golos Redactor

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Golos.io Редактор</title>
<style>
.drdrop {
    padding: 10px 0;
    border-radius: 5px;
}
body { font-family: Arial, Helvetica, sans-serif;color: grey; }
input,#text-editor {
    background: #f7f7f7;
    border: 0;
    box-shadow: inset 0 0 10px -5px black;
    color:black;
        padding: 5px;
    border-radius: 5px;
}
input#permlink {
    font-size: 15px;
    padding: 0 10px;
    height: 18px;
    border-radius: 30px 0 30px 0;
    margin-right: 10px;
}

#addimg.loading{
background:url(https://s3.postimg.org/ejg32n7er/loading.gif);
transition:2s all ease;
height:50px;
}
#addimg.loading.hasload{
background:#36c77f;
height:auto;
}

.drdrop span { background: #7aa8ff; border: 0; padding: 10px; color: white; border-radius: 3px; box-shadow: 0 0 16px -7px black; cursor: pointer; }
#text-editor img { max-width: 100%; height: auto; }#text-editor { background: #f7f7f7; min-height: 200px; border-radius: 5px; padding: 1px 10px; }.golos-form { padding:5%; }#alerts { background: #ff8282; color: white; font-size:18px; border-radius: 3px; }input#post-golos-title{width:100%;margin:10px auto;padding:5px;border-radius:5px;font-size:1rem}.golos-form .mce-panel{border-radius:3px;margin:10px auto}.golos-form input[type=submit]{cursor:pointer;background:#248eff;border:0;display:block;margin:20px auto;padding:10px;width:160px;border-radius:3px;color:#fff;box-shadow:0 0 10px -5px #000}</style>
<meta name="Description" content="Удобный редактор с хостингом фото для голоса">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="icon" type="image/x-icon" href="https://golos.io/images/favicons/favicon.ico"/>
<script async src="https://golos.rubtc.info/wp-content/plugins/golos/golos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

</head>
<body>
<div class="golos-form">


<form id="post-golos-form" enctype="multipart/form-data">
            <h2><label for="post-golos-title">golos.io редактор + хостинг фотографий</label></h2>
            <input type="text" name="post-golos-title" id="post-golos-title" required aria-required="true" placeholder="Заголовок">
            <p>golos.io/топик/@имя/... <input type="text" id="permlink" name="permlink" required aria-required="true"/> <label for="permlink">Вы можете задать ссылку для своего поста</label></p>


<div class="drdrop"><span id="addimg" onclick="document.querySelector('#loadinp').click()">Добавить фото</span></div><input id="loadinp" style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">
<div id="text-editor"></div>
<p><input type="text" id="topic" name="topic" required aria-required="true" placeholder="Главный Топик"/>  <input type="text" id="tags" name="tags" required aria-required="true" placeholder="Теги через запятую"/>
<input type="text" id="username" name="username" required aria-required="true"/ placeholder="Логин">
<input type="password" id="postingkey" name="postingkey" required aria-required="true" placeholder="Постинг ключ"/>
<input type="submit" value="Отправить"></p>
</form>
<div id="alerts"></div>
</div>

<script>
jQuery(document).ready( function( $ ) {
    tinymce.init( {
        selector:'#text-editor',
       theme: 'inlite',
  plugins: 'table link paste contextmenu textpattern autolink fullscreen',
  selection_toolbar: 'bold italic | quicklink h2 h3 blockquote',
  inline: true,
  paste_data_images: true

    } );
});


window.ondragover = function(e) {e.preventDefault()}
    window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
    function upload(file) {
        if (!file || !file.type.match(/image.*/)) return;
        document.getElementById("addimg").classList.add('loading');
        var fd = new FormData();
        fd.append("image", file);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "https://api.imgur.com/3/image.json");
        xhr.onload = function() {
            var imgurl = JSON.parse(xhr.responseText).data.link;
            var ed = tinyMCE.get('text-editor');                // get editor instance
            var newNode = ed.getDoc().createElement ( "img" );  // create img node
            newNode.src=imgurl;                           // add src attribute
            ed.execCommand('mceInsertContent', false, newNode.outerHTML)
            document.getElementById("addimg").classList.add('hasload');


        }
        xhr.setRequestHeader('Authorization', 'Client-ID 28aaa2e823b03b1');
        xhr.send(fd);
    }

// Запускаем функцию нажатием submit в форме #post-golos-form
jQuery( '#post-golos-form' ).on( 'submit', function(e) {
        e.preventDefault();
        // Записываем в переменные содержимое полей
         var t = document.getElementById("post-golos-title").value,
             // Вытаскиваем наш контент из редактора в переменную post_body
             post_body = tinyMCE.activeEditor.getContent(),
             k = document.getElementById("postingkey").value,
             u = document.getElementById("username").value,
             permlink = document.getElementById("permlink").value,
             topic = document.getElementById("topic").value,
             tags = document.getElementById("tags").value,

             jsonMetadata =  '{"tags":['+tags+']}',
             parentAuthor = '',
             parentPermlink = topic;

             console.log();

             steem.broadcast.comment(
                    k,
                        parentAuthor,
                        parentPermlink,
                        u,
                        permlink,
                        t,
                        post_body,
                        jsonMetadata,
                    function(err, result) {
                      console.log(err,result);
                      // В случае ошибок - отразим их под формой
                      if(err != null){
                      document.getElementById('alerts').innerHTML = ('<blockquote>'+err+'</blockquote>');
                      }
                    });

});


</script>
</body>
</html>