The table style set by the front-end rich text cannot display the solution

After we have edited the text in the rich text editor, post it to see why the content previewed by the editor is inconsistent with the content actually displayed after saving. This is because most editors have their own style attributes, and these style attributes are often not included when obtaining rich text content, which leads to the inconsistency between what is actually seen and what is previewed in the editor .

Solution one:

Add basic style attributes in the display code that uses rich text content.

Disadvantages: If it is multi-terminal, you need to add style codes for each terminal.

Solution two:

When saving rich text content, append the corresponding style code.

Disadvantages: The style may need to be multi-terminal. When the text needs to be re-edited, the style code must be filtered before editing.

Solution three:

Customize rich text components, and automatically add basic style attributes when appending tags.

Disadvantage: The content length of rich text will become longer.


The Vue project uses the vue-ueditor-wrap rich text component.

Rich text page code

  <vue-ueditor-wrap v-model="content" :config="config" style="width: 100%"></vue-ueditor-wrap>

  import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {
    name: 'ueditor',
    components: {
    data() {
      return {
        content: '',
        config: {
          toolbars: [
              'anchor', //anchor point
              'undo', //revoke
              'redo', //redo
              'bold', //bold
              'indent', //First line indent
              'snapscreen', //screenshot
              'italic', //italics
              'underline', //underline
              'strikethrough', //strikethrough
              'subscript', //subscript
              'fontborder', //character border
              'superscript', //Superscript
              'formatmatch', //Format Painter
              // 'source', //source code
              'blockquote', //quote
              'pasteplain', //Plain Text Paste Mode
              'selectall', //select all
              'print', //Print
              'preview', //preview
              'horizontal', //dividing line
              'removeformat', //clear format
              'time', //time
              'date', //date
              'unlink', //unlink
              // 'insertrow', // insert row before
              // 'insertcol', // insert column before
              // 'mergeright', //right merged cells
              // 'mergedown', //Merge cells down
              // 'deleterow', //delete row
              // 'deletecol', //delete column
              // 'splittorows', // split into rows
              // 'splittocols', // split into columns
              // 'splittocells', // completely split cells
              // 'deletecaption', //delete the table title
              // 'inserttitle', //insert title
              // 'mergecells', //merge multiple cells
              // 'deletetable', //delete table
              'cleardoc', //clear document
              'insertparagraphbeforetable', //"Insert row before table"
              // 'insertcode', //code language
              'fontfamily', //font
              'fontsize', //font size
              'paragraph', //paragraph format
              // 'simpleupload', //single image upload
              'insertimage', //Upload multiple images
              'edittable', //Form properties
              'edittd', //cell properties
              'link', //Hyperlinks
              'emotion', //expression
              'spechars', //Special characters
              'searchreplace', //query replace
              // 'map', //Baidu map
              // 'gmap', //Google Maps
              'insertvideo', //video
              'help', //help
              'justifyleft', //align left
              'justifyright', //align right
              'justifycenter', //center alignment
              'justifyjustify', //justify
              'forecolor', //font color
              'backcolor', //background color
              'insertorderedlist', //ordered list
              'insertunorderedlist', //unordered list
              'fullscreen', //full screen
              'directionalityltr', //Type from left to right
              'directionalityrtl', //Type right to left
              'rowspacingtop', //Paragraph distance
              'rowspacingbottom', //back distance
              'pagebreak', //paging
              'insertframe', //Insert Iframe
              'imagenone', //default
              'imageleft', //float left
              'imageright', //float right
              'attachment', //appendix
              'imagecenter', //in the center
              'wordimage', //image dump
              'lineheight', //Line spacing
              'edittip ', //editing tips
              'customstyle', //custom title
              'autotypeset', //automatic typesetting
              // 'webapp', //Baidu application
              'touppercase', //capital letters
              'tolowercase', //lowercase letters
              'background', //background
              'template', //template
              // 'scrawl', // graffiti
              'music', //music
              'inserttable', //insert table
              // 'drafts', // load from draft box
              // 'charts', // charts
          // The editor is not automatically propped up by the content
          autoHeightEnabled: false,
          // initial container height
          initialFrameHeight: 600,
          // initial container width
          initialFrameWidth: '100%',
          // Upload file interface
          serverUrl: process.env.VUE_APP_SERVER_DOMAIN + "***.json",
          // The storage path of UEditor resource files. If you are using a project generated by vue-cli, you usually do not need to set this option. vue-ueditor-wrap will automatically handle common situations. If you need special configuration, refer to FAQ 2 below
          UEDITOR_HOME_URL: '/UEditor/'

Use solution one:

<div class="rich-text-area" v-html="richText"></div>
.rich-text-area table{
  border-collapse: collapse;
.rich-text-area table td{
  border:1px solid #DDD;
  padding:5px 10px;
  box-sizing: unset;

The style here can be modified according to actual needs. If you want a style that is exactly the same as the editor, it is recommended to use the developer tools of the browser to check which style is used in the rich text editor, and then add the corresponding style.

Use solution two:

this.content + '<style>table{margin-bottom: 10px;border-collapse:collapse;display: table;}td,th{padding:5px 10px;border:1px solid #DDD;box-sizing: unset;}</style>'

The following additional style is the same as the solution 1, but because it is a label style, it will cause style pollution. This method is relatively convenient for displaying rich text on a single page.

Use solution three:

Here I will talk about the logic. Some rich text supports the generation effect of custom components. For example, when adding paragraph tags by default, the code is as follows


When customizing, it can be made with basic styles, the code is as follows

<p style="font-size: 20px;"></p>

In this way, each p tag will come with this style, so there is no need to define additional styles.

If the rich text component does not support custom components, data processing can be performed after obtaining the rich text content, and label styles can be appended by using regular expressions or xpath.

Off topic:

How to check the style of rich text.

Use the tool Google Chrome, press F12 on Windows, and right-click on Apple Computer to check.

Then click this button, and then select the table area on the left. After selection, you can see the corresponding style in Styles



Tags: Front-end Web Development

Posted by Sphynx on Fri, 16 Dec 2022 20:48:08 +0300