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