[Vue] vue2 preview displays quill rich text content, vue-quill-editor echoes the page, and v-html echoes rich text content

---

Preface

提示：这里可以添加本文要记录的大概内容：
Vue background framework, if there is a rich text editor in the system, the effect is as follows.

Check in package.json and find the address of the plug-in called quill plug-in , the page is as follows

After searching through many articles, I found that the background framework uses quill, and I use vue-quill-editor on the front-end to display the content, and the effect is the same.
The two can communicate with each other

I am a vue2 system, so I use vue-quill-editor to echo the content.

---

Reference article 1
The use of vue rich text editor vue-quill-editor and the rendering of content
vue-quill-editor Rich text editor usage steps
Introduction to rich text editor Quill and how to use it in Vue

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Download

npm install vue-quill-editor -S

You can view the version number in package.json

2. Usage steps

1.Introduce styles

Introduce it in the rendering page. If you render too many detail pages, introduce it in main.js.

The code is as follows (example):

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

2.html code

The code is as follows (example):

<div class="ql-container ql-snow">
    <div class="ql-editor">
        <div v-html="detailInfo.policyContent"></div>
    </div>
</div>

用于渲染的div，外面必须套2层样式代码，否则样式会丢失

This is the echo of the mobile rendering page

The following is the rendering page on the PC side. Move the three divs into the Zoey background frame to reproduce the result.

---

Summarize

[Vue] vue2 preview displays quill rich text content, vue-quill-editor echoes the page, and v-html echoes rich text content