Question

我想在Javascript中创建一个简单的文本编辑器。我面临的挑战是：我的文本编辑器上方的按钮应该根据DOM的内容进行调整。例如：如果光标在我的文本编辑器中的标签内，则只有按钮＆＃39; li＆＃39;应该显示。

我已经创建了一个内容可编辑的div＆＃39;但我不知道下一步该在哪里看。有人能帮助我一些想法吗？如果我可以在现有JS文本编辑器的帮助下完成此操作，请说。

<html>
<head>
    <style>
        #textEditor {
            border: 1px solid black; display:block; width: 300px; height: 200px;
        }
    </style>
    <script>
        var options = ['ul','div'];
        var subOptions = {
            'ul':['li'],
            'div':['div','span', 'p']
        };
    </script>

</head>
<body>
    <div id="textEditor" contenteditable="true"></div>
</body>
</html>

Answer 1

我使用唯一的javascript创建一个简单且丰富的文本编辑器。特别是我为powerBI自定义视觉创建了此图像。您可以在任何项目中使用它。

UISceneActivationStateForegroundActive

    function chooseColor(){
      var mycolor = document.getElementById("myColor").value;
      document.execCommand('foreColor', false, mycolor);
    }

    function changeFont(){
      var myFont = document.getElementById("input-font").value;
      document.execCommand('fontName', false, myFont);
    }

    function changeSize(){
      var mysize = document.getElementById("fontSize").value;
      document.execCommand('fontSize', false, mysize);
    }

    function checkDiv(){
      var editorText = document.getElementById("editor1").innerHTML;
      if(editorText === ''){
        document.getElementById("editor1").style.border = '5px solid red';
      }
    }

    function removeBorder(){
      document.getElementById("editor1").style.border = '1px solid transparent';
    }

body {
    font: 400 16px/1.4 'serif';
    }
#container #containerHeader{
    text-align: center;
    cursor:move;
}
#container #editor1 {
    border: 1px solid grey;
    height: 100px;
    width: 602px;
    margin: 0px auto 0;
    padding:10px;
   }
#container fieldset {
    margin: 2px auto 0px;
    width: 600px;
    height:26px;
    background-color: #f2f2f2;
    border:none;
}
#container button {
    width: 5ex;
    text-align: center;
    padding: 1px 3px;
    height:30px;
    width:30px;
    background-repeat: no-repeat;
    background-size: cover;
    border:none;
}
#container img{
      width:100%;
}
#container .bold{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJmSURBVHic7drPi05RHMfx18igGaaJzbAQShby22ZYKBb+CKyMJTsryo/IQigWUjbKnoWVpJSy8TOpIckCC0Xj1zTKGItLWcyZnmbuuY/z+L7rbO73PN/P93y65z73nHsIgiAIgiAIgiAIgiAIgiD43+lqSGc+1qB3Gr/9gfd4h5E6i/oX2YdRTNTQnuA4Fjc6gobYqLoz6jDq7/YVxzC7uaHk57D6jfq73cLCpgYzK3P+RZnz78ANzM2sg/xmNcEgLjQh1AlmwRA25RZpl1nXVa8trbYB7MbLRL4uHMlbcn7OmfzBfG2a+frxKJHzO/pmWO+UlDYNR1RTbjLmYHtO8dLMggd4nogtyylcolnwKnF9IKdoqWb1J65/yilaolkLsSERe5tTuESzjmJeInY3p3BJZvXgDPYn4k+ln2W10K5V+3pcarFvN5ZgCxZM0e/sTItqN6mX0rrbYw3MkpKmYYrP2IWfuYU6wayTeNaEUCeYdQhrmxDqBLP6cFW1NsxKu/4NX+Nmi327VcuYrdK7CmuwFxdnXFkbqXOLpgenE/km8KKGeqekpGk4ioM4n4ivxOqcBZRk1h+OYSwRG8wpXKJZH1W7pZOxPKdwiWaR/ozfnVO0VLNWJK5/ySlaolmbsSoRG84pXJpZ/biciI3jTk7xEszqUp2a2YP7WJfod1t1NKlYmtqimcC23IMp4c5qhSsyT0E6w6yHONCEUG6zPmTOfw87VRuAxZPr5N8YTmlgW6ZphvBNPSYN4wSWNjqC3zR1WrlXtZs5ndPK46rp/Ea1LgyCIAiCIAiCIAiCIAiCIAjaxi96FfJoiZEgRAAAAABJRU5ErkJggg==');
}
#container .italic{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGDSURBVHic7do7SgRBFEbh0z5BwUhQTMxEMDAXQ1EXIS7AHehWBBMznQ0YizsQJhBfiIGB4Rjo4BiMRnZD11BV3eL5oNJbdS/VfyUNkiRJkiRJkvTfFU0f4Ns8sAZMRqr3AnSBfqR6rTABnACDBOsZ2MjXSnoHpBnUz3oApmIddixWoRFtJ66/DKzGKtb0sN4y7NHLsEcWW6T9DK9ozyMWxT5wC3wSb0g94BxYyNhHoxaBd8qH0WnwXK10RPXNSf0w/CkFcEP5oO5o/mFqlR2qb9Vhg+dqpQ7lg/oAlho8V+sY7AEM9poM9gAGewCDvSaDPYDBXpPBHsBgD2Cw12SwBzDYazLYAxjsAQz2mgz2AAZ7TQZ7AIM9gMHOMLTPgFeqb07o6gPXwF7GPpIrgEviDals7WbrJrEV0g5qAJxm66ZEzFdnJmKtKrMZ9qgUc1hd4ClivTIXietntcnwX84Un+AxMJ6vld9S/Og1DawDc5Hq9YF74DFSPUmSJEmSJEnSyL4AJ3NtCSNV9DYAAAAASUVORK5CYII=');
}
#container .underline{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJhSURBVHic7drNahNRGMbxfw1WLBaiVtSioLiQrHSpWxERxAvQCxDcqjdRRBBX4qbriis3ikLxAhR3UhRcKC3FD6wgtmJ1XJwUnGTONCd5z5yZ8PzgUEjI+57zdD6SmQERERERERERkaaZAuaAd90x132taT0qMQ9kPWO+gT2i2wls0L+QTWBPg3rk7IhRFJgFdhW83gL2N6hHTqywJoZ8r249cmKFNZYUVgCFFUBhBVBYARRWAIUVQGEFUFgBFFYAhRVAYQVQWAEUVoBYYW2UvLfXqEfZNaufRj1yYoW1hrtqWeSIUQ9fnb/Ad6MeOTG3rI+e984Z9fDV+QD8MupRmUf0Xx/PcIuZHLH2JO6fUVR/YcTaXjEP8M88rx8Fro1Y+zr+3dDXt9b2UXz3JQO+ASeHrNvBHZOK6q5jdwKp3D2KF5UBb4FjgfWO426m+mretZh0KgfwbwUZ8Am4NGCty8DnklprwIzh3JO4hX+BW2MRuAK0ez7bBq4CLwaocSPuMqoxATxk+8VujVXgTffvoJ9ZINK9whSmgFcMvviQ8ZKGPgxSZhp4jG1QT+nfdcdGC7gN/GG0kDZxjxe1qp1+Gh3CjmP/j+fAqeqnnN5Z4AGwTHlAy8B94EyaaTp1OoOcwH2rn8U9e/UbWAGWgPcJ5yUiIuMuxtlwGjgNHIpQe1CrwGvgR8I5bOsC8JU4vwFDxxfgfNzlDm83YVcKqhgrFD/+PRTLa/Ad4KBhPQuHcfMyYRlWlHt1Buo6LxZJv+v1/ug2Y302bAN3gIu4Y1gq68AT4CY13rJERERERERERJx/gYhfcxk8X00AAAAASUVORK5CYII=');
}
#container .align-left{
    background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA1CAAAAAAsDUmHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+MIHAYHAD13ih8AAAIrSURBVEjHzZaxTxRBFMa/N7OH0FJqSwnChsTYnomKnJUKFOo1JrbGwpBYmwCV0X9AvMRK1IJ4OTtjYyCQ44xWtNpaa9x5z+IIt7vHbGYeV3DlJvfLm2++b76XCEb2S3DGWeJIRxBLJZboJxShAkvo94uuajBJH00ewZIj1J8bu4Y1LLPd/jLRh/VZLtnaPacTjGp7b5suyev1C5zp5CL8LGhPuASnFJ9xGXm9rNRXN0QVAZInV8Tm75FkfeWHSi+eTkueAHGaKv3Fpux7w6xDGTOcx8G3EeQx5m+WKlgiUZZgkJ9Ff9/sB9+jzN8dF/KwhOR2OzyPhrc+mmFYn8X2fXuMw8VPOu+W2HrmwmFUHhMcQjxnJMyAasEZIuAifHpZaTRbMXrduwnru0fCq5WDYL14bqHKq4LFxRh/SZW/yEU8OWQrMwR72jjmWE65DQxmHORRPRdT+S2UT10dKr1a6m2hB5vKfuTm60LXOtveTEj1GJJpLTeczefxG/BPe3u9hhTyOAWj7EeDqUI/Gtxa6Cj1yq7dgcnPJeZDq6vSi9P7pqA9SMYeqv011LXItKyhvRB0+s11QIjp7ZN7+ZjFUb19Ys8cZ9v0voejpmcr3kKhp2sU3h2yuu7tWmc/r8WckTeu1523H3dgI/JY46918ep1HiYJP6PBBa/2Fksv9yL6MZtf9vYjyXjneS+8H2cfT3i1B8nksxiLS2U/ShaxRkvlXjjaPOJMsf4DQ22vjD/V/uUAAAAASUVORK5CYII=');
    width:40px;
}

