Вставить текстовый формат из редактируемого <div>или текстового поля в базу данных - PullRequest
Новая
       89

Вставить текстовый формат из редактируемого <div>или текстового поля в базу данных

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

В настоящее время я работаю над личным проектом для моего собственного веб-сайта, в который я пытаюсь добавить функцию хранения форматированного текста в базе данных. На данный момент я смог изменить шрифт с itali c на полужирный в качестве образца, но я совершенно не понимаю, как передать это в базу данных. 

      <style>
            #fake_textarea {
      width: 100%;
      height: 200px;
      border: 1px solid red;
    }
    
    #jBold {
      font-weigth: bold;
    }
    #jItalic{
        font-style:italic;
    }
        </style>
        <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button>
    <div id='fake_textarea' contenteditable>
      Select some text and click the button to make it bold...
      <br>Or write your own text
    </div>
        <script type="text/javascript">
            $(document).ready(function() {
      $('#jBold').click(function() {
        document.execCommand('bold');
      });
    });
     
        </script>
           <script type="text/javascript">
           $(document).ready(function() {
      $('#jItalic').click(function() {
        document.execCommand('italic');
      });
    });
     
        </script>
        
    </body>
    </html>

Пример работы: кодовое поле

Ответы [ 2 ]

1 голос
/ 05 мая 2020

Чтобы получить доступ к содержимому в этом редактируемом div, вы можете использовать: 

let content = $('#fake_textarea').html();

Что касается отправки данных через PHP, самым простым решением, вероятно, будет использование Ajax.

Альтернатива

Если вы не хотите использовать Ajax, а, скорее, обычную публикацию формы, вы можете позволить кнопке запускать функцию, которая получает контент и заполняет его в скрытое поле в форме, которое вы затем отправляете.

Примерно так: (непроверенный псевдокод)

HTML: 

<form method="post" action="foo.php" id="some-form">
    <input type="hidden" name="content" id="some-hidden-input" />
    <div id="fake_textarea" ...></div>
    <button id="submit-button"></button>
</form>

JS: 

$('#submit-button').on('click', function (e) {
    // Stop the default submission
    e.preventDefault();

    // Get the content from the div
    let content = $('#fake_textarea').html();

    // Store the content in a hidden input
    $('#some-hidden-input').val(content);

    // Submit the real form
    $('#some-form').submit();
});

Примечание

Я использую jQuery в этих примерах, поскольку вы показываете, что используете его. Все это, конечно, можно сделать и в ванили JS.

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

Хорошо, я немного изменил код Магнуса, и я очень благодарен ему за то, что помог мне разобраться в этом.

textarea. php Здесь вы напишете свой собственный контент, отформатируете текст и передадите его в свой php файл, который, в свою очередь, вставит его в базу данных. Я добавил комментарии для тех, кто хочет извлечь уроки из этого. 1008 * Надеюсь, это поможет кому-то так же, как этот человек помог мне.

...