About use inline style!

[hezhongfeng]

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>

[surmon-china]

Show the 'attributors/style/size' code please.

[hezhongfeng]

this is the code this is a assues

[hezhongfeng]

@surmon-china Do you get my msg?

[surmon-china]

@hezhongfeng After my test, it can work properly.

Inline style(default):

Class style:

But the class name is parsed to ql-color-<#e60000> and ql-bg-#ff9900 this hexadecimal color value, so there is no css color application, the specific may be different from the attribution class, which can help you?

[hezhongfeng]

Thank you for your answer. Can u test the 'font-size'? use inline style

[surmon-china]

@hezhongfeng

This problem is solved, the biggest problem is that you need to manually configure the toolbar option, he corresponding to each option value value will be inserted as inline data, good luck!

like this:

In vue:

<quill-editor ref="myTextEditor"
              v-model="content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)">
  <div id="toolbar" slot="toolbar">
    <span class="ql-formats">
      <select class="ql-size">
        <option value="10px">Small</option>
        <option selected>Normal</option>
        <option value="18px">Large</option>
        <option value="32px">Huge</option>
      </select>
    </span>
    <span class="ql-formats">
      <select class="ql-color">
        <option selected></option>
        <option value="red"></option>
        <option value="orange"></option>
        <option value="yellow"></option>
        <option value="green"></option>
        <option value="blue"></option>
        <option value="purple"></option>
      </select>
      <select class="ql-background">
        <option selected></option>
        <option value="red"></option>
        <option value="orange"></option>
        <option value="yellow"></option>
        <option value="green"></option>
        <option value="blue"></option>
        <option value="purple"></option>
      </select>
    </span>
  </div>
</quill-editor>

editorOption: {
  modules: {
    toolbar: '#toolbar'
  },
  placeholder: 'Compose an epic...'
}

[blablahaha]

I met the same problem. It works with

let AlignStyle = Quill.import('attributors/style/align');
Quill.register(AlignStyle, true);

But if I add

let SizeStyle = Quill.import('attributors/style/size');
Quill.register(SizeStyle, true);

The part of code is:

container: [
    [{'size': []}],
],

The font size no longer works.

I want to know does it exist some method to use inline style without using toolbar HTML? Maybe I miss something?

[usolved]

I could reproduce the same issue like @SmileYuhao. As soon as I register the SizeStyle [{ 'size': ['small', false, 'large'] }] is no longer working.

Other "attributors/style/..." plugins are working fine. When I adapt the inline html method it is also working but also don't want to write the whole toolbar as html ;).

[hezhongfeng]

@SmileYuhao @usolved You can use quill directly For other reasons，eventually I used tinymce

[usolved]

I have a reason why I like to use the Vue.js version of Quill ;)

Maybe I'll create a new issue since it's not really fixed and closed with a workaround.

[loveshinee]

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



[wakaryry]

@loveshinee But the size can only be set to 10 18 32. Any way for other size? We need 10, 12,14...32.

[wakaryry]

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.

[loveshinee]

@wakaryry Thanks for your correction!

[sunshineLixun]

@wakaryry Thanks. Well Done.

[wakaryry]

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

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.

[zhaoweih]

@wakaryry works for me! thanks

[GhaniHaa]

how to change list font size to slider font size ?

[breakstorm]

I added the whitelist based on the solution @wakaryry.

I'm using Nuxt.js. I Add how to import 'quill' package.

1. change Nuxt.config.js

const webpack = requiest('webapck')
module.exports = {
...
 configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  },
...
}

2. change plugins files.

when you using vue-quilll-editor in Nuxt

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)

change like to above

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)
import Quill from 'quill'
const sizeStyle = Quill.import('attributors/style/size')
sizeStyle.whitelist = ['6px', '8px', '10px', '12px', '14px', '16px', '18px', '20px', '24px', '30px', '32px', '36px']
Quill.register(sizeStyle, true)

other things (change size options, add some css in quill/dist/quill.core.css) is same