Теги HTML отображаются в браузере при использовании CKEditor с ExpressJS - PullRequest
0 голосов
/ 26 октября 2019

Вот мой файл app.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
    <title>Jo Blog</title>
</head>
<body>

    {{{body}}}
    <script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
    <script type="text/javascript">   
       // CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

        CKEDITOR.replace('content', {
            plugins: 'wysiwygarea , toolbar, basicstyles, link',
            enterMode: CKEDITOR.ENTER_BR,
            autoparagraph: false,
            uiColor: '#AADC6E',
            removePlugins: 'elementspath'
        });

    </script>

</body>
</html>

, а вот форма, на которую я хочу повлиять - new.handlebars

<h1>New Blog</h1>

<form method="post" action="/blog">
    <label>Title</label><br>
    <input type="text" name="title"/><br>
    <label>Blog Content</label><br>
    <textarea name="content" id="ckEdit"></textarea><br>

    <input type="submit" name="submit">

</form>

Теперь редактор работает нормальнои я могу написать в нем, но когда я нажимаю «отправить», HTML-теги все еще там, например, «

Hello World

»

Я вырвал дерьмо из этой проблемы и прочитал все, что яможете найти здесь об этом и попробовал все, что я прочитал, но ничего не работает: / Любые идеи ??

1 Ответ

0 голосов
/ 03 ноября 2019

Я получил ваш код для отправки содержимого и заголовка формы без отображения тегов html в браузере.

Файл ckeditor.js загружается дважды из двух источников, один раз в голову cdn, а затем сновав теле. Возможно, они конфликтуют. Я закомментировал скрипты в теле и сохранил скрипт cdn.ckeditor [...] ckeditor.js в голове.

В целях тестирования я удалил руль {{{body}}} и вставил форму непосредственно в html-файл.

Я сомневаюсь, что проблема заключается в действии формы "/ blog", но чтобы увидеть возвращаемый результат, я изменил действие формы на "form.php" (включен ниже). Файл form.php просто отправляет отправленный контент обратно в браузер. Это действительно показывает представленный контент и заголовок, правильно отображаемый в браузере.

Вот "form.php" и измененные html-файлы.

Надеюсь, это немного поможет при устранении неполадок.

form.php

<?php

$title = $_POST['title'];
$content = $_POST['content'];

print <<< PRINT
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>$title</title>
</head>

<body>
$content
</body>

</html>
PRINT;

?>

HTML-файл

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--<link href="/css/style.css" rel="stylesheet" type="text/css">-->
  <script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
  <title>Jo Blog</title>
</head>

<body>
  <!-- changed the form's action from /blog to form.php for demo purposes -->
  <form method="post" action="form.php">
    <label>Title</label><br>
    <input type="text" name="title"/><br>
    <label>Blog Content</label><br>
    <textarea name="content" id="ckEdit"></textarea><br>
    <input type="submit" name="submit">
  </form>

  <!--
   <script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
   <script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
  -->

  <script type="text/javascript">   
  // CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;

  CKEDITOR.replace('content', {
   plugins: 'wysiwygarea , toolbar, basicstyles, link',
   enterMode: CKEDITOR.ENTER_BR,
   autoparagraph: false,
   uiColor: '#AADC6E',
   removePlugins: 'elementspath'
  });

  </script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...