Vue-html5-editor is further explored and expanded

1, the introduction

Vue-html5-editor is a rich text editor plug-in for Vue. It is simple, flexible and extensible, suitable for Vue 2.0 and above, and supports IE11

Github address: github.com/PeakTai/vue…

Github has installation and usage instructions, and the code is pasted in a document that can be copied and pasted

2, use,

Demo is global import

npm install vue-html5-editor --save-dev
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);                                         
Copy the code

It can also be used as a local component to facilitate the use of different configurations in different scenarios

const editor1 = new VueHtml5Editor(options1)
const app1 = new Vue({
    components:{
        editor1
    }
})
const editor2 = new VueHtml5Editor(options2)
const app2 = new Vue({
    components:{
        editor2
    }
})
Copy the code

The demo using

<vue-html5-editor @change="updateData" :content="content" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>
Copy the code

Note: Set :auto-height to false for fixed height and true for adaptive height, and the change event will fetch the content passed to the back end

Options Basic configuration

Vue.use(VueHtml5Editor, {// Global component name, invalid when using new VueHtml5Editor(options) // global component name name: "Vue-html5-editor ", // whether to display the module name, // If set true,will Append Module name to toolbar After icon showModuleName: False, // customize the class of each icon, // Custom icon class of built-in modules,default using FONT -awesome ICONS: {text: "fa fa-pencil", color: "fa fa-paint-brush", font: "fa fa-font", align: "fa fa-align-justify", list: "fa fa-list", link: "fa fa-chain", unlink: "fa fa-chain-broken", tabulation: "fa fa-table", image: "fa fa-file-image-o", hr: "fa fa-minus", eraser: "fa fa-eraser", undo: "fa-undo fa", "full-screen": "fa fa-arrows-alt", info: "Fa fa-info",}, // configure image module image: {Max file size sizeLimit: // upload config,default null and convert image to base64 upload: {url: null, headers: {}, params: {}, fieldName: {}}, The default compression parameter is localResizeIMG, which is used for compression by default and set to null to disable compression (https://github.com/think2011/localResizeIMG) // set null to disable compression compress: { width: 1600, height: 1600, quality: }, // handle response data, return image url uploadHandler(responseText){ //default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"} var json = JSON.parse(responseText) if (! Json.ok) {alert(json.msg)} else {return json.data}}}, // language, // Default en-US, en-us and zh-CN are built-in language: "zh-CN ", // Custom language i18N: {/ / specify your language here "useful - cn" : {" align ":" alignment ", "image" : "image", "a list" : "a list" and "link" : "link", "unlink" : Links to "remove", "table", "form", "font", "text", "full screen" : "full screen", "text", "layout", "eraser" : "format clear", "info" : "about", "color" : "Color ", "please enter a url", "create link", "bold": "bold", "italic":" oblique ", "underline": "Underline ", "strike through", "subscript": "superscript", "superscript": "subscript", "heading": "heading", "font name": "Font ", "font size", "left justify", "center justify", "right justify", "ordered list": "Ordered list", "unordered list", "fore color", "background color", "row count", "column count": "Columns", "save" : "sure," "upload" : "upload", "progress" : "progress", "unknown" : "unknown", "both please wait" : "wait a minute, please", "error" : "false", "abort" : "Interrupt ", "reset": "reset"}}, // The modules you don't want hiddenModules: [], // Customize the module to display, Keep only the modules you want and customize the order. // Can be used with hiddenModules together visibleModules: [ "text", "color", "font", "align", "list", "link", "unlink", "tabulation", "image", "hr", "eraser", "undo", "Full-screen ", "info",], // Extended modules, see examples or see source code: { //omit,reference to source code of build-in modules } })Copy the code

Note: the icon using icon is taken from fontawesome.dashgame.com/ inside, the font awesome repository icon, optional, can replace with the framework of project in the download icon, as used in the demo is hungry components, is replaced by hungry? Icon icon

At this point you should be able to open the basic rich text framework, as follows: ignore randomly matched ICONS

Now try the function implementation and return data

Uploading picture is uploading link, slightly inconvenient, need to expand the new picture uploading component

Note: Link is required for uploading the original picture of the component, but all components can be expanded. Expand another image component and hide the original image, as shown in the figure below (code implementation is explained below).

Let’s see if the returned data is available

Front-end with V-HTML can be rendered completely, to the back end of the data with common editor data format, available

Now expand the video and audio functions

Extension functions directly in modules extension, documentation said to see the source code or examples in the source code, there are not understand can go to see

The expanded function code is as follows (expanded video and pictures) :

modules: [ { name: 'video', icon: 'el-icon-video-camera', i18n: 'video', show: true, init: function(editor) { console.log('emoji module init') }, //vue component dashboard: { template: '<el-upload style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;" class="avatar-uploader" action="" :http-request="uploadImg"> <i class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;"></i> </el-upload>', data: function() { return { videoUrl: '' } }, methods: {uploadImg (file) {/ / interface are encapsulated in enclosing videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4' this.$parent.execCommand('insertHTML', '<video class="rich-img" src="' + this.videoUrl + '" autoplay style="max-width:80%" controls x5-video-player-type="h5" x5-video-orientation="portraint">') } } } }, { name: 'img', icon: 'el-icon-picture', i18n: 'img', show: true, init: function(editor) { console.log('emoji module init') }, //vue component dashboard: { template: '<el-upload class="upload-demo" action="" :http-request="uploadImg"><el-button size="small" </el-button></el-upload>', data: function() {return {imageUrl: '}}, methods: {uploadImg (file) {/ / interface are encapsulated in enclosing imageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'  this.$parent.execCommand('insertHTML', '<img src="' + this.imageUrl + '" style="max-width:80%">') } } } } ]Copy the code

Note: Because there is no interface called here and no compressed image, the demo shows fixed links for convenience. The interface calls are called according to the specific business. The content of the dashboard in the development is your own customized content, and template is the style of selecting labels or uploading the display. To write according to the JS model, execCommand is inserted into the content of the editor, that is, the data you want to return, are self-defined, with high flexibility

In particular, extended components must be registered in visibleModules, otherwise they will not be displayed

Here is the data returned

Note: because it is demo, there is no excessive correction of naming problems, can be named according to the naming specification

3, summarize

Vue – HTML 5 – the editor is an exceptionally good expansibility, flexibility has been particularly strong rich text editor, he can not only realize the PC, and mobile client and certain aspects of the editing work, also can realize the other additional features implemented products all kinds of demand, if you don’t want the editor originally function or display function, There are entrance can be hidden and display, the expansion function also has entrance to expand, in accordance with the specified format insert, the implementation effect is very good, is a good editor

Attached is the overall configuration code for reference only

Export default {// Global component name, invalid with new VueHtml5Editor(options) // global component name name: 'vue-html5-editor', // whether to display the module name, // If set true,will Append Module name to toolbar After icon showModuleName: False, // customize the class of each icon, // Custom icon class of built-in modules,default using FONT -awesome ICONS: {text: 'el-icon-s-order', color: 'el-icon-magic-stick', font: 'el-icon-edit', align: 'el-icon-s-operation', list: 'el-icon-film', link: 'el-icon-link', unlink: 'el-icon-male', tabulation: 'el-icon-connection', image: 'el-icon-picture-outline', hr: 'el-icon-thumb', eraser: 'el-icon-present', undo: 'el-icon-toilet-paper', 'full-screen': Upload: 'el-icon-film', info: 'el-icon-mobile', upload: 'el-icon-scissors'}, // config image module image: {// Maximum file size in bytes Max file size sizeLimit: // upload config,default null and convert image to base64 upload: {url: 'http://localhost:8080/files/upload', headers: {}, params: {}, fieldName: 'file' }, The default compression parameter is localResizeIMG, which is used for compression by default and set to null to disable compression (https://github.com/think2011/localResizeIMG) // set null to disable compression compress: // Handle response data, return image url uploadHandler(responseText) { // default accept json data like {ok:false,msg:"unexpected"} or Parse (responseText) return json.data.fileurl}}, // // default EN-us, en-us and zh-CN are built-in language: 'zh-cn', date: {format: 'YYYY-MM-DD'}, // customize language i18N: {// Specify your language here 'zh-cn': {align: 'align ', image:' image ', list: 'list ', link: 'link ', unlink:' remove link ', table: 'table ', font:' text ', 'full screen', text: 'eraser ',' formatting clear ', info: 'about ', color: 'Color ', 'please enter a url', 'create link',' bold ', 'italic ', underline: 'underline ', 'strike through':' delete line ', subscript: 'superscript ', superscript:' subscript ', heading: 'heading ', 'font name': 'font ', 'font size': 'Text size ', 'left justify', 'center justify', 'right justify', 'ordered List ': 'Ordered List ', 'unordered List ', 'fore color', 'background color', 'row count', 'column count': Upload: 'upload ', progress:' progress ', unknown: 'unknown ', 'please wait', error:' error ', abort: 'interrupt ', reset: 'reset ', video:' video ', img: 'image'}}, // The modules you don't want hiddenModules ['image'], // Customize the module to display, Keep only the modules you want and customize the order. // Can be used with hiddenModules together visibleModules: ['text', 'color', 'font', 'align', 'list', 'link', 'unlink', 'tabulation', 'image', 'hr', 'eraser', 'undo', 'full-screen', 'info', 'emoji', 'video', 'upload', 'img'], modules: [ { name: 'emoji', icon: 'el-icon-delete-solid', i18n: 'emoji', show: true, init: function(editor) { console.log('emoji module init') }, //vue component dashboard: { template: '<div><button v-for="s in symbols" type="button" @click="insertSymbol(s)">{{s}}</button></div>', data: function() { return { symbols: [' > _ < | | | ', '^_^;', 'it's the man you lots ∣ °', '^_^ | | |', '^_^ "- _ -', '. ', '. @ _ @ | | | | |). (it's _ it) ', '... ', 'o_o...', 'O__O', '/ / / ^_^...', '?? O | | | ', '(^_^)?', '(+ _ +)?', '(epsilon?)?', 'o_O???', '@ _ @ a', 'a +', '> "< | | | |', ' '(* > man < *)' ']}}, the methods: { insertSymbol: function(symbol) { console.log(symbol, 'symbol') //$parent is editor component instance this.$parent.execCommand('insertHTML', symbol) } } } }, { name: 'video', icon: 'el-icon-video-camera', i18n: 'video', show: true, init: function(editor) { console.log('emoji module init') }, //vue component dashboard: { template: '<el-upload style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;" class="avatar-uploader" action="" :http-request="uploadImg"> <i class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;"></i> </el-upload>', data: function() { return { videoUrl: '' } }, methods: {uploadImg (file) {/ / interface are encapsulated in enclosing videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4' this.$parent.execCommand('insertHTML', '<video class="rich-img" src="' + this.videoUrl + '" autoplay style="max-width:80%" controls x5-video-player-type="h5" x5-video-orientation="portraint">') } } } }, { name: 'img', icon: 'el-icon-picture', i18n: 'img', show: true, init: function(editor) { console.log('emoji module init') }, //vue component dashboard: { template: '<el-upload class="upload-demo" action="" :http-request="uploadImg"><el-button size="small" </el-button></el-upload>', data: function() {return {imageUrl: '}}, methods: {uploadImg (file) {/ / interface are encapsulated in enclosing imageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'  this.$parent.execCommand('insertHTML', '<img src="' + this.imageUrl + '" style="max-width:80%">') } } } } ] }Copy the code