Rich text do editor Vue2, url de upload de imagem, explicação detalhada da barra de ferramentas

1. Apresente o
npm install vue2-editor --save // ​​install

import {VueEditor} de “vue2-editor”;

componentes: {VueEditor}, // registrar componentes

<vue-editor  v-model="content"></vue-editor>

2. Substitua o método de upload,
adicione as duas linhas intermediárias de configuração

<vue-editor  
useCustomImageHandler
@image-added="handleImageAdded"
v-model="content"></vue-editor>

handleImageAdded(file, Editor, cursorLocation, resetUploader) {
    
    
    //formDta是个对象，用来模拟表单的
            let formData = new FormData()
            formData.append('file', file)
    //axios这块别一股脑复制，看你们自己是怎么封装的
            axios({
    
    
                url:`xxxxx`,
                method: 'POST',
                data: formData
            })
                .then(res => {
    
    
	//这两行是关键代码了。在鼠标位置插入图片，数据存的是url
				Editor.insertEmbed(cursorLocation, 'image', res.data.url)
				resetUploader()
                })
                .catch(err => {
    
    
                    console.log(err)
                })
        },

就这么简单，网上太多奇奇怪怪的富文本插件，搞得头疼。又要各种文件下载搞不懂，真实引用不会用到这么多的

3. Configuração da barra de ferramentas
有一说一，不该一股脑全展示，用不上最好别展示出来
mais a configuração da linha do meio

<vue-editor  
useCustomImageHandler
@image-added="handleImageAdded"
:editorToolbar="customToolbar"
v-model="content"></vue-editor>

Isso é tudo, não pergunte por que tantos arrays são feitos, eles estão nesse formato quando são embalados.
对应图片也是上面那个（工具栏允许重复）

customToolbar:[
                [{
    
    'header':[false,1,2,3,4,5,6] }], //标题
                ['bold', 'italic', 'underline'],  //加粗\斜体\下划线
                ['italic'],  //斜体----也可以拆开来写，用于换位置顺序
                [{
    
    'align':''},{
    
    'align':'center'},{
    
    'align':'right'}], //对齐
                [{
    
     'list': 'ordered'}, {
    
     'list': 'bullet' }, {
    
     'list': 'check' }], //有序无序列表
                [{
    
    'background':[]},{
    
    'color':[]}], //背景色
                ['image','link'],  //图片、链接
                ['strike'],   //作废（文字中间一横）
                ['underline'],
                ['clean'],   //清楚格式（所谓去掉背景色这些花里胡巧）
                ['code'],  //代码
                ['code-block'], //代码块
                ['video'] //视频
            ],

Aconselhe aqueles que não entendem tudo a copiar os blogs de outras pessoas e publicar um monte de artigos que desperdiçam suas vidas.

Maravilhada com a tecnologia, continue aprendendo
|

|

|

4. Suplemento

Requisito: Adicionar texto à barra de ferramentas
(a caixa vermelha é determinada quando você define os itens de configuração, um grupo de três ou um grupo).

Infelizmente, não sei por que não pode ser adicionado na frente e antes depois está tudo nas costas.
nth-child (1) é o conteúdo do seletor css.

nth-child (2) é a segunda caixa vermelha

/deep/ .ql-formats:nth-child(1):before{
    
    
    content:'标题';
    margin-right:10px
 }