quilljs - pasteHTML уничтожает оригинальный html

Question

quilljs - pasteHTML уничтожает оригинальный html

Я добавил кнопку showHTML в свой редактор quilljs. Если я нажму на [HTML], добавьте html и переключитесь в обычный вид редактора, нажав на [HTML] снова, тогда представление не соответствует HTML-коду.

Если вы вернетесь к [HTML] затем вы заметите, что код был изменен, а некоторые элементы иногда удаляются.

Я включил редактор quilljs ниже, скопируйте и вставьте следующий текст (T1) в представление HTML и посмотрите, что произойдет, если вы переключитесь между представлением HTML и обычным представлением, вы заметите, что некоторые элементы HTML удаляются.

T1:

<div class="col-sm-12 newsEntry">

    <div class="col-sm-12 auth borderTop noPaddingLR"></div>

    <div class="col-sm-12 auth noPaddingLR">
        <div class="col-xs-1 col-xs-offset-11 noPaddingLR">
            <div class="col-xs-12 noPaddingLR">
                <div filename="news/02_07_2018-103912.html" class="col-xs-6 button deleteThisNewsEntry"><center><i class="fa fa-trash"></i></center></div>
                <div filename="news/02_07_2018-103912.html" class="col-xs-6 button editThisNewsEntry"><center><i class="fa fa-pencil-square-o"></i></center></div>
            </div>
        </div>
    </div>

    <div class="col-sm-12 noPaddingLR">
        <p class="l">von <b class="autor">dev</b></p>
        <p class="r"><b class="date">07.02.2019</b></p>
    </div>
    <div class="col-sm-12 noPaddingLR newsContent"><p class="ql-align-justify">This is a test</p><p class="ql-align-center"></p><p><br></p></div>

    <br><br>
</div>

Результат:

<p><br></p><p><br></p><p>von <strong>dev</strong></p><p><strong>07.02.2019</strong></p><p class="ql-align-justify">This is a test</p><p><br></p><p><br></p>

Изменено не только форматирование кода, но и HTML-элементы, которые были удалены.

Попробуйте это:

var toolbarOptions = [
          ['image', 'video'],
          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
          [{ 'color': [] }, { 'background': [] }],
          [{ 'font': [ 'arial', 'Monotype Corsiva', 'fantasy', 'serif' ] }],
          ['showHtml']
        ];

        var quill = new Quill('#editEditor', {
          theme: 'snow',
          modules: {
              toolbar: toolbarOptions
          }
        });

        var txtArea = document.createElement('textarea');
        txtArea.id = 'quillTextAreaHtml';
        txtArea.style.cssText = "width: 100%;margin: 0px;background: rgb(29, 29, 29);box-sizing: border-box;color: rgb(204, 204, 204);font-size: 15px;outline: none;padding: 20px;line-height: 24px;font-family: Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;position: absolute;top: 0;bottom: 0;border: none;display:none";

        var htmlEditor = quill.addContainer('ql-custom');
        htmlEditor.appendChild(txtArea);

        var quillEditor = document.querySelector('#editEditor');
        quill.on('text-change', () => {
          txtArea.value = quillEditor.children[0].innerHTML;
        });

        var customButton = document.querySelector('.ql-showHtml');
        customButton.addEventListener('click', function() {
            if (txtArea.style.display === '') {
                self.quill.pasteHTML(txtArea.value);
            }
            
            txtArea.style.display = txtArea.style.display === 'none' ? '' : 'none';
        });

body {
    background: url("../gfx/page/content.jpg");
    font-size: 24px;
    font-family: "Monotype Corsiva";
}
.fotoNormal {
    width: 100%;
}
.copy:hover {
    cursor: copy;
}
.box {
    border: 1px dotted black;
}

#headerLinksUl li img:hover {
    cursor: pointer;
}

#content {
    position: relative;
    max-height: 1080px;
/*    overflow-y: scroll;*/
    overflow-y: overlay;
    padding:15px;
    padding-left: 0px;
}

#header {
    position: relative;
    margin: 0px;
    padding: 0px;
    height:129px;
    z-index: 999;
}

#headerBig {
    position: absolute;
}
#headerMedium {
    position: absolute;
}
#headerSmall {
    position: absolute;
}

.boxMain {
    border: 1px solid red;
}

#headerLinks {
    padding-left: 0px;
}
#headerLinks li {
    list-style-type: none;
    display: inline;
}

#main {
    padding:0px;
    margin:0px;
}
#contentLinks {
    padding:0px;
    margin:0px;
}
#links li {
    list-style-type: none;
 margin-bottom: -8px;
}
#links li img {
    display: block;
    margin: 0 auto;
}
#links li img:hover {
    cursor: pointer;
}

.headerLinksSelect {
    display: none;
}

.l {
  float: left;  
}
.r {
  float: right;  
}

.foto {
    width: 75%;
}

