Wangeditor rich text reference and table usage

Introduction to the problem ：

This article records wangeditor A problem encountered in development , Before using wangeditor I didn't do much research because of time tension , Subsequent project tests , Measure and find the tables and references added in the editor , The display style is different from that in the editor , Here are the solutions .

Details ：

Show the effect in the editor ：

The editor displays the effect in the console ：
You can see that the reference function is styled , The label is called "blockquote".

Print out the contents of the current editor ：
You can see that only the label name has no label style , So after data submission , When displaying on the details page , In the page, only the tag name has no corresponding style , The corresponding display effect cannot be displayed correctly .

Solution ：

css modify

Directly add the corresponding label style in the display page , The same is true for tables .

.dialogCont /deep/ blockquote {
    
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  .dialogCont /deep/ blockquote p {
    
    padding: 10px 0;
  }

explain ：

After adding styles to the display page , Although successfully displayed , But I'm not sure whether this method is reasonable , So I checked on the Internet again , Then I found this page , You can refer to .
Page link ：https://www.kancloud.cn/wangfupeng/wangeditor3/335775