Corporate projects need rich text editors that support simple forms, image uploads, and not ugly styles.

When I chose Quill as a rich text editor, I also looked at the Demo of some add-ons (quill-better-table, quill-image-resize- Module) and the custom toolbar.

Encountered a lot of pits in the middle of a lot of information, but also made a lot of compromises.

Personally, I don’t think it’s perfect enough, the ecosystem isn’t big enough, and the version is a bit messy

The use of the Quill

Opening diagram

Quick start

I used Quill index. HTML directly in the Vue project (I could import CDN directly) or I could use vue-quill-editor but I ran into some problems and finally compromised

Display effect:

<! --> <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"> <! Import js file --> <script SRC ="https://cdn.quilljs.com/1.0.0/quill.js"></script> <! <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button> </div> <! Create edit container --> <div id="editor"> <p>Hello World! </p> </div> <! --> <script> const editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
</script>
Copy the code

The customtoolbar

Partial module names

Background color - Background Bold color - Bold Color - Color - font Inline code - code Italic link - link size - size Strike-superscript/subscript - script Underline - underline reference - blockQuote title - Header indent - indent list - list Text alignment - align Text direction - Direction code block - code-block formula - Formula image-image Video-video Clear font style -cleanCopy the code

Configuration mode

There are two ways:

  1. Customize the toolbar (the one I’m using now) by writing the HTML structure

    Generally hasql-At the beginning, if it’s triggered by a click it’s usuallybutton, the font is generallyselect

<! <div id="toolbar"> <! -- Bold --> <button class="ql-bold"></button> <! --> <button class="ql-italic"></button> <! -- font --> <select class= "select""ql-font">
    <option value="monospace"></option>
    <option value="consolas"></option>
    <option value="serif"></option> </select> </div> <! Create edit container --> <div id="editor"> <p>Hello World! </p> </div> const editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
});
Copy the code
  1. Customize the toolbar by configuring the toolbar’s array options

const toolbarOptions = [
  ['bold'.'italic'.'underline'.'strike'],        // toggled buttons
  ['blockquote'.'code-block'],

  [{ 'header': 1}, {'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '1'}, { 'indent': '+ 1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small'.false.'large'.'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background': [] }],          // dropdown with defaults from theme
  [{ 'font':} []], [{'align':} []], ['clean']                                         // remove formatting button
];

const quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});
Copy the code

Add custom fonts, custom ICONS, English to Chinese

Custom fonts

Steps:

  1. Js part
// Add fonts to whitelist
const Font = Quill.import('formats/font');
// We do not add Aref Ruqaa since it is the default
Font.whitelist = [
  'SimSun'.'SimHei'.'Microsoft-YaHei'.'KaiTi'.'FangSong'.'Arial'.'Times-New-Roman'.'sans-serif'.'monospace'.'serif'.'consolas'
];
Copy the code
  1. The CSS part

The format is below, so it should be clear at first. Keep it until the introduction of font. CSS

The default font may need to be changed */#editor {
  font-family: 'Microsoft-YaHei';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
    content: "宋体";
    font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
    content: "Black";
    font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
    content: Microsoft Yahei;
    font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=consolas]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=consolas]::before {
    content: "consolas";
    font-family: "consolas";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
    content: "Regular script";
    font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
    content: "Imitation song dynasty style typeface";
    font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
    content: "Arial";
    font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
    content: "New Roman";
    font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
    content: "sans-serif";
    font-family: "sans-serif";
}

.ql-font-SimSun {
    font-family: "SimSun";
}
.ql-font-SimHei {
    font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
    font-family: "KaiTi";
}
.ql-font-FangSong {
    font-family: "FangSong";
}
.ql-font-Arial {
    font-family: "Arial";
}
.ql-font-Times-New-Roman {
    font-family: "Times New Roman";
}
.ql-font-sans-serif {
    font-family: "sans-serif";
}
.ql-font-consolas {
    font-family: "consolas";
}
Copy the code

Custom ICONS

icons[actionName] and icons[actionName].childrenName

// import ICONS const ICONS = quill.import ('ui/icons'); / / modify the ICONS ['color'] = `<i class="ql-stroke ql-color-label font_family icon-icon_pc_a"></i>`;
icons['background'] = `<i class="ql-color-label font_family icon-icon_pc_background_color"></i>`;
icons['image'] = `<i class="font_family icon-icon_pc_import_image"></i>`;
icons['list'].bullet = `xxxxx`;
icons['list'].ordered = `xxxxx`;
Copy the code

Convert English prompts to Chinese

Modify the content, refer to the following, other basically similar

  1. Hyperlink English
.ql-snow .ql-tooltip::before {
  content: 'Access link:';
}
.ql-snow .ql-tooltip[data-mode='link']::before {
  content: 'Enter link:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  content: 'save';
}
.ql-snow .ql-tooltip a.ql-action::after {
  content: 'edit';
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'remove';
}
Copy the code

zooming

Stuff is a good thing, but it’s easy to use later because other features compromise. See the link below for details. Github.com/kensnyder/q…

Table support

Quilljs v2.0.0-dev.3 github.com/soccerloway…

The problem

The image scaling component is based on [email protected], but now requires the editor to support table insertion, which [email protected] cannot do, but [email protected] supports table insertion in the editor, but this is not official, it is development, And quill’s version is stuck at 1.x

A link to the

quilljs.com/

Github.com/kensnyder/q…

Blog.csdn.net/asing1elife…

www.jianshu.com/p/b237372f1…