JavaScript and CSS entered in code mode will run on that page when exiting code mode

steps to reproduce

1. Access to https://summernote.org/
2. Turn on the code mode of Summernote
3. Paste the following

<style>
ul, ol{
  color: #668ad8;
  border: dashed 2px #668ad8;
  background: #f1f8ff;
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

</style>

1. Exit code mode

They also apply to edit pages.

browser version and os version and summernote version

• MBP
  • 10.12.6 (16G1036)
• Version 63.0.3239.108 (Official Build) (64-bit)

screenshot of issue

[ghost]

You are loading style sheet changes for the entire page (ul, ol) and summernote loads the style accordingly.

To avoid this, you need to use an event that parses the style selectors and forces them to be more specific. For example:

ul, ol {...}

becomes

.note-editing-area ul, .note-editing-area ol {...}

Your event will have to check if the parent class is already there so it does not add it a second time. That way you ensure that the applied styles affect the internal summernote structure only.

The second step, would be to make sure “.note-editing-area” is either renamed or used properly in your generated final html document, so that those style selectors work there as well.

[DiemenDesign]

You’re going to have the same issue with Javascript, as it affects the page as a whole. You’ll have the same with other editors as well. Keep in mind Summenote is meant to be a visual editor much like using Word, it’s not really intended to be used as a code editor. Codemirror is better suited to that.