WYSIWYG CKEditor is altering source text on reload. Why? 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.

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


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:

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


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.
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 &lt;body&gt; tag, so it makes no sense to re-declare the &lt;html&gt; nor &lt;head&gt; nor &lt;body&gt; tags when they already have been declared. 

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





  &lt;script  src="https://code.jquery.com/jquery-2.2.4.min.js" 
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
  crossorigin="anonymous"&gt;&lt;/script&gt;


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.