bugfix> javascript > 投稿

私はテキストエディタを作成していますが、修正方法がわからない小さな混乱を除いて、これまでのところすべてが素晴らしいです。

テキスト領域に挿入されるタグに、ユーザーが選択した色の値を取得する必要があります。

JSFiddleの使い方はよくわかりませんが、共有できると思います。https://jsfiddle.net/ElenaMcDowell/mh9rfwct/

<script>//Color picker
//color picker
var theInput = document.getElementById("colorChoice");
var theColor = theInput.value;
theInput.addEventListener("input", function() {
document.getElementById("hex").innerHTML = theInput.value;
}, false);
//Tags
function btnEditor(h, a, i) { // helloacm.com
    var g = document.getElementById(h);
    g.focus();
    if (g.setSelectionRange) {
        var c = g.scrollTop;
        var e = g.selectionStart;
        var f = g.selectionEnd;
        g.value = g.value.substring(0, g.selectionStart) + a + g.value.substring(g.selectionStart, g.selectionEnd) + i + g.value.substring(g.selectionEnd, g.value.length);
        g.selectionStart = e;
        g.selectionEnd = f + a.length + i.length;
        g.scrollTop = c;
    } else {
        if (document.selection && document.selection.createRange) {
            g.focus();
            var b = document.selection.createRange();
            if (b.text != "") {
                b.text = a + b.text + i;
            } else {
                b.text = a + "REPLACE" + i;
            }
            g.focus();
        }
    }// helloacm.com
}
</script>

そしてHTML

<div class="fonts-box fonts-color" style="text-align: center;">
            <form>
                <input type="color" value="" id="colorChoice">
            </form> 
            <p id="hex" style="padding-bottom: 3px;"></p>
            <button id="colorSelect" onclick="btnEditor('ECEditor', '[color=#VALUEHERE]', '[/color]');">Select</button>
</div>
<textarea id="ECEditor" class="editor-textarea" name="editor-text"></textarea>

回答 3 件
  • function btnEditor() { 
    var but = document.getElementById('wrapper')
    var color = document.getElementById('colorChoice').value
    console.log(color)
    but.innerHTML = '<button id=\"colorSelect\" onclick=\"btnEditor(\'ECEditor\', \'[color=' + color + ']\',\'[/color]\');">Select</button>'
       
    }
    /*
    this answer
    <button id="colorSelect" onclick="btnEditor('ECEditor', '[color=#000000]','[/color]');">Select</button>
    your request
    <button id="colorSelect" onclick="btnEditor('ECEditor','[color=#VALUEHERE]','[/color]');">Select</button>
    */
    
    
    <div class="fonts-box fonts-color" style="text-align: center;">
                <form>
                    <input type="color" value="" id="colorChoice">
                </form> 
                <p id="hex" style="padding-bottom: 3px;"></p>
                <span id = 'wrapper'>
                <button id="colorSelect" onclick="btnEditor();">Select</button></span>
    </div>
    
    

  • これはどうですか?説明が必要な場合はお知らせください。

    //color picker
    var theInput = document.getElementById("colorChoice");
    var theColor = theInput.value;
    theInput.addEventListener("input", function () {
      document.getElementById("hex").innerHTML = theInput.value;
    });
    //Tags
    function btnEditor(h, a, i) {
      document.querySelector(`#${h}`).innerText = `${a.slice(0,-1)}${theInput.value}]text${i}`
    }
    
    
    <div class="fonts-box fonts-color" style="text-align: center;">
      <form>
        <input type="color" value="" id="colorChoice">
      </form>
      <p id="hex" style="padding-bottom: 3px;"></p>
      <button id="colorSelect" onclick="btnEditor('ECEditor', '[color=]', '[/color]');">Select</button>
    </div>
    <textarea id="ECEditor" class="editor-textarea" name="editor-text"></textarea>
    
    

  • const getCurrentColorPicker = () => {
      return document.getElementById("colorChoice").value;
    };
    function btnEditor(h, a, i) {
      console.log(getCurrentColorPicker());
      // helloacm.com
      var editor = document.getElementById(h);
      editor.value = a + getCurrentColorPicker() + i;
      // other code...
    }
    
    

あなたの答え