Есть ли способ изменить стиль текста на лету для следующего введенного текста через раскрывающийся список? - PullRequest
Новая
       69

Есть ли способ изменить стиль текста на лету для следующего введенного текста через раскрывающийся список?

0 голосов
/ 08 мая 2020

Итак, я сделал эту веб-страницу, где это псевдо-RTF редактор, который вставляет данные в базу данных. Вставьте в php html в 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>

Ответы [ 2 ]

0 голосов
/ 10 мая 2020

Итак, я решил проблему изменения стиля шрифта на лету, но я все еще пытаюсь решить эту проблему, когда дело доходит до чего-то большего, чем 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"); в конце.

0 голосов
/ 09 мая 2020

Вот общее представление о том, что нужно сделать, чтобы вы могли иметь различные встроенные стили.

Вам нужно обернуть весь ваш текст, который находится внутри вашего div, то есть contenteditable внутри другого элемента я выбрал span. Затем к span необходимо применить все стили, которыми вы управляете. Затем вам нужно прослушать все методы ввода текста в редактируемый div. Каждый раз при вводе текста необходимо проверять, соответствуют ли применяемые текущие фильтры стиля предыдущему текстовому элементу. Вы можете использовать window.getSelection().anchorNode.parentNode, чтобы получить родительский элемент предыдущего элемента. Если он совпадает, вы просто добавляете новый текст к предыдущему элементу. Если он не совпадает, вы создаете новый элемент с соответствующим стилем.

Вот ссылка с примером, где можно управлять font-size, font-family и color. https://jsfiddle.net/nrayburn/50uhdwfg/100/

В этом примере есть несколько проблем, но я хотел бы с чего начать. Каретка не перемещается вместе с текстом при вводе. Это потому, что вызывается event.preventDefault(), поэтому go не перемещает его в обычном процессе. Другая проблема заключается в том, что новые элементы вставляются не в нужное место, вам просто нужно выяснить, как лучше всего вставить их в нужное место. Он также не обрабатывает вставку текста где-либо, кроме конца предыдущего элемента. При редактировании текста необходимо проверить, не изменился ли стиль. Если это так, то ему необходимо разделить текст с обеих сторон на новые отрезки со старым форматированием и создать новый отрезок посередине с текущим форматированием.

...