#container .align-right{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA1CAAAAAAsDUmHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+MIHAYOC3tn6N4AAAIsSURBVEjHzZexaxRBFMa/NzMXkzaltimjcQmI7QlqzFmpSQr1GsFWLCRgLSSpRP8B44GViRYhx9mJjRgi54lWabW1VtyZZ5GAM7uZZeYlRbbchY8337zf+94axrE9Bidciy3JFFhTRYvlFTJToMX069lQVBgXDyYPxMyB1O9rO8pJtNRW/8PEvti+ljUbO6dkhlFr93XXGt+vn3ClzC7Cj8B7wgVYofkOF+H7pbm9vMYiBIgfXWLt3yPx6tJ3kV9uuqj0BMgVhbC/nKr2vXJOJqVUncf/746VbbY5EjUeQ8Cy2sOB4lr059Xn5Dvl2dvjAY/BR+Kb/XQ2ldvYVj6PQcn6TX/MpV+EGWwuOB2pC3tZbBrsgSNnJJwFtZJ5IuAcYn5p7nR7OX7duQ4du0fCi6UvyX6583NNvcqYn8/pL27qL7IZ44d0I0PQR+TRCreBel3MsloAOKrOQn43lEkVlytzguneujAfXfdlwLbV/XVDomFIqrfYsR6PjK/AX9kZDUYdn0fCFJQwHxWmAh4VbswNhH6VV25B+XWxetsbivxyxV0VzlXisfvi/qplLUqpVj2H6Oib6+EKORl+WG77UlkZXt8nvIfV6Fu61PRMwyxkerxC6dnBy6vRrLX6/UrOGd3a1baN5uMn6Aw2W+5jm6N+nYYy6WdUOBP1XmPh+W5GPpazi9F8JB4fPB2l5+PMw4mo9yCefJLT7tyYj1xmrNTcuBdK2Typ/7X/ACjdr4z8YnCHAAAAAElFTkSuQmCC');
    width:40px;
}
#container .align-center{
    width: 38px;
    background-size: contain;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAABGdBTUEAALGPC/xhBQAAADRJREFUOBFjYGBg2ArE/6mEtzIBDaImADlsCAJSwhSkFgVQGoYjIMwIpdfRdAhJUYMrHQIAWPdBdW2q70gAAAAASUVORK5CYII=');
}

