ckeditor preview style analysis problem solving (focus on the third item) and dynamic loading js method summary (two)

Others 2021-04-01 18:45:55 views: null

Project scene:

Tip: With the deepening of development, I found that the editor does have some points to pay attention to when using it. Here are a few suggestions:

  1. During the preview, the label style does not work
  2. In the process of editing text, the text exceeds the line break and the preview page display is inconsistent
  3. Does not support wps assignment and paste, only supports the highest version of the browser
  4. When the preview style is supported, the problem exposed by ckeditor5.js needs to be loaded and the loading fails.

Problem description and cause analysis::

prompt:

  1. During the preview process, the editor's own label style does not work, you need to load ckeditor5.js, and use the ck-content class on the preview box used for style association.
  2. In the process of editing text, the text exceeds the line break and the preview page display is inconsistent. Because the global base.css style affects the compiled style.
  3. When the preview style is supported, the problem exposed by ckeditor5.js needs to be loaded and the loading fails.
    Problem code exposed
CKEditorError:ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

   ------>原因是因为代码重复度太高了。

If you want to load two different editors on one page, you need to make sure they are built together (once)

solution:

prompt:

  1. During the preview process, the editor's own label style does not work
 //预览区域
   <main>
    <div class="message">
      <div class="centered ck-content">       
      </div>
    </div> 
  </main>
 <script src="../build/ckeditor.js"></script>

  1. The text exceeds the line break and the preview page display is inconsistent. To deal with this problem, you need to do this file: separate style settings. The padding, margin, and list-style styles of the global ol li ul li p tags will affect the parsing style.

  2. When the preview style is supported, the problem exposed by ckeditor5.js needs to be loaded and the loading fails.
    There are three solutions to the exposed problems:
    the two solutions on the Internet are not ideal in real-time. The
    best solution is to modify: Import the css parsed from CKeditor.js on the official website into the generated style analysis.

 
 /*
 * CKEditor 5 (v26.0.0) content styles.
 * Generated on Wed, 03 Mar 2021 08:21:28 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
 */

:root {
    
    
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-todo-list-checkmark-size: 16px;
}

