Javascript 获取标记中的颜色选择器值

我正在创建一个文本编辑器，到目前为止，一切都很好，除了一个我不知道如何修复的小混乱

我需要将用户选择的颜色值输入到插入文本区域的标记中

我真的不知道如何使用JSFIDLE，但我想我可以分享它：

//颜色选择器
//颜色选择器
var theInput=document.getElementById（“颜色选择”）；
颜色变量=输入值；
addEventListener（“输入”，函数（）{
document.getElementById（“hex”）.innerHTML=输入值；
}，假）；
//标签
函数btnEditor（h，a，i）{//helloacm.com
var g=document.getElementById（h）；
g、 焦点（）；
如果（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、 选择开始=e；
g、 selectionEnd=f+a.length+i.length；
g、 scrollTop=c；
}否则{
if（document.selection&&document.selection.createRange）{
g、 焦点（）；
var b=document.selection.createRange（）；
如果（b.text！=“”）{
b、 text=a+b.text+i；
}否则{
b、 文本=a+“替换”+i；
}
g、 焦点（）；
}
}//helloacm.com
}

还有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>

挑选

函数btnEditor（）{
var but=document.getElementById（'包装器'）
var color=document.getElementById（'colorChoice'）。值
console.log（彩色）
but.innerHTML='Select'
}
/*
这个答案
挑选
你的要求
挑选
*/

挑选

嗨！抱歉，那样的话，颜色就不会出现在标签[color=#colorcodehere]文本[/color]中，我需要把它放在那里（更新的答案！感谢您的帮助，但这不是我想要做的。我需要的是将颜色代码放在[color=]标记内，即文本区域中用户选择文本部分的位置。）（好的，您只需要修改innerHTML。我再次更新了它，向您展示了如何进行。我不知道我做错了什么，但它不起作用。）（您正在寻找文本字段，文本颜色由单击“是”输入时选择的颜色设置？因此，当用户在文本字段中键入颜色时，他们选择的颜色将用于文本？是的，我试图让用户选择文本的颜色，但仅是他/她选择的文本的一部分，而不是整个文档。您好，谢谢您的帮助。）帮助。该代码不会将颜色代码放在标签内，而是放在标签外，并替换文本区域内的文本，而不是像现在这样包装文本。：（我更改了答案。问题已经解决了？我不确定我做错了什么，但仍然不能正常工作。：（事情是这样的：很遗憾，我不知道你到底想要什么。但我仍然对代码进行了更改。请点击此链接。

<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>

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...
}