#container .redo-apply{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKJSURBVHic7du7axRRGIbxn260MELQIoIIFjYBa01lI0btFVEQRBtbSeEFUmhnbeEfoOK1EkQQKxsLUbH00gQLxesuRBANMRZrIJHd2T3jzsyOfA98zdnZc9555sxyZnaGIAiCIAjqw2HcwTXsrjjLUHMBi8vqF85UmmhIWY95K2Ut1dkKcw0lEzqLCmEdWINPQljfHMCCENY3x/UWNlNZuiEkhCUSwhIJYYmEsERCWCIhLJFShK361w56MIot2IS1BY91DEd7bHMOFwvOkcQmnMZjvY92FTVd3K73zyjOY071QrLqJ7YXo6A/tuKF6kX0W6fy7ORIni/9xQQeYXwAfZVFq4pBN+C16mdKSr37k7t0bucIW2W1MFmIiR5Mat8LzzqC09iGRsFZRrT/zOglamfBObpyLyPYA4yVlKMfUU0VihrDjy7BnmNdSTmGXhQc6hBqqXaVlKFfUTtKytOVGZ3DvSlp/NqIgss6B7xVwtgNXO8yfqE/5nkXpd3WKc28QfpkBDdwMGObJvbi6aAHXz3g/hYH3N9yGrgiW1QL+xUgisHLKooGruJIxjYt7MOTokIM4tqwDC7JFtXEFJ4VGaIOM2scJzM+L0UU9ZhZ47pfLjWxR3shXDh1mFmv8KFD+1cliqIesuZxAt+Xtc0qWRT1OA3hvvbdiynt29YP8a3sEHWRBe+111mVUYfTcGgIWQmErARCVgIhK4GQlUDISiBkJRCyEghZCYSsBEJWAiErgZCVQMhKIGQlELISCFkJhKwEQlYCISuBkJVAXlkLXdqLfOSocvLKetmlfTZnf/81m/HRykcT32JjlaGKJu/D/HO4qf2+4hfc1X5B8vOAcgVBEARBMJT8BsNk0YqzYcGdAAAAAElFTkSuQmCC');
}
#container .undo-apply{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALFSURBVHic7ZzPi05RGMc/M0aSJDZMUXaSlB3T+DGkWCgW2Cn+AYVsSBo/xm78LpoihcmUlIXyIxbWYolSQ7IgeY0fM2Te1+JsmO499zz3fZ97jvF86mxuvef53k/nvfe8z729YBiGYRhGHLYCQ8A1YEPkLMnSBpwDGhPGrpihUiRPVAN4FzFXcrQBZ8gW1QDqwPRo6RLjFPmiGsDTeNHSoh+/qFGgK1q6hOjDL+oHsClauoQ4jokK4hgmKoijmKggjmCigujFRAVxGBMVxH7+E1EdTX7+AG6L4OMsMAasb7JWFp+AYeCjwtwtZS/+FVXleA1cBjYC7ZonXYYlwE/iS8oaL4EduB/vSbCH+FKKxmNgYStPuuyS/dzKEEqsxHUz1sYOMhvXsIu9ekLGGO5aFpXlQI34MkLGV2CZjoZwVuC+kr6gQzS/RcliKrAA2A7cAH4V5HgBzFDIIaKLYmGDwBTlHIuBRwU5+pQzBNENjOAPehV9YR3ARU+G78Bc5QxBdANf8Au7gv6msR245cnQq1w/mFUUC7uEvrBZwIec+q+Ua4tYjbv7+IQNoL/D3uepv0i5tog1FAu7gK6wecB4Tu3knoD3AN/wCzuPrrAnOXVPKNYsTcg17DR6wm7m1BxQqtc06yheYQeVaudtIwbLTFZF7+chsBn35DmPQ7g7WKupt3KyqhplD/ALmwbMryhLaarsKt4HtuC6ABMZIbH9TxZVt2Dv4YTV/jhWB3aTLTEpNLoBRdwFlgLbgJnAbeBZhBxiYsgCeAucjFS7NMk9CUkZkyXAZAkwWQJMlgCTJcBkCTBZAkyWAJMlwGQJMFkCTJYAkyXAZAkwWQJMlgCTJcBkCTBZAkyWAJMlYLLLGs853igz2WSX9Tzn+HCVIf4V5gBv+Pt1o/dAZ5nJtF+1js0ocB0nqQbcAXZi/31jGIZhGCX5DTQy/pTFeqp6AAAAAElFTkSuQmCC');
}
#container .unorderedlist{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI0SURBVHic7dq7axRBGADw30UloEaICAbBQoVgwEcvKWx8gEh6sUqhf4jYaauFVtFGwUK00MrOR2ER8ZFCFBUj+ERFET2NxSgiZHbv9kJul3w/+JrZb4eZ79i527khhBBCCCGEEEIIIYQQlrpWBzkbMIIZfO0gfznGsL6HcS22H3iAt1U7aOEUfmIOH3Co5J5xzP7Jb2KcxbIu6wQOz9PZN2zJ5A/ieQ0m3GsczRVkoKBYE5mC7M/kj2FjQX9NsS93oahYnzPtnzLtnaxnTfClyk27/Fuv/sYrDGfyW7ipP4/OQsaeKsUiPYrT+Igb2FmSP4JL0qfT70l3E7/wWFqnQwghhBBCqK+y/awhHMEo7mAK7ZJ7DmA31vQ6uEU0J/2Cn8LrKh2sxVP/vxZcUVzgYxb/VWUhY1ba7Oza8UyHuRfNdfhegwn3GidyBSnaotmRad+ead+MFQX9NcXW3IWiYk1n2u9l2p9Ie9lNN1PlpvnWrMuW8JrVybfhpPSI3cYFae+nyEFpa7Zpj+RLnMabfg8khBBCCCGEyiZwF+9xDdtK8kdwEe/0/9Wlm2jjvh7+ka5y1uFWDSbea+ytUqzzmc4mM/mjNZjoQsS5XEGKtmiGMu2rM+0rC/pqklW5C0XFujpPWxvXM/mP8KKLQdVVbn6FBnBSKtCcdKa0bAEcl7Y6+v0oVY0zCs6UdnJaeRib8FA6U1pmUDrH1aR/d9rSRuezfg8khBBCCCGEEEIIIYQQ6u03kq1rwGv96WIAAAAASUVORK5CYII=');
}
#container .orderedlist{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJDSURBVHic7dq9TxRBGMfx7x2KQfSQzhCICRgSk9OKBgobwY6KhARLC/4CaioKqAQLGwtfao0k0BITNbGSoFEIEBrsjAQTCETepJi7gMfOvrl7Oye/TzLNZGb3mefYJfPsgIiIiIiIiIiIiMh5lws57gJQBLaAtZBzmoHbQH2MuLLyE/gG7Me9QBFYBf6U2nvgus/4HPAYODo1p5baD6A3Rp7IAV89LvjaZ84DBxacRMKuRE3WTcvFdjGPppfnDiw2iXa3cmH5gGTtlCZWOsA8ZrY5/4NY65jmbNYf+YzvpnbfV+X2GaiLniooAE+BX5hneRz7I1g2ACwDhw4sPErbBWaAtqhJEhERERGpirD1rKiuAQ+BdmAeeInZT/q5B9wvzc3KNvABeFOtGzYDK/y9jZjDf681QjbbG1ub/McchDZqCWDQMr6Bk+qGK+0QuFEZaFCJJo6ipf+Opb8NkzCX5IFOr86kLVr6lyz93zG7fZccYaomqWvCJOb0n/U7/D9c1MQ7K63/hgVgGFOW/gS8APYC5vQB/cCllGIK4wB4C7zKMAYREREREfcVgGfAJrAOjBF8rmsAWMDsDJLa5mxijis4/UV6hrOBT/iM7yHd8xRfCD6ikIkWvAPewL53fWKZk2TrqrxpGiWaqBot/Vex/7qXU4ql2veIzHa6cNZnzpDH+CRbrJN/1XILU2wrB/uR4HOrU6Tz3rKeKU2rnhVHHlOS/s3JB48grUAHcDGhGLYxB9lcq9yKiIiIiIiIiIiIOOIYaxc11Cpvh4UAAAAASUVORK5CYII=');
}
#container .strikethrough{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAAAmJLR0QA/4ePzL8AAABFSURBVEjHY2AY2eAww38i4GHsmv8TCXFqxmYYPjVIzj5MUPNhXM7G5Q2ywKhm2mo+TG7ipFjzYAGjiYTs8uwwHTUPZwAAW5aYHd3noZcAAAAASUVORK5CYII=');
}
#container .color-apply{
    width: 20px;
}
#container #input-font{
    width: 100px;
    height: 25px;
}
[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text);
    color:#888;
}
#container .loader {
    border: 6px solid #f3f3f3; 
    border-top: 6px solid #3498db; 
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    line-height: 20px;
}