#headerLinksSelectbox {
    width: 85%;
    padding: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
}

#contentLinks {
    background: url("../gfx/page/left_neu.png");
    background-repeat: no-repeat;
    background-position-y: -1px;
}

#contentSpaceRight {
    position: relative;
}

#pic1 {
    position: absolute;
    top: 155px;
}

#pic2 {
    position: absolute;
    left: -916px;
    top: 525px;
}
.Stil5 {font-size: 24px; font-family: "Monotype Corsiva";}
.Stil7 {font-size: 24px; font-family: "Monotype Corsiva"; font-weight: bold; }
.Stil9 {font-family: "Monotype Corsiva"}
.Stil11 {font-size: 24px; font-family: "Monotype Corsiva"; font-weight: bold; }
.Stil12 {font-size: 24px}
.Stil13 {font-family: "Monotype Corsiva"; font-size: 24px; }



/* ------------------------------Table--------------------------------------- */

/* DivTable.com */
.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
 display: table-row;
}
.divTableHeading {
 background-color: #EEE;
 display: table-header-group;
}
.divTableCell, .divTableHead {

 display: table-cell;
 padding: 3px 10px;
}
.divTableHeading {
 background-color: #EEE;
 display: table-header-group;
 font-weight: bold;
}
.divTableFoot {
 background-color: #EEE;
 display: table-footer-group;
 font-weight: bold;
}
.divTableBody {
 display: table-row-group;
}

/* -------NEWS FUNKTION------- */

#statusBox {
    position: fixed;
    background: white;
    border: 1px solid black;
    transition: 2s;
    top: -25%;
    z-index: 200;
}

/* -------UPLOAD------- */
.fotoScale125 {
    width: 125%;
}

.fotoScale100 {
    width: 100%;
}
.fotoScale75 {
    width: 75%;
}
.fotoScale50 {
    width: 50%;
}

.fotoScale25 {
    width: 25%;
}

.verticalCenter {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.verticalCenterRight {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    float: right;
}

/* -------- add.php --------------*/

#inputContent {
    width: 1200px;
    height: 550px;
}
#dateRow {
    visibility: hidden;
}
#container {
    margin: 20px;
}
#vorschaubild {
    width: 50%;
    margin: 0 auto;
}
.headerButtons {
    border: 1px solid black;
    display: inline-block;
    background: #077;
    color: white;
    padding: 8px;
    padding-bottom: 4px;
    padding-top: 4px;
    margin-top: 10px;
    margin-left: 2px;
    margin-right: 2px;
    float: right;
} 
.headerButtons:hover {
    cursor: pointer;
    background: #00a9a9;
}
#imageUploadContainer {
    display: none;
}

#inputContent {
    font-family: arial;
}

.ql-snow {
    background: white;
}

#htmlEditForm {
    /*display: none;*/
    height: 500px;
    width: 100%;
    overflow-y: scroll;
    border: 1px solid black;
}

#loadSpinner {
  position: fixed;
  top: 40%;
  left: 50%;
  z-index: 100;
}
#loading {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.75;
    background: black;
}
#grayScreen {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.75;
    background: black;
}

#adminButtons {
    font-size: 18px;
    height: 39px;
    position: absolute;
    z-index: 1000;
    padding:3px;
}
.button {
    color: white;
    border: 1px solid #D8D8D8;
    background: #23241f;
}
.button:hover {
    cursor: pointer;
    color: black;
    background: #D8D8D8;
}
.editor {
    min-height: 375px;
    background: white;
}
#editEditorContainer {
  /*position: fixed;*/
  top: 25%;
  left: 50%;
  height: 90%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  display: none;
}

.ql-editor {
    overflow-y: scroll;
}

#editEditor {
    font-family: arial;
    font-size: 18px;
    width: 100%;
    height: 600px;
    overflow-y: scroll;
}
#submitEditContent {
    background: white;
    color: black;
}
#submitEditContent:hover {
    background: black;
    color: greenyellow;
    cursor: pointer;
}
#editEditorHeader {
    background: url("../gfx/page/tab.png");
    background-repeat-x: no-repeat;
    background-size: cover;
    padding-right: 0px;
    padding-left: 0px;
}
#editEditorClose:hover {
    color: red;
    cursor: pointer;
}

.auth {
    visibility: hidden;
}

.borderTop{
    border-top: 1px solid #ffb763;
}

.noPaddingLR {
    padding-left: 0px;
    padding-right: 0px;
}

.ql-showHtml {
    font-size: 14px;
}
.ql-showHtml:after {
    content: "[HTML]";
}

.newsEntry {
    margin-top: 5px;
    margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet"/>

<div id="editEditor" class="editor"></div>

Почему это происходит?

0

javascript html quilljs

Источник

user4684797 07 фев '18 в 10:14

0 ответов

Другие вопросы по тегам javascript html quilljs