Question

因此，我制作了此网页，其中是一个伪RTF编辑器，可将数据插入数据库。 Insert into php the html in a div

在文本样式方面，从下拉列表中选择文本样式后键入的文本时遇到问题。我希望它像单词，其中在单击特定的文本样式后，它将开始使用该文本样式键入内容，但不会影响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获取前一个元素的父元素。如果匹配，则只需将新文本附加到上一个元素。如果不匹配，则使用适当的样式创建一个新元素。

这里是一个示例，其中可以控制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");之外的其他方法。

有没有一种方法可以通过下拉菜单动态更改下一个输入文本的文本样式？

2 个答案: