Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

About use inline style!

See original GitHub issue

This is a demo to use inline style.demo I also check your 04-example.vue,but my code doesn’t work. It’s my code.

<template>
  <div class="new-enter">
    <el-input v-model="title" placeholder="请输入标题"></el-input>
    <el-input v-model="author" placeholder="请输入作者"></el-input>
    <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption">
    </quill-editor>
    <div class="button-group">
      <el-button type="primary" icon="delete">清空</el-button>
      <el-button type="primary" icon="check">保存</el-button>
      <el-button type="primary" icon="share" @click="publish">发布审批</el-button>
    </div>
  </div>
</template>

<script>
const axios = require('axios');
import Quill from 'quill';
let SizeStyle = Quill.import('attributors/style/size');
Quill.register(SizeStyle, true);
export default {
  name: 'new-enter',
  data() {
    return {
      title: '',
      author: '',
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote'],
            // ['blockquote', 'code-block'],
            // [{ 'header': 1 }, { 'header': 2 }, { 'header': 3 }],               // custom button values
            ['image'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            // [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            // [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            // [{ 'direction': 'rtl' }],                         // text direction
            [{ 'size': ['small', false, 'large'] }],  // custom dropdown
            // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            // [{ 'font': [] }],
            [{ 'align': [] }]
            // ['clean']                                         // remove formatting button
          ]
        },
        placeholder: '从这里开始写正文'
      }
    };
  },
  methods: {
  },
  mounted() {

  }
};

</script>

</style>

Issue Analytics

State:
Created 6 years ago
Comments:19 (3 by maintainers)

Top GitHub Comments

20reactions

wakaryrycommented, Nov 14, 2018

I added the whitelist based on the solution @loveshinee .

1. register and add whitelist

import { Quill } from 'vue-quill-editor'
const sizeStyle = Quill.import('attributors/style/size')
sizeStyle.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px', '32px', '36px']
Quill.register(sizeStyle, true)

2. change size options

[{ 'size': [false, '10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px', '32px', '36px'] }]

3. add some css in `quill/dist/quill.core.css`

.ql-picker-item[data-value='10px']::before, .ql-picker-label[data-value='10px']::before {
  content: '10px' !important;
}

.ql-picker-item[data-value='12px']::before, .ql-picker-label[data-value='12px']::before {
  content: '12px' !important;
}

.ql-picker-item[data-value='14px']::before, .ql-picker-label[data-value='14px']::before {
  content: '14px' !important;
}

.ql-picker-item[data-value='16px']::before, .ql-picker-label[data-value='16px']::before {
  content: '16px' !important;
}

.ql-picker-item[data-value='18px']::before, .ql-picker-label[data-value='18px']::before {
  content: '18px' !important;
}

.ql-picker-item[data-value='20px']::before, .ql-picker-label[data-value='20px']::before {
  content: '20px' !important;
}

.ql-picker-item[data-value='24px']::before, .ql-picker-label[data-value='24px']::before {
  content: '24px' !important;
}

.ql-picker-item[data-value='30px']::before, .ql-picker-label[data-value='30px']::before {
  content: '30px' !important;
}

.ql-picker-item[data-value='32px']::before, .ql-picker-label[data-value='32px']::before {
  content: '32px' !important;
}

.ql-picker-item[data-value='36px']::before, .ql-picker-label[data-value='36px']::before {
  content: '36px' !important;
}

It seems worked.

BTW: It’s not encouraged to add/change the css rules directly in quill.

We could just add a new css file into our project to include the needed-to-be-added rules, and then import the css where you need it.

The where means the file you register and add whitelist.

5reactions

loveshineecommented, Feb 6, 2018

Here is my solution to set inline styles for the font-size in quill : 1. 2. 3. css also need to be modified to control the toolbar’s size options

Top Results From Across the Web

Inline Styles in HTML - Codecademy

CSS is built to style that structured information. When inline styles are used, this clear separation between structured information and styling is blurred....

Inline Style in HTML – CSS Inline Styles - freeCodeCamp

The style attribute works in the same way as any other HTML attribute. We use style , followed by the equality sign (=),...

Inline Style Sheets - Quackit Tutorials

Inline style sheets allow you to add styles directly to an HTML element. Inline style sheets is a term that refers to style...

When is inline CSS a good idea? (Example) - Treehouse

Richard Rakin Inline styles can be used when creating quick HTML / CSS mockups or prototypes, or for temporary styles that are not...

html - using inline css - a no-no or okay in certain situations?

This is wrong. inline styles are the best practice in some cases where the style are generated via server-side, they contain user-defined styles...