有没有办法通过下拉菜单在下一个输入的文本上动态更改文本样式？

Question

所以我制作了这个网页，其中它是一个伪 RTF 编辑器，可以将数据插入数据库。

在从下拉列表中选择文本样式后键入文本的文本样式时，我遇到了问题。我希望它像 word 一样，在单击特定文本样式后，它将开始使用该文本样式进行键入，但不影响 div 内的其余文本。 Codepen



    <style>
        #fake_textarea {
  width: 100%;
  height: 200px;
  border: 1px solid red;
}
<!-- Add css to modify the text -->
#jBold {
  font-weigth: bold;
}
#jItalic{
    font-style:italic;
}
#jUnderline{
    text-decoration: underline;
}
#jLT{
    text-decoration: line-through;
}
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<body>
    <!-- Put buttons here to modify the format -->
    <div>

    <select id="select_font" onchange="changeFont(this);">
  <option value="Arial">Arial</option>
  <option value="Sans Serif" selected>Sans Serif</option>
  <option value="Comic Sans MS">Comic Sans MS</option>
  <option value="Times New Roman">Times New Roman</option>
  <option value="Courier New">Courier New</option>
  <option value="Verdana">Verdana</option>
  <option value="Trebuchet MS">Trebuchet MS</option>
  <option value="Arial Black">Arial Black</option>
  <option value="Impact">Impact</option>
  <option value="Bookman">Bookman</option>
  <option value="Garamond">Garamond</option>
  <option value="Palatino">Palatino</option>
  <option value="Georgia">Georgia</option>
</select>
<select id="select-size" onchange="changeSize(this);">
<option value="4">4</option>
  <option value="8">8</option>
  <option value="12">12</option>
  <option value="16">16</option>
  <option value="20">20</option>
  <option value="24">24</option>
  <option value="28">28</option>
  <option value="32">32</option>
  <option value="36">36</option>
  <option value="40">40</option>
  <option value="44">44</option>
  <option value="48">48</option>
  <option value="52">52</option>
  <option value="56">56</option>
  <option value="58">58</option>
</select>
<button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button><button id="jUnderline">U</button><button id="jSuperScript">A<sup>A</sup></button><button id="jSubScript">A<sub>A</sub></button>
<button id="jLT">A</button>
<div>
    <!-- Add a form -->
    <form method="post" action="postcontent.php"  id="contentform">
    <!-- Add some hidden input in order for the form to submit some sort of value -->
        <input type="hidden" name="content" id="hiddeninput" />
        <!-- Add a place to insert the content -->
        <div id='fake_textarea' contenteditable>
              Select some text and click the button to make it bold...
              <br>Or write your own text
        </div>
        <!-- Add a submit button-->
        <button id="submit">Submit</button>
    </form>
    <!-- Script to make a selected text bold-->
        <script type="text/javascript">
            $(document).ready(function() {
                $('#jBold').click(function() {
                    document.execCommand('bold');
                });
            });

        </script>
        <!-- Script to make a selected text italic-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jItalic').click(function() {
                    document.execCommand('italic');
                });
            });

        </script>
        <!-- Script to make add an underline-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jUnderline').click(function() {
                    document.execCommand('underline');
                });
            });

        </script>
        <!-- Script to make make selected text a superscript-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jSuperScript').click(function() {
                    document.execCommand('superscript');
                });
            });

        </script>
        <!-- Script to make make selected text a subscript-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jSubScript').click(function() {
                    document.execCommand('subscript');
                });
            });

        </script>
                <!-- Script to add a line-through-->
           <script type="text/javascript">
           $(document).ready(function() {
                $('#jLT').click(function() {
                    document.execCommand('strikeThrough');
                });
            });

        </script>




        <!-- Changes the font type -->
        <script  type="text/javascript">
        function changeFont(font) {
            var sel = window.getSelection(); // Gets selection
            if (sel.rangeCount) {
            // Creates a new element, and insert the selected text with the chosen font inside
            var e = document.createElement('span');
            e.style = 'font-family:' + font.value + ';'; 
            e.innerHTML = sel.toString();

            // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
            var range = sel.getRangeAt(0);
            range.deleteContents(); // Deletes selected text…
            range.insertNode(e); // … and inserts the new element at its place
            }
        }
        </script>
        <!-- Changes the font size -->
        <script  type="text/javascript">
        function changeSize(size) {
        var sel = window.getSelection(); // Gets selection
            if (sel.rangeCount) {
            // Creates a new element, and insert the selected text with the chosen font inside
            var e = document.createElement('span');
            e.style = 'font-size:' + size.value + 'px;'; 
            e.innerHTML = sel.toString();

            // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
            var range = sel.getRangeAt(0);
            range.deleteContents(); // Deletes selected text…
            range.insertNode(e); // … and inserts the new element at its place
            }   
        }

        </script>

        <!-- Script to add value to the hidden input then submits it-->
        <script  type="text/javascript">

        $( "#submit" ).click(function() {

            var htmlString = $( "#fake_textarea" ).html();
            $('#hiddeninput').val(htmlString);
            // Submit the real form
            $('#contentform').submit();
        });

        </script>
</body>

Answer 1

以下是必须完成的总体思路，以便您可以内联不同的样式。

您需要将 div 内的所有文本换行，即 contenteditable 内的所有文本，我选择了 span。然后 span 需要应用您控制的所有样式。然后，您需要监听将文本输入可编辑 div 的所有方法。每当输入文本时，您都需要检查当前应用的样式过滤器是否与前一个文本元素相匹配。您可以使用 window.getSelection().anchorNode.parentNode 获取前一个元素的父元素。如果匹配，您只需将新文本附加到前一个元素即可。如果不匹配，您将创建一个具有适当样式的新元素。

这里有一个 link 示例，其中 font-size、font-family 和 color 可以被控制。 https://jsfiddle.net/nrayburn/50uhdwfg/100/

该示例存在一些问题，但我想让您从某个地方开始。键入时插入符号不会随文本移动。这是因为 event.preventDefault() 被调用了，所以它没有通过正常的过程来移动它。另一个问题是新元素没有插入到正确的位置，您只需要找出插入到正确位置的最佳方式即可。它也不处理在前一个元素末尾以外的任何地方插入文本。编辑文本需要检查样式是否更改。如果是这样，则需要将两侧的文本拆分为具有旧格式的新跨度，并在中间使用当前格式创建一个新跨度。

Answer 2

所以我已经解决了即时更改字体样式的问题，但是当涉及到大于 36 的任何内容时，我仍在努力解决这个问题。

codepen

我加了

 document.execCommand("fontName", false, font);

在我的更改字体脚本的末尾

function changeFont(font) {

        var sel = window.getSelection(); // Gets selection
        if (sel.rangeCount) {
        // Creates a new element, and insert the selected text with the chosen font inside
        var e = document.createElement('span');
        e.style = 'font-family:' + font.value + ';'; 
        e.innerHTML = sel.toString();

        // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
        var range = sel.getRangeAt(0);
        range.deleteContents(); // Deletes selected text…
        range.insertNode(e); // … and inserts the new element at its place
        }
             document.execCommand("fontName", false, font);

    }

关于改变字体大小，我插入了

                      if(size=="8")
        {
            document.execCommand("fontSize", false, "1");
        }
      if(size=="10")
        {
            document.execCommand("fontSize", false, "2");
        }           
                  if(size=="12")
        {
            document.execCommand("fontSize", false, "3");
        }
      if(size=="14")
        {
            document.execCommand("fontSize", false, "4");
        }

                if(size=="18")
        {
            document.execCommand("fontSize", false, "5");
        }
                  if(size=="24")
        {
            document.execCommand("fontSize", false, "6");
        }  
        if(size=="36")
        {
            document.execCommand("fontSize", false, "7");
        }

在它的末尾使我的更改字体大小脚本

function changeSize(size) {

    var sel = window.getSelection(); // Gets selection

        if (sel.rangeCount) {
        // Creates a new element, and insert the selected text with the chosen font inside
        var e = document.createElement('span');
        e.style = 'font-size:' + size.value + 'px;'; 
        e.innerHTML = sel.toString();

        // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
        var range = sel.getRangeAt(0);
        range.deleteContents(); // Deletes selected text…
        range.insertNode(e); // … and inserts the new element at its place
        }   
                  if(size=="8")
        {
            document.execCommand("fontSize", false, "1");
        }
      if(size=="10")
        {
            document.execCommand("fontSize", false, "2");
        }           
                  if(size=="12")
        {
            document.execCommand("fontSize", false, "3");
        }
      if(size=="14")
        {
            document.execCommand("fontSize", false, "4");
        }

                if(size=="18")
        {
            document.execCommand("fontSize", false, "5");
        }
                  if(size=="24")
        {
            document.execCommand("fontSize", false, "6");
        }  
        if(size=="36")
        {
            document.execCommand("fontSize", false, "7");
        }
    }

我希望找到一种增加字体大小的方法，或者除了在末尾添加 document.execCommand("fontSize", false, "7"); 之外的其他方法。

有没有办法通过下拉菜单在下一个输入的文本上动态更改文本样式？

Is there a way to change text style on the fly on the next inputted text via a drop down?

html

javascript

css

php

execcommand