Skip to content

A
Admin
Commit 73595ec4 authored by 周远喜's avatar 周远喜
Browse files
Options

store+富文本+截图粘贴

parent 0e87e5ec
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 54 deletions
components/quill/index.vue
View file @ 73595ec4
......@@ -9,7 +9,9 @@
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// import { ImageDrop } from 'quill-image-drop-module';
// import '@/libs/image-paste.min.js'
// Quill.register('modules/imageDrop', ImageDrop);
export default {
name: 'i-quill',
props: {
......@@ -37,6 +39,7 @@
bounds: document.body,
debug: 'warn',
modules: {
// imagePaste: {},
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
......@@ -95,6 +98,7 @@
const editor = this.$refs.editor;
// 初始化编辑器
this.Quill = new Quill(editor, this.options);
// window.Quill=this.Quill;
// 默认值
this.Quill.pasteHTML(this.currentValue);
// 绑定事件
......
layouts/basic-layout/menu-side/index.vue
View file @ 73595ec4
......@@ -9,6 +9,7 @@
</i-link>
</transition>
</div>
<h1>{{$store.state.admin.menu.headerName}}</h1>
<Menu
ref="menu"
class="i-layout-menu-side i-scrollbar-hide"
......
libs/image-paste.min.js 0 → 100644
View file @ 73595ec4
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ImagePaste=t():e.ImagePaste=t()}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"ImagePaste",function(){return o});var o=function e(t){var n=this,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};i(this,e),this.handlePaste=function(e){var t=e.clipboardData,i=void 0,o=void 0,r=void 0;if(t&&(i=t.items)){o=i[0],r=t.types||[];for(var a=0;a<r.length;a++)if("Files"===r[a]){o=i[a];break}if(o&&"file"===o.kind&&o.type.match(/^image\//i)){e.preventDefault();var s=o.getAsFile(),u=n.config.addImageBlob;u&&"[object Function]"==={}.toString.call(u)?u(s,n.insertImg):n.toBase64(s)}}},this.toBase64=function(e){var t=new FileReader;t.onload=function(e){n.insertImg(e.target.result)},t.readAsDataURL(e)},this.insertImg=function(e){var t=(n.quill.getSelection()||{}).index||n.quill.getLength()-1;n.quill.insertEmbed(t,"image",e,"user"),setTimeout(function(){n.quill.setSelection(t+1)},0)},this.quill=t,this.config=o,t.root.addEventListener("paste",this.handlePaste,!1)};window.Quill&&window.Quill.register("modules/imagePaste",o)}])});
\ No newline at end of file
libs/system/index.js
View file @ 73595ec4
......@@ -154,6 +154,7 @@ export { flattenSiderMenu };
* */
function includeArray (list1, list2) {
let status = false;
console.warn("auth",list1,list2)
list2.forEach(item => {
if (list1.includes(item)) status = true;
});
......
menu/header.js
View file @ 73595ec4
......@@ -5,7 +5,7 @@ export default [
path: '/',
title: '首页',
icon: 'md-home',
hideSider: false,
hideSider: true,
name: 'home'
},
{
......
menu/modules/dashboard.js
View file @ 73595ec4
......@@ -9,6 +9,14 @@ export default {
{
path: `${pre}console`,
title: '主控台'
},
{
path: `/`,
title: '首页'
},
{
path: `/editor`,
title: '编辑器'
}
]
}
menu/sider.js
View file @ 73595ec4
......@@ -6,5 +6,5 @@ import log from './modules/log';
export default [
dashboard,
log
log,
];
nuxt.config.js
View file @ 73595ec4
......@@ -3,7 +3,7 @@ const path = require('path')
const resolve = dir => {
return path.join(__dirname, dir)
}
const webpack = require('webpack')
// 增加环境变量
process.env.VUE_APP_VERSION = require('./package.json').version;
process.env.VUE_APP_BUILD_TIME = require('dayjs')().format('YYYY-M-D HH:mm:ss');
......@@ -20,6 +20,9 @@ export default {
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
script: [{
src: '/config.js'
}],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
......@@ -77,14 +80,14 @@ export default {
},
extend (config, ctx) {
config.resolve.alias['_c']=path.resolve(__dirname, 'components')
config.module.rules.push({
enforce:'pre',
test: /\.vue$/,
loader: 'iview-loader',
options: {
prefix: false
}
});
// config.module.rules.push({
// enforce:'pre',
// test: /\.vue$/,
// loader: 'iview-loader',
// options: {
// prefix: false
// }
//});
}
// ,
// chainWebpack: config => {
......@@ -96,6 +99,8 @@ export default {
// .add(path.resolve(__dirname,'libs/iview-pro'))
// .end();
// },
,plugins: [
new webpack.ProvidePlugin({'window.Quill':'quill' })
]
}
}
package-lock.json
View file @ 73595ec4
......@@ -3115,9 +3115,9 @@
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
},
"deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.0.tgz",
"integrity": "sha512-ZbfWJq/wN1Z273o7mUSjILYqehAktR2NVoSrOukDkU9kg2v/Uv89yU4Cvz8seJeAmtN5oqiefKq8FPuXOboqLw==",
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
......@@ -5782,9 +5782,9 @@
"integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ=="
},
"object-is": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY="
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.2.tgz",
"integrity": "sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ=="
},
"object-keys": {
"version": "1.1.1",
......@@ -7254,6 +7254,14 @@
"fast-diff": "1.1.2"
}
},
"quill-image-drop-module": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/quill-image-drop-module/-/quill-image-drop-module-1.0.3.tgz",
"integrity": "sha1-Dl7IMp3WehISbxZrGRv2TSBXp9M=",
"requires": {
"quill": "^1.2.2"
}
},
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
......@@ -7380,11 +7388,83 @@
}
},
"regexp.prototype.flags": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz",
"integrity": "sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
"integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
"requires": {
"define-properties": "^1.1.2"
"define-properties": "^1.1.3",
"es-abstract": "^1.17.0-next.1"
},
"dependencies": {
"es-abstract": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0.tgz",
"integrity": "sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==",
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
"has": "^1.0.3",
"has-symbols": "^1.0.1",
"is-callable": "^1.1.5",
"is-regex": "^1.0.5",
"object-inspect": "^1.7.0",
"object-keys": "^1.1.1",
"object.assign": "^4.1.0",
"string.prototype.trimleft": "^2.1.1",
"string.prototype.trimright": "^2.1.1"
}
},
"es-to-primitive": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
"requires": {
"is-callable": "^1.1.4",
"is-date-object": "^1.0.1",
"is-symbol": "^1.0.2"
}
},
"has-symbols": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
},
"is-callable": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
"integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q=="
},
"is-regex": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
"integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
"requires": {
"has": "^1.0.3"
}
},
"object-inspect": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
"integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw=="
},
"string.prototype.trimleft": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz",
"integrity": "sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==",
"requires": {
"define-properties": "^1.1.3",
"function-bind": "^1.1.1"
}
},
"string.prototype.trimright": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz",
"integrity": "sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==",
"requires": {
"define-properties": "^1.1.3",
"function-bind": "^1.1.1"
}
}
}
},
"regexpu-core": {
......@@ -8881,6 +8961,15 @@
"resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
"integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
},
"vue-quill-editor": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
"integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
"requires": {
"object-assign": "^4.1.1",
"quill": "^1.3.4"
}
},
"vue-router": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
......@@ -9053,8 +9142,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
......@@ -9419,8 +9507,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -9468,7 +9555,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -9507,13 +9593,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
},
......
package.json
View file @ 73595ec4
......@@ -26,12 +26,14 @@
"mockjs": "^1.0.1-beta3",
"nuxt": "^2.10.2",
"qs": "^6.6.0",
"quill": "^1.3.6",
"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3",
"screenfull": "^4.0.0",
"simplemde": "^1.11.2",
"ua-parser-js": "^0.7.18",
"view-design": "^4.0.0",
"vue-i18n": "^7.8.1"
"vue-i18n": "^7.8.1",
"vue-quill-editor": "^3.0.6"
},
"devDependencies": {}
}
pages/editor/index.vue 0 → 100644
View file @ 73595ec4
<template>
<div>
<div class="i-layout-page-header">
<PageHeader title="Quill 编辑器" content="对 Quill 进行过封装，可以使用 v-model 绑定数据。" hidden-breadcrumb />
</div>
<Card :bordered="false" dis-hover class="ivu-mt">
<i-quill v-model="value" :min-height="400" v-paste="handleImg" />
<Divider />
<Button @click="handleAddText">增加文本</Button>
<Button @click="handleAddImg" class="ivu-ml">增加图片</Button>
<textarea id="abc" cols="30" rows="10" v-paste="handleImg"></textarea>
</Card>
<Card title="HTML 内容" :bordered="false" dis-hover class="ivu-mt">{{ value }}</Card>
</div>
</template>
<script>
import iQuill from "@/components/quill";
export default {
name: "editor-quill",
components: { iQuill },
data() {
return {
value: `<h1>iView Admin Pro</h1>`
};
},
methods: {
handleAddText() {
this.value +=
'<p><span style="color: #19be6b;">新增加的内容。</span></p>';
},
handleAddImg() {
this.value +=
'<p><img src="https://file.iviewui.com/dist/2ecd3b0452aa197097d5131afacab7b8.png"></p>';
},
handleImg(e) {
console.warn(e);
let file = null;
if (
e.clipboardData &&
e.clipboardData.items[0] &&
e.clipboardData.items[0].type &&
e.clipboardData.items[0].type.indexOf("image") > -1
) {
//这里就是判断是否有粘贴进来的文件且文件为图片格式
file = e.clipboardData.items[0].getAsFile();
let reader = new FileReader();
reader.readAsDataURL(file)
setTimeout(() => {
var img = '<img src="' + reader.result + '" alt=""/>';
this.value += img;
console.log("value", this.value);
}, 1000);
new R
}
}
}
};
</script>
pages/index.vue
View file @ 73595ec4
......@@ -28,6 +28,8 @@
</div>
<div>
1121<i-switch true-color="#13ce66" false-color="#ff4949" />222
<AvatarList :list="list" :max="10" :excess-style="excessStyle" />
</div>
</div>
</template>
......@@ -40,6 +42,36 @@ export default {
components: {
Logo
},
data(){
return {
excessStyle: {
color: '#f56a00',
backgroundColor: '#fde3cf'
},
list: [
{
src: 'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
tip: '史蒂夫·乔布斯'
},
{
src: 'https://dev-file.iviewui.com/zhj85zgAfEjChCNIKT1LQENUIOyOYCaX/avatar',
tip: '斯蒂夫·沃兹尼亚克'
},
{
src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
tip: '乔纳森·伊夫'
},
{
src: 'https://dev-file.iviewui.com/xrzbBR99F6tYsDJPLNrvwhllowbuL7Gw/avatar',
tip: '蒂姆·库克'
},
{
src: 'https://dev-file.iviewui.com/bgrngoUb9A6UQ2kAwBFtnSNzhrh2qj1O/avatar',
tip: '比尔·费尔南德斯'
}
]
}
}
}
</script>
<style lang="less">
......
plugins/admin.js
View file @ 73595ec4
......@@ -15,7 +15,7 @@ console.warn("env",env)
if (Setting.isMock) {
require('@/mock')
}
export default ({ app, store,router })=>{
/**export default ({ app, store,router })=>{
store.dispatch('admin/i18n/getLocale');
const locale = store.state.admin.i18n.locale;
app.i18n= new VueI18n({
......@@ -24,7 +24,7 @@ export default ({ app, store,router })=>{
silentTranslationWarn: false
})
}
/**
*/
export default ({ app, store,router }) => {
store.dispatch('admin/i18n/getLocale');
const locale = store.state.admin.i18n.locale;
......@@ -57,5 +57,5 @@ export default ({ app, store,router })=>{
store.commit('admin/menu/setOpenNames', openNames);
}
*/
plugins/index.js
View file @ 73595ec4
......@@ -17,5 +17,7 @@ export default {
// 指令
Vue.directive('auth', directiveAuth);
}
}
plugins/iview.js
View file @ 73595ec4
......@@ -6,5 +6,12 @@ import 'view-design/dist/styles/iview.css';
import iViewPro from '../iview-pro/src/index.js';
import '@/libs/iview-pro/iview-pro.css';
// import '../iview-pro/src/styles/index.less';
Vue.directive('paste',{
bind(el,binding,vnode) {
el.addEventListener('paste',function(event){ //这里直接监听元素的粘贴事件
binding.value(event)
})
}
})
Vue.use(ViewUI);
Vue.use(iViewPro);
router/routes.js
View file @ 73595ec4
......@@ -20,22 +20,22 @@ const frameIn = [
name: 'dashboard-console'
}
},
// {
// path: 'dic',
// name: 'dic',
// redirect: {
// name: 'dashboard-console'
// }
// },
// {
// path: 'log',
// name: 'log',
// meta: {
// title: '前端日志',
// auth: true
// },
// component: () => import('@/pages/system/log')
// },
{
path: 'dic',
name: 'dic',
redirect: {
name: 'dashboard-console'
}
},
{
path: 'log',
name: 'log',
meta: {
title: '前端日志',
auth: true
},
// component: () => import('@/pages/system/log')
},
// 刷新页面 必须保留
{
path: 'refresh',
......
static/config.js 0 → 100644
View file @ 73595ec4
// window.Quill='123quill'
\ No newline at end of file
store/modules/admin/modules/menu.js
View file @ 73595ec4
......@@ -31,7 +31,7 @@ export default {
// 侧栏菜单
sider: [],
// 当前顶栏菜单的 name
headerName: '',
headerName: '2222',
// 当前所在菜单的 path
activePath: '',
// 展开的子菜单 name 集合
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment