First I was looking for a full-featured rich text editor that I could use in Vue and stumbled upon Ckeditor, which is really powerful!!
Then I found the ckeditor4-vue plugin and I installed it, but it didn’t have enough features (I don’t know if I missed all of them)
And then I didn’t put the package in the public directory first
Then modify index.html to introduce JS
Then customize a VUE component
When you’re using it, you’ll notice that there’s a pit and a giant pit is your rich text popup and when you’re routing back to the next layer the popup isn’t hidden because it puts the popup in the body of the pit
Don’t worry, here’s how I solved it. I listened for route changes in app.vue. I listened for why
/* Copyright (c) 2019, Weison. All rights reserved. */ (function() { CKEDITOR.plugins.add('uploads', { icons: 'uploads', init: Function (editor) {// create directive editor.addCommand('uploads', {{exec: function (editor)/method/request / / var url = editor. Config. Uploads () url | | editor. Config. FilebrowserUploadUrl; choice().click(); / / select the object function choice () {return window. The uic | | (function () {var ne = document. The createElement method (" input "); ne.setAttribute('type', 'file'); ne.setAttribute('multiple', 'multiple'); ne.setAttribute('accept', 'image/*'); ne.style.display = 'none'; document.body.appendChild(ne); return window.uic = ne; }) (); Function () {var fs = window.uic.files;} var fs = window.uic.files; // Null trigger if (fs.length == 0) {return false; } / / construct object var uio = window. The uio | | (window. Uio = []); for (var i = 0; i < fs.length; i++) { var o = {}; o.file = fs[i]; uio.push(o); } // Call the custom upload method editor.config.uploads().uploadFun(editor, uio)}; // function http(obj) { // if (! Url) {// return alert(' upload URL not configured '); //} // // create id // ups[obj.file.name] = true; // // create progress // // obj.progress = progress(); // // obj.div.appendChild(obj.progress); // // obj.progress.onclick = function() { // // ! obj.src && http(obj); // //} // // Ajax request // var XHR = window.xmlhttprequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); // xhr.onreadystatechange = function() { // if (xhr.readyState == 4 && xhr.status == 200) { // var ret = JSON.parse(xhr.responseText || '{}'); / / / / here you can customize the function of the upload pictures / / if (ret. Uploaded = = 1 | | ret. Code = = = 200) {/ / obj. SRC = ret. Url; // obj.progress.title = 'upload successful '; // obj.progress.setAttribute('style', percentage(100, true)); // } else { // delete obj.src; // var msg = (ret.error || {}).message; // obj.progress.title = (msg ? MSG + ', ': ') +' re-upload '; // obj.progress.setAttribute('style', percentage(100, false)); / / / / / /}}} / / / / finish delete / / XHR onloadend = function (e) {/ / delete ups [obj. File. The name]; / /}; / / / / progress/update/XHR onprogress = function (e) {/ / if (e.l engthComputable) {/ / obj. Progress. SetAttribute (' style ', percentage(e.loaded / e.total * 100, true)) // } // }; / / / / errors / / XHR onerror = function (e) {/ / obj. Progress. SetAttribute (' style 'percentage (100), false)); // obj.progress.title = 'Click re-upload '; / /}; // // submit request // xhr.open("POST", url, true); // var fd = new FormData(); // fd.append('upload', obj.file); // fd.append('type', 'Images'); // fd.append('responseType', 'json'); // xhr.send(fd); / /}}}); Editor.ui. AddButton ('uploads', {label: 'upload file ', command: 'uploads', toolbar: 'insert', icon: this.path + 'icons/uploads.png' }); // CKEDITOR. Dialog. add('uploads', this.path + 'dialogs/uploads.js'); }}); }) ();Copy the codeSo basically what this js is doing is adding a button and clicking on that button calls a callback method which in turn calls the method inside the component editor.config.uploads().uploadFun(Editor, uio)
And then see how the component is written
<template> <div v-loading="loading"> <! -- <ckeditor v-model="editorData" :config="editorConfig"></ckeditor> --> <textarea :id="id" name="content"></textarea> </div> </template> <script> /* eslint-disable */ // import CKEditor from 'ckeditor4-vue' import { uploadUrl } from '@/api/index' import axios from 'axios' export default { // components:{ // ckeditor: }, // data () {// return {// editorData: '<p> type what you want to type.</p>', // editorConfig: { // autoGrow_bottomSpace: 60, // autoGrow_minHeight: 400, // autoGrow_maxHeight: 800, // toolbarGroups : [ // { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, // { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, // { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, // { name: 'forms', groups: [ 'forms' ] }, // '/', // { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, // { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, // { name: 'links', groups: [ 'links' ] }, // { name: 'insert', groups: [ 'insert' ] }, // '/', // { name: 'styles', groups: [ 'styles' ] }, // { name: 'colors', groups: [ 'colors' ] }, // { name: 'tools', groups: [ 'tools' ] }, // { name: 'others', groups: [ 'others' ] }, // { name: 'about' groups: [' about ']} / / / / / / / /}}}, props: (" content "), / / the contents of the transfer from the parent component mounted: function() { const self = this; // Render editor uploadUrl().then(res=>{this.uploadFileurl = res; this.loading = false self.ckeditor = window.CKEDITOR.replace('content', { height:'600px' , removeDialogTabs: 'image:advanced; Image :Link', image_previewText: ', uploads: function () {return {// url: res, // header: {// token: '123456' //}, // custom request body // body: {// size: 10 / /}, /* To ensure correct output after confirmation * The default value returned by the server upload request is {code:000, URL :'http://***'} ', and the default value is url * If the returned body is {code:000,data:{url:'http://***'}} ', set the image path to {code:401,error:' permissions not enough '} */ // / multiple file upload enabled, default false, do not enable // multiple: True // isImg: true, uploadFun: ForEach (file => {self.uploadimg (file, editor)}); }}}}); // Define the height of the editor // set the initial content self.ckeditor. SetData (self.content); Function () {self.$emit("sendContnet", self.ckeditor.getData()); }); }) }, data: function() { return { loading: true, uploadFileUrl: '', id: parseInt(Math.random() * 10000).toString(), ckeditor: null }; }, watch: {// Listen for prop changes, update ckeditor: function() {if (this.content! == this.ckeditor.getData()) { this.ckeditor.setData(this.content); } } }, methods:{ async uploadImg (files, editor) { let file = files.file let size = files.file.size // let maxLength = 1024 * 1024 * 6; // if (size > maxLength) {// this.$message.error(' This file cannot exceed 2M, please compress it before upload! '); // return false; // } let formData = new FormData(); formData.append('img', file); this.loading = true axios.post(this.uploadFileUrl, formData).then((res) => { this.loading = false if(res.data.code === 200){ editor.insertElement(CKEDITOR.dom.element.createFromHtml('<p><img src="' + res.data.url + '" /></p>')); } }) }, } } </script>Copy the codeThen refer to this component where you need to use it without contacting me