Shulou(Shulou.com)06/01 Report--

Enter the official website. The NB editor can be found because the company project requires a visual cms editor, similar to the Wechat official account to edit articles. You can insert all kinds of cards, modules, questions, pictures, etc. Then the inserted content also needs to be able to delete, drag, and so on. So there are not many vue-compatible and drag-and-drop text editors developed with vue, so a search on github found quill, a text editor artifact.

Let's take a look at a picture from the official example:

PS: similar to most text editors, if the functions are all the same, there is no need to introduce them. He NB, the powerful place is that all the functions that can be seen and can not be seen are all a separate module. All of them are replaceable. This passage has to be highlighted. Of course, some of the functions of other editors are all available and not only that. Such as text style, multimedia file upload, response to keyboard events, operation history, formula support and so on. Click to view details. Various custom instructions for use

For example, the menu bar in the image above can be customized to define the existing menu bar: continue to pick pictures from official examples:

Of course, if the plug-in comes with no features, such as you want to do an animation to add an icon, option or something to the menu bar. You can define and rewrite the entire menu bar

Below from the extension points in the project to find 2 editors to explain the NB, of course, his more extensible features are not used, so only see the official documents, can understand its extensibility and flexibility.

Modify the font size selection, using custom lists and units (rem)

The built-in font size edits have two as follows. But it obviously doesn't support our usage. In the beginning, size was expanded to px. But later, after testing, it was found that the mobile phone used rem,so. Finally, use rem instead.

[{'size': [' small', false, 'large',' huge']}] [{'header': [1, 2, 3, 4, 5, 6, false]}], / / expanded font selection [{/ /' size': ['10pxframes,' 12pxwords, '14pxwords,' 16pxcodes, '18px' '20px'] / / 1lem75 * 2 / / 1px = 0.026rem / / 1rem=36px' size': ['0.26remoulding,' 0.31 remoulding, '0.37 remoulding,' 0.41 remoulding, '0.47 remoulding,' 0.52 remoulding]}]

To display the corresponding font size in the menu bar. Join css. It looks like this, and you can add as many options as you can.

.ql-snow .ql-picker.ql-size .ql-picker-label [data-value= "10px"]:: before,.ql-snow .ql-picker.ql-size .ql-picker-item [data-value= "10px"]:: before {content: '10pxrabbit; font-size: 10px }. Ql-snow .ql-picker.ql-size .ql-picker-label [data-value= "20px"]:: before,.ql-snow .ql-picker.ql-size .ql-picker-item [data-value= "20px"]:: before {content: '20pxrabbit; font-size: 20px } / / default style. Ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: '14px styles; font-size: 14px } / / rem: to be clear, the px unit is still displayed when editing, but the resulting source code uses rem, because the editor is on pc, and the operator is only familiar with the px unit, and has no concept of rem. .ql-snow .ql-picker.ql-size .ql-picker-label [data-value= "0.26rem"]:: before,.ql-snow .ql-picker.ql-size .ql-picker-item [data-value= "0.26rem"]:: before {content: '10px; font-size: 10px;}

Then add the following js code where the quill is initialized

Import Quill from 'quill'var Size = Quill.import (' attributors/style/size'); / / Size.whitelist = ['10pxtransactions,' 12pxtransactions, '14pxtransactions,' 16pxtransactions, '18pxtransactions,' 20pxtransactions]; Size.whitelist = ['0.26remoulding,' 0.31 remoulding, '0.37remoulding,' 0.41 remoulding, '0.47 remoulding,' 0.52 remoulding']; Quill.register (Size, true)

After that, even if the choice of our font size is expanded, let's test the results:

Of course, in order for the rem font to work on pc, you have to add a line.

Html {font-size: 36px;} extension is centered, using styles on the right instead of class

It is worth noting that several books have multiple sets of strategies to choose from, such as the setting of the style. Take a chestnut, official source code.

This is the official font orientation setting source code. We can see that there are three ways to set it: through attribute (algin:'right'), through class (class='ql-align-right'), through style (style='text-align:right'); whether it is very flexible and powerful, you can choose it or not.

Import Parchment from 'parchment';let config = {scope: Parchment.Scope.BLOCK, whitelist: [' right', 'center',' justify']}; let AlignAttribute = new Parchment.Attributor.Attribute ('align',' align', config); let AlignClass = new Parchment.Attributor.Class ('align',' ql-align', config); let AlignStyle = new Parchment.Attributor.Style ('align',' text-align', config); export {AlignAttribute, AlignClass, AlignStyle}

So how to specify the use of another one? Like the following code, if you use style. Then use Quill.import ('attributors/style/align'); replace the default, or use Quill.import (' attributors/class/align') if you use class:

Var Align = Quill.import ('attributors/style/align'); Align.whitelist = [' right', 'center',' justify']; Quill.register (Align, true)

Check the results:

And then I'll have a more advanced one. Set the font to bold

Quill uses strong or b tags by default. In fact, this is no problem, but can not stand up to the company's "advanced" front end of the mobile end of all the html tags are reset. All hx tags, em,strong and other semantic tags are all reset. So there is no way to use the style way to achieve.

Import Inline from'. / blots/inline';class Bold extends Inline {static create () {return super.create ();} static formats () {return true;} optimize () {super.optimize (); if (this.domNode.tagName! = = this.statics.tagName [0]) {this.replaceWith (this.statics.blotName);} Bold.blotName = 'bold';Bold.tagName = [' STRONG','B']; export default Bold Use style to implement bold text import Quill from 'quill'let Parchment = Quill.import (' parchment') class BoldStyleAttributor extends Parchment.Attributor.Style {value (domNode) {let value = super.value (domNode); return value;} add (node, value) {$(node) .css ('font-weight',' bold'); return true } remove (node) {$(node) .css ('font-weight',' normal');}} let BoldStyle = new BoldStyleAttributor ('bold',' font-weight', {scope: Parchment.Scope.INLINE, whitelist: [true, false]}); export default BoldStyle; `

Where the quill is initialized, add the following code

. / NodeEditText/TextBold "or". / NodeEditText/TextBold.js "is the js file path of the above lines of code.

Import MyBold from'. / NodeEditText/TextBold'Quill.register ("formats/bold", MyBold, true)

Check the results:

Such as the font of the text, italics, are similar to the way of writing. It will not be carried out one by one. Although the official documents are in English, they can be read patiently and can be easily understood.

Write at the end:

The premise of being able to customize this component quickly is that I need to understand his design ideas. I only have a superficial understanding of the use of this component, so I won't make any summary.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.