/* @keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} */

Answer 2

试试这个简单的文本编辑器：

<div class="hb-editor">
  
    <div id="editor-element"></div>

    <textarea id="editor" class="hb-text-editor" style="direction: ltr;"></textarea>

    <div id="editor-view-raw" style="margin: 15px; display: none;"></div>

</div>

$(document).ready(function(){

    let editor = new TextEditor(
        '#editor',
        '#editor-view-raw',
        '#editor-element'
    );

    editor.start();

});

Screenshot

访问https://github.com/Ho3ein83/texteditor了解更多

Answer 3

实施您自己的javascript文本编辑器非常具有挑战性，我建议您查看medium editor

如果您真的想构建自己的，并且想知道用户光标所在的元素。您需要使用selection API，这些API总体上支持great个浏览器。

Answer 4

您可以创建一个内容可编辑的html元素，以便用户可以对其进行编辑。

 public Account create(AccountCreateRequest request) {
    Optional<Long> customerId = accountMapper.checkIfCustomerExist(request.getCustomerId());

    if (customerId.isEmpty()) {
        Account account = Account.builder().customerId(request.getCustomerId()).country(request.getCountry()).build();
        accountMapper.saveAccount(account);
        List<Balance> balances = request.getCurrencies().stream().map(currency -> Balance.builder()
                .currency(currency)
                .amount(BigDecimal.ZERO)
                .build()).map(b -> b.setAccountId(account.getAccountId())).collect(Collectors.toList());
        balances.forEach(accountMapper::saveBalance);
        account.setBalances(balances);
        return account;
    } else {
        throw new RuntimeException("Account already exist");
    }
}

Answer 5

此代码与“简单文本编辑器”有关。此html代码提交给upload.php。

此js代码将<div id="editor1" contenteditable="true"></div>键入的内容转换为<textarea id="my-textarea" name="t" style="display:none"></textarea>的值。：

 function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("editor1").innerHTML;
    }

当此按钮单击<button class="fontStyle save" onclick="save()"><save>fas fa-save</save></button>会将相关数据从此代码定向到upload.php。：

function save() {
  getContent();
  document.getElementById("save").submit();
}

源代码为Editor.html：

<html>
<head>
    <style>
body {
    font: 400 16px/1.4 'serif';
    }
    
#container #containerHeader{
    text-align: center;
    cursor:move;
}
#container #editor1 {
    border: 1px solid grey;
    height: 80%;
    width: 80%;
    margin: 0px auto 0;
    padding:10px;
   }
#container fieldset {
    margin: 2px auto 0px;
    width: 80%;
    height:10%;
    background-color: #fafafa;
    border:none;
}
#container button {
    width: 5ex;
    text-align: center;
    padding: 1px 3px;
    height:30px;
    width:40px;
    background-repeat: no-repeat;
    background-size: cover;
    border:none;
}
#container img{
      width:100%;
}

    </style>
    <script>
    
    
    function chooseColor(){
      var mycolor = document.getElementById("myColor").value;
      document.execCommand('foreColor', false, mycolor);
    }
    
    function backColor(){
      var nColor = document.getElementById("nColor").value;
      document.execCommand('backColor', false, nColor);
    }

    function changeFont(){
      var myFont = document.getElementById("input-font").value;
      document.execCommand('fontName', false, myFont);
    }

    function changeSize(){
      var mysize = document.getElementById("fontSize").value;
      document.execCommand('fontSize', false, mysize);
    }

    function checkDiv(){
      var editorText = document.getElementById("editor1").innerHTML;
      if(editorText === ''){
        document.getElementById("editor1").style.border = '5px solid red';
      }
    }

    function removeBorder(){
      document.getElementById("editor1").style.border = '1px solid transparent';
    }  
    
    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("editor1").innerHTML;
    }
    
    function save() {
  getContent();
  document.getElementById("save").submit();
}
    </script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
    
</head>
<body>
  <div id="container" >
    <fieldset>
      <button class="fontStyle cut" onclick="document.execCommand('cut',false,null);" title="cut(Ctrl+x)">&#xf0c4;</button>
  <button class="fontStyle copy" onclick="document.execCommand('copy',false,null);" title="copy(ctrl+c)">&#xf0c5;</button>
  <button class="fontStyle italic" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text">&#xf033;</button>
  <button class="fontStyle bold" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text">&#xf032;</button>
  <button class="fontStyle underline" onclick="document.execCommand( 'underline',false,null);"> &#xf0cd;</button>
  <select id="input-font" class="input"  onchange="changeFont (this);">
    <option value="Arial">Arial</option>
    <option value="Helvetica">Helvetica</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Sans serif">Sans serif</option>
    <option value="Courier New">Courier New</option>
    <option value="Verdana">Verdana</option>
    <option value="Georgia">Georgia</option>
    <option value="Palatino">Palatino</option>
    <option value="Garamond">Garamond</option>
    <option value="Comic Sans MS">Comic Sans MS</option>
    <option value="Arial Black">Arial Black</option>
    <option value="Tahoma">Tahoma</option>
    <option value="Comic Sans MS">Comic Sans MS</option>
  </select>   
  <button class="fontStyle subscript" onclick="document.execCommand( 'subscript',false,null);"><subscript>  &#xf12c; </subscript></button>
  <button class="fontStyle superscript" onclick="document.execCommand( 'superscript',false,null);"><superscript>    &#xf12b; </superscript></button>
  <button class="fontStyle strikethrough" onclick="document.execCommand( 'strikethrough',false,null);"><strikethrough>  &#xf0cc;</strikethrough></button>
  <button class="fontStyle align-left" onclick="document.execCommand( 'justifyLeft',false,null);"><justifyLeft>&#xf036; </justifyLeft></button>
  <button class="fontStyle align-center" onclick="document.execCommand( 'justifyCenter',false,null);"><justifyCenter> &#xf037; </justifyCenter></button>
  <button class="fontStyle align-right" onclick="document.execCommand( 'justifyRight',false,null);"><justifyRight> &#xf038; </justifyRight></button>
  <button class="fontStyle redo-apply" onclick="document.execCommand( 'redo',false,null);"><redo>&#xf01e;</redo></button>
  <button class="fontStyle undo-apply" onclick="document.execCommand( 'undo',false,null);"><undo>&#xf0e2;</undo></button>
  <button class="fontStyle createlink" onclick="document.execCommand( 'createLink',false,null);"><link> &#xf0c1;</link></button>
  <button class="fontStyle unlink" onclick="document.execCommand( 'unlink',false,null);"><link> &#xf127;</link></button>
  <button class="fontStyle orderedlist" onclick="document.execCommand('insertOrderedList', false, null);"><insertOrderedList>&#xf0cb;</insertOrderedList></button>
  <button class="fontStyle unorderedlist" onclick="document.execCommand('insertUnorderedList',false, null)"><insertUnorderedList>&#xf0ca;</insertUnorderedList></button>    
  <button class="fontStyle save" onclick="save()"><save>fas fa-save</save></button>    
  <input class="color-apply" type="color" onchange="backColor()" id="nColor" title="highlight">
  <input class="color-apply" type="color" onchange="chooseColor()" id="myColor" title="font color"> 
      <!-- font size start -->
      <br>
      font size :
      <select id="fontSize" onclick="changeSize()">
        <option value="1">1</option>      
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
      </select>
      <!-- font size end -->
      
  </fieldset>
<form method="get" id ="save" action="upload.php">
    
    <div id="editor1" contenteditable="true">
    
  </div>
  <textarea id="my-textarea" name="t" style="display:none"></textarea>
 </form>
</div>

</body>
</html>

Answer 6

document.execCommand() 函数已弃用。因此，这些答案也已弃用。

您现在需要的是 document.getSelection() 函数。

Answer 7

我制作了一个文本编辑器。它非常简单的编辑器。只使用简单的技巧。这是jquery完整的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML page editor</title>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://localhost/funnel_v2/files/editorscript/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
    <div class="row">
        <div class="col-sm-6">
            <h1 class="edit_me_plz" id="jakir">header</h1>
        </div>
        <div class="col-sm-6">
            <button class="edit_me_plz btn btn-info" id="button2">Button</button>
        </div>
    </div>


    <script type="text/javascript">
        $(function() {
            $(".edit_me_plz").dblclick(function(){
                make_element_editable(this);
            });
        });
        function make_element_editable(me){
            $( '<textarea onblur="set_my_new_text_with_tag(\''+$(me)[0].localName+'\',\''+$(me)[0].id+'\',this)" style="display: block; width: 100%;">'+$(me)[0].innerHTML+'</textarea>' ).insertAfter(me);
            $(me).hide();
        }
        function set_my_new_text_with_tag(prev_ele,id,me){
            $(me).remove();
            $("#"+id)[0].innerHTML = $(me)[0].value;
            $("#"+id).show();
        }
    </script>
</body>
</html>

希望你喜欢它。快乐的编码。：）

Answer 8

