1

I created a paragraph with a text field that uses CKEditor text editor with Full HTML enabled. I switched to the Source view and pasted the following code into CKEditor.

<!doctype html><html lang="en">
<head>  
    <meta charset="utf-8"><title>The HTML5 Herald</title>  
    <meta name="description" content="TheHTML5Herald">  
    <meta name="author" content="SitePoint">  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head><body>  
    <script  src="https://code.jquery.com/jquery-2.2.4.min.js"  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  crossorigin="anonymous"></script>  
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body></html>

Very simple, I was just testing to see if it accepted script and link tags out of the box. After I saved the page and went back to edit it, the source view only showed:

<meta charset="utf-8">
<title></title>
<meta name="description" content="TheHTML5Herald"><meta name="author" content="SitePoint">
<link href="https: //stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><script  src="https: //code.jquery.com/jquery-2.2.4.min.js"  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  crossorigin="anonymous"></script><script src="https: //stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Note that it removed the doctype, html and body tags. What's weird is that in the database, the value for this field in this node is still exactly what I pasted in (with all the tags). Is there a hook or filter that is altering this before it is rendered? How can I prevent this to make sure it always displays what I previously pasted in?

I'm using Drupal 8 and the CKEditor version is 4.7.2 according to the JavaScript console.

Improve this question

1 Answer 1

Reset to default
0

WYSIWYG CKEditor is altering source text on reload. Why?

Simply because it makes no sense to print them. I'm sure they added this as a preventative measure to prevent people from writing bad HTML. There is no way to turn this off, for your own good, lol.

If you look at html.html.twig template file, where your CKeditor code will render is already inside the <body> tag, so it makes no sense to re-declare the <html> nor <head> nor <body> tags when they already have been declared. 

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}  <--- YOUR CKEDITOR CODE WILL PRINT HERE...
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

For starters, Drupal 8 comes with jQuery, there is no need to add it, simply you just need to mark it as a dependency to your js file and then and only then, Drupal will load it. See How to include jQuery Once on your Drupal 8 pages

Loading scripts via CKeditor is considered bad practice. So the question becomes, how can I properly add the .css and .js bootstrap file?

Option A

Create a library file for your theme if it doesn't have one already

mytheme.libraries.yml

bootstrap4_cdn:
  css:
    theme:
      https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css: { type: external, minified: true }
  js:
    https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js: { type: external, minified: true }
  dependencies:
    - core/jquery
    - core/jquery.once

Note: In .yml files spacing matters, so make sure the indentation is exactly the same.

Then on your theme.info file add

libraries:
  - mytheme/bootstrap4_cdn

For better understanding, I encourage you to read Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme.

Option B

Use the bootstrap library module, which will add the library for you. (Basically does option A for you)

Option C (better yet)

If you want to create a Drupal 8 boostrap 4 theme, then you could create a Drupal Subtheme and use Bootstrap Barrio as your base theme.

Why a sub theme? Because themes are no different than Drupal Core or Contrib modules, if you hack them directly and then download an update for it, you will lose all your changes.

Improve this answer
3
  • Thanks for the detailed answer. I should have clarified that I don't use Drupal to render my site, just for entering content. We created a REST API with our Drupal install that is consumed by a another service that ultimately renders the site, so while Drupal may inject jQuery everywhere, the final site does not. We don't use themes for the same reason.
    – The Unknown Dev
    Oct 1, 2018 at 13:35
  • Well that was unexpected... @KimberlyW sounds like you're doing "headless Drupal". If this is the case, then why are you attempting to add Bootstrap CSS and JS files to Drupal, shouldn't you be adding these directly to the other site that is consuming your Drupal Rest API?
    – No Sssweat
    Oct 1, 2018 at 21:56
  • Long story. It's to recreate a legacy admin tool that they had in our old CMS. Something that existed years before I started here.
    – The Unknown Dev
    Oct 2, 2018 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.