/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
    
    
    font-size: .7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
    
    
    font-size: .85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
    
    
    font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
    
    
    font-size: 1.8em;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
    
    
    background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
    
    
    background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
    
    
    background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
    
    
    background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
    
    
    color: var(--ck-highlight-pen-red);
    background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
    
    
    color: var(--ck-highlight-pen-green);
    background-color: transparent;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
    
    
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
    
    
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 50px;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
    
    
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: hsl(0, 0%, 20%);
    background-color: hsl(0, 0%, 97%);
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
    
    
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
    
    
    width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
    
    
    display: block;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
    
    
    margin: 15px 0;
    height: 4px;
    background: hsl(0, 0%, 87%);
    border: 0;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
    
    
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
    
    
    float: left;
    margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
    
    
    margin-left: auto;
    margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
    
    
    float: right;
    margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
    
    
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
    
    
    border-left: 0;
    border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
    
    
    background-color: hsla(0, 0%, 78%, 0.3);
    padding: .15em;
    border-radius: 2px;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table {
    
    
    margin: 1em auto;
    display: table;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table {
    
    
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px double hsl(0, 0%, 70%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
    
    
    min-width: 2em;
    padding: .4em;
    border: 1px solid hsl(0, 0%, 75%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table th {
    
    
    font-weight: bold;
    background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
    
    
    text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
    
    
    text-align: left;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
    
    
    position: relative;
    clear: both;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
    
    
    content: '';
    position: absolute;
    border-bottom: 2px dashed hsl(0, 0%, 77%);
    width: 100%;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
    
    
    position: relative;
    z-index: 1;
    padding: .3em .6em;
    display: block;
    text-transform: uppercase;
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
    font-size: 0.75em;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    background: hsl(0, 0%, 100%);
    box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
    
    
    clear: both;
    margin: 1em 0;
    display: block;
    min-width: 15em;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
    
    
    list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
    
    
    margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
    
    
    margin-top: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input {
    
    
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    width: var(--ck-todo-list-checkmark-size);
    height: var(--ck-todo-list-checkmark-size);
    vertical-align: middle;
    border: 0;
    left: -25px;
    margin-right: -15px;
    right: 0;
    margin-left: 0;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
    
    
    display: block;
    position: absolute;
    box-sizing: border-box;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid hsl(0, 0%, 20%);
    border-radius: 2px;
    transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
    
    
    display: block;
    position: absolute;
    box-sizing: content-box;
    pointer-events: none;
    content: '';
    left: calc( var(--ck-todo-list-checkmark-size) / 3 );
    top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
    width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
    height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
    border-style: solid;
    border-color: transparent;
    border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
    transform: rotate(45deg);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
    
    
    background: hsl(126, 64%, 41%);
    border-color: hsl(126, 64%, 41%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
    
    
    border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
    
    
    vertical-align: middle;
}
/* ckeditor5-html-embed/theme/htmlembed.css */
.ck-content .raw-html-embed {
    
    
    margin: 1em auto;
    min-width: 15em;
    font-style: normal;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
    
    
    padding: 1em;
    color: hsl(0, 0%, 20.8%);
    background: hsla(0, 0%, 78%, 0.3);
    border: 1px solid hsl(0, 0%, 77%);
    border-radius: 2px;
    text-align: left;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
    
    
    background: unset;
    padding: 0;
    border-radius: 0;
}
/* ckeditor5-mention/theme/mention.css */
.ck-content .mention {
    
    
    background: var(--ck-color-mention-background);
    color: var(--ck-color-mention-text);
}
@media print {
    
    
    /* ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break {
    
    
        padding: 0;
    }
    /* ckeditor5-page-break/theme/pagebreak.css */
    .ck-content .page-break::after {
    
    
        display: none;
    }
}
  1. Several methods of dynamically loading js

1. Direct document.write

<script language="javascript">
     document.write("<script src='test.js'><\/script>");
</script>

2. Dynamically change the src attribute of an existing script

<script src='' id="s1"></script>
<script language="javascript">
     s1.src="test.js"
</script>

3. Create script elements dynamically

<script>
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src="test.js";
    oHead.appendChild( oScript);
</script>

4. The JS script to be dynamically loaded: a.js, the following is the content of the file.

  <script language="JavaScript">
function LoadJS( id, fileUrl )
{
    
      var scriptTag = document.getElementById( id );
    var oHead = document.getElementsByTagName('HEAD').item(0);
   var oScript= document.createElement("script");
   if ( scriptTag   ) oHead.removeChild( scriptTag   );
     oScript.id = id;
    oScript.type = "text/javascript";
     oScript.src=fileUrl ;
    oHead.appendChild( oScript);
}
LoadJS( "a.js" );
alert( "主页面动态加载a.js并取其中的变量：" + str );
</script>

Guess you like

Origin blog.csdn.net/weixin_45176415/article/details/111594598
Recommended
The sixth meeting of openKylin Community Ecology Committee was successfully held
Alibaba Cloud officially releases Tongyi Qianwen 2.5
Python 3.13 releases first Beta: experimental free-threading mode and JIT, improved interactive interpreter
Stack Overflow used my code to train large AI models and banned my account.
Pop!_OS’s COSMIC desktop completes App Store listing
Report: Django is still the first choice for 74% of developers
"Internet Investment and Financing Operation in the First Quarter of 2024" Research Report
15 years ago, he was on the "FFmpeg pillar of shame", and today he still has to thank us - Tencent QQPlayer avenges its shame?
Ranking
Python handwritten digit recognition, the corresponding mathematical formulas and Detailed procedures
Der M-Chip-Mac implementiert mehrere Android-Emulatoren
CentOS 명령줄 모드에서 화면이 항상 켜져 있도록 설정 ---- 예상한 효과를 얻지 못했습니다.
Teach you step by step how to use GDB to debug programs: a comprehensive guide from entry to mastery
python3 pip ipython installation
A lot of python crawler source code sharing -- talk about the little thing about python crawler
Agile Sprint in Alpha Stage (7)
Access URL in Unity
FunctoinDemo form
MS SQL common SQL statements (6): create, modify, delete triggers and other operations sq
Daily
More
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)

Code World

© 2018 codetd.com