<script>
        window.addEventListener('load', function(){
            document.getElementById('sampleeditor').setAttribute('contenteditable', 'true');
            document.getElementById('sampleeditor2').setAttribute('contenteditable', 'true');
        });

        function format(command, value) {
            document.execCommand(command, false, value);
        }

        function setUrl() {
            var url = document.getElementById('txtFormatUrl').value;
            var sText = document.getSelection();
            document.execCommand('insertHTML', false, '<a href="' + url + '" target="_blank">' + sText + '</a>');
            document.getElementById('txtFormatUrl').value = '';
        }
    </script>
    <script>
     function changeFont(){
      var myFont = document.getElementById("input-font").value;
      document.execCommand('fontName', false, myFont);
    }

    function changeSize(){
      var mysize = document.getElementById("fontSize").value;
      document.execCommand('fontSize', false, mysize);
    }
    function changeColor(){
      var mysize = document.getElementById("fontColor").value;
      document.execCommand('fontColor', false, myColor);
    }
    function chooseColor(){
      var mycolor = document.getElementById("myColor").value;
      document.execCommand('foreColor', false, mycolor);
    }
    
    </script>

<style>
        .editor
        {
            border:solid 1px #ccc;
            padding: 20px;
            outline: none;
            height: 80%;
        }

        .sample-toolbar
        {
            border:solid 1px #ddd;
            background:#0055FF;
            padding-left: 5px;
            padding-bottom: 15px;
            padding-top: 15px;
            border-radius:3px;
        }
        

        a {
           padding: 10px 15px;
           background: #0055FF;
           border: 1px solid #0000;
           color: white;
           text-decoration: none;
           font-size: 15px;
           border-radius:3px;
        }
        a:hover {
          color: #ffff;
          background: #000EFF;
        }
        input {
           padding: 10px 15px;
           background: #0055FF;
           border: 1px solid #0000;
           color: white;
           cursor: pointer;
           text-decoration: none;
           font-size: 15px;
           border-radius:3px;
        }
        input:hover {
          color: #ffff;
          background: #000EFF;
        }
        
        
    </style>

<div class="sample-toolbar">
        <a href="javascript:void(0)" draggable="false" onclick="format('bold')"><i class="fa fa-bold fa-fw"></i>old</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('italic')"><i class="fa fa-italic fa-fw"></i>talic</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('underline')"><i class="fa fa-underline"></i> nderline</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('insertunorderedlist')"><i class="fa fa-list fa-fw"></i> List 1</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('insertorderedlist')"><i class="fa fa-list-ol"></i> List 2</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('strikethrough')"><i class="fa fa-strikethrough"></i> Strikethrough</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('undo')"><i class="fa fa-undo"></i> Undo</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('redo')"><i class="fa fa-redo"></i> Redo</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('justifyLeft')"> <i class="fas fa-align-left"></i> Align Left</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('justifyCenter')"> <i class="fas fa-align-center"></i> Align Center</a>
        <a href="javascript:void(0)" draggable="false" onclick="format('justifyRight')"> <i class="fas fa-align-right"></i> Align Right</a>
        <select id="input-font" class="input"  title="Change Font" onchange="changeFont (this);" style= "outline: none;height: 30px;" >
        <option value="Arial">Arial</option>
        <option value="Helvetica">Helvetica</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Sans serif">Sans serif</option>
        <option value="Courier New">Courier New</option>
        <option value="Verdana">Verdana</option>
        <option value="Georgia">Georgia</option>
        <option value="Palatino">Palatino</option>
        <option value="Garamond">Garamond</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Arial Black">Arial Black</option>
        <option value="Tahoma">Tahoma</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
      </select>
      
      
     <select  id="fontSize" onclick="changeSize()" title= "Change Font Size" style= "outline: none;height: 30px;" >
        
        <option value selected disabled> Change Font Size</option>      
        <option value="2">3</option>
        <option value="3">4</option>
        <option value="4">6</option>
        <option value="5">9</option>
        <option value="6">10</option>
        <option value="7">12</option>
        <option value="8">16</option>
      </select>
     <input draggable="false"  type="color" onchange="chooseColor()" id="myColor" value= "text color" title= "Change Text Color">

</div>

<div class="editor" id="sampleeditor">
    </div>

Answer 9

        for(let i = 0; i < yourCodeOptions.length; i++) {
    document.querySelectorAll("yourCodeOptions")[i].addEventListener("mouseover", function()
{
switch(this.id) {case "ul": document.querySelector("button.li").style.display="block"; //li tag should be "display: none;" before this}
    }

创建简单的文本编辑器（javascript）

9 个答案: