16 changed files with 822 additions and 172 deletions
-
9package.json
-
53src/assets/styles/archives-manage.scss
-
205src/assets/styles/quillEditor.css
-
180src/components/quillEditor/index.vue
-
25src/views/archiveKeeping/caseManage/caseList/index.vue
-
9src/views/archiveKeeping/caseManage/caseList/module/detailDialog.vue
-
8src/views/archiveUtilize/archiveEditing/index.vue
-
5src/views/archiveUtilize/archiveEditing/module/material.vue
-
77src/views/archiveUtilize/archiveEditing/module/onlineAdd.vue
-
285src/views/archiveUtilize/archiveEditing/module/onlineEditing.vue
-
14src/views/collectReorganizi/collectionLibrary/mixins/index.js
-
9src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue
-
2src/views/collectReorganizi/collectionLibrary/module/quickPaper/index.vue
-
21src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload.vue
-
53src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/index.vue
-
7src/views/components/category/PreviewForm.vue
@ -0,0 +1,205 @@ |
|||||
|
.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: "黑体"; |
||||
|
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: "微软雅黑"; |
||||
|
font-family: "Microsoft YaHei"; |
||||
|
} |
||||
|
|
||||
|
.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: "楷体"; |
||||
|
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: "仿宋"; |
||||
|
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: "Times 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-snow .ql-picker.ql-size .ql-picker-label::before, |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before { |
||||
|
content: "12px"; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before{ |
||||
|
content: "12px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before{ |
||||
|
content: "14px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before{ |
||||
|
content: "16px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before{ |
||||
|
content: "18px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before{ |
||||
|
content: "20px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before{ |
||||
|
content: "22px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before{ |
||||
|
content: "26px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before{ |
||||
|
content: "28px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before{ |
||||
|
content: "30px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { |
||||
|
content: "12px"; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-12px { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { |
||||
|
content: "14px"; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-14px { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { |
||||
|
content: "16px"; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-16px { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { |
||||
|
content: "18px"; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-18px { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { |
||||
|
content: "20px"; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-20px { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before { |
||||
|
content: "22px"; |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-22px { |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { |
||||
|
content: "26px"; |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-26px { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { |
||||
|
content: "28px"; |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-28px { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before { |
||||
|
content: "30px"; |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
|
||||
|
.ql-size-30px { |
||||
|
font-size: 30px; |
||||
|
} |
||||
@ -0,0 +1,180 @@ |
|||||
|
<template> |
||||
|
<quill-editor |
||||
|
:id="randomId(3)" |
||||
|
:ref="editorRef" |
||||
|
v-model="content" |
||||
|
:options="editorOption" |
||||
|
class="editor" |
||||
|
@focus="onEditorFocus($event)" |
||||
|
@blur="onEditorBlur($event)" |
||||
|
@change="onEditorChange($event)" |
||||
|
/> |
||||
|
</template> |
||||
|
<script> |
||||
|
// https://blog.51cto.com/cplvfx/5931866 |
||||
|
// https://www.jianshu.com/p/ceb30ec66d20 |
||||
|
// https://www.cnblogs.com/chenxdnote/p/17611756.html |
||||
|
import { Quill, quillEditor } from 'vue-quill-editor' |
||||
|
import 'quill/dist/quill.core.css' // import styles |
||||
|
import 'quill/dist/quill.snow.css' // for snow theme |
||||
|
import 'quill/dist/quill.bubble.css' // for bubble theme |
||||
|
// 自定义的字体和文字大小样式 |
||||
|
import '@/assets/styles/quillEditor.css' |
||||
|
// import * as Quill from 'quill' |
||||
|
// quill编辑器的字体 |
||||
|
// 'Times-New-Roman', |
||||
|
var fonts = [ |
||||
|
'SimSun', |
||||
|
'SimHei', |
||||
|
'Microsoft-YaHei', |
||||
|
'KaiTi', |
||||
|
'FangSong', |
||||
|
'Arial', |
||||
|
'sans-serif' |
||||
|
] |
||||
|
// 自定义字号的大小 |
||||
|
var sizes = [false, '14px', '16px', '18px', '20px', '22px', '26px', '28px', '30px'] |
||||
|
var Size = Quill.import('formats/size') |
||||
|
Size.whitelist = sizes |
||||
|
var Font = Quill.import('formats/font') |
||||
|
Font.whitelist = fonts // 将字体加入到白名单 |
||||
|
Quill.register(Font, true) |
||||
|
|
||||
|
const toolbarOptions = [ |
||||
|
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike'] |
||||
|
['blockquote', 'code-block'], // 引用 代码块-----['blockquote', 'code-block'] |
||||
|
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }] |
||||
|
[{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }] |
||||
|
[{ indent: '-1' }, { indent: '+1' }], |
||||
|
[{ size: sizes }], // 配置字号 |
||||
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }] |
||||
|
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }] |
||||
|
[{ font: fonts }], // 显示字体选择 |
||||
|
[{ align: [] }], // 对齐方式-----[{ align: [] }] |
||||
|
['clean'], // 清除文本格式-----['clean'] |
||||
|
['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video'] |
||||
|
] |
||||
|
|
||||
|
// 工具栏功能提示 |
||||
|
const titleConfig = [ |
||||
|
{ Choice: '.ql-bold', title: '加粗' }, |
||||
|
{ Choice: '.ql-italic', title: '斜体' }, |
||||
|
{ Choice: '.ql-underline', title: '下划线' }, |
||||
|
{ Choice: '.ql-header', title: '段落格式' }, |
||||
|
{ Choice: '.ql-strike', title: '删除线' }, |
||||
|
{ Choice: '.ql-blockquote', title: '块引用' }, |
||||
|
{ Choice: '.ql-code', title: '插入代码' }, |
||||
|
{ Choice: '.ql-code-block', title: '插入代码段' }, |
||||
|
{ Choice: '.ql-font', title: '字体' }, |
||||
|
{ Choice: '.ql-size', title: '字体大小' }, |
||||
|
{ Choice: '.ql-list[value="ordered"]', title: '编号列表' }, |
||||
|
{ Choice: '.ql-list[value="bullet"]', title: '项目列表' }, |
||||
|
{ Choice: '.ql-direction', title: '文本方向' }, |
||||
|
{ Choice: '.ql-header[value="1"]', title: 'h1' }, |
||||
|
{ Choice: '.ql-header[value="2"]', title: 'h2' }, |
||||
|
{ Choice: '.ql-align', title: '对齐方式' }, |
||||
|
{ Choice: '.ql-color', title: '字体颜色' }, |
||||
|
{ Choice: '.ql-background', title: '背景颜色' }, |
||||
|
{ Choice: '.ql-image', title: '图像' }, |
||||
|
{ Choice: '.ql-upload', title: '文件' }, |
||||
|
{ Choice: '.ql-link', title: '添加链接' }, |
||||
|
{ Choice: '.ql-formula', title: '插入公式' }, |
||||
|
{ Choice: '.ql-clean', title: '清除字体格式' }, |
||||
|
{ Choice: '.ql-script[value="sub"]', title: '下标' }, |
||||
|
{ Choice: '.ql-script[value="super"]', title: '上标' }, |
||||
|
{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' }, |
||||
|
{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' }, |
||||
|
{ Choice: '.ql-header .ql-picker-label', title: '标题大小' }, |
||||
|
{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' }, |
||||
|
{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' }, |
||||
|
{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' }, |
||||
|
{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' }, |
||||
|
{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' }, |
||||
|
{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' }, |
||||
|
{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' }, |
||||
|
{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' }, |
||||
|
{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' }, |
||||
|
{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' }, |
||||
|
{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' }, |
||||
|
{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' }, |
||||
|
{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' }, |
||||
|
{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' }, |
||||
|
{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' } |
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'TestQuillEditor', |
||||
|
components: { quillEditor }, |
||||
|
props: { |
||||
|
// 编辑器的内容 |
||||
|
editorContent: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
editorRef: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
content: this.editorContent, |
||||
|
editorOption: { |
||||
|
theme: 'snow', |
||||
|
modules: { |
||||
|
toolbar: toolbarOptions |
||||
|
} |
||||
|
}, |
||||
|
titleConfig |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 当前富文本实例 |
||||
|
editor() { |
||||
|
return this.$refs.editorRef.quillEditor |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
editorContent() { |
||||
|
this.content = this.editorContent |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '' |
||||
|
for (const item of this.titleConfig) { |
||||
|
const tip = document.querySelector('.quill-editor ' + item.Choice) |
||||
|
if (!tip) continue |
||||
|
tip.setAttribute('title', item.title) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
randomId(len) { |
||||
|
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' |
||||
|
var tempLen = chars.length |
||||
|
var tempStr = '' |
||||
|
for (var i = 0; i < len; ++i) { |
||||
|
tempStr += chars.charAt(Math.floor(Math.random() * tempLen)) |
||||
|
} |
||||
|
return tempStr |
||||
|
}, |
||||
|
// 准备富文本编辑器 |
||||
|
onEditorReady() {}, |
||||
|
// 富文本编辑器 失去焦点事件 |
||||
|
onEditorBlur() {}, |
||||
|
// 富文本编辑器 获得焦点事件 |
||||
|
onEditorFocus() {}, |
||||
|
// 富文本编辑器 内容改变事件 |
||||
|
onEditorChange({ html }) { |
||||
|
// 内容改变事件 |
||||
|
// console.log('内容改变事件'); |
||||
|
this.$emit('input', this.content) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.ql-editor{ |
||||
|
height: 400px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog class="detail-dialog" :title="onlineTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="onlineAddVisible" :before-close="handleCloseDialog"> |
||||
|
<div class="setting-dialog" style="margin-top: 20px;"> |
||||
|
<el-form ref="form" :model="form" inline label-width="100px" style="margin-bottom: 10px;"> |
||||
|
<el-form-item label="文档名称" prop="title" :rules="[{ required: true, message: '请输入文档名称', trigger: 'blur' }]"> |
||||
|
<el-input v-model="form.title" style="width: 580px;" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<editor |
||||
|
v-model="editorContent" |
||||
|
:editor-content="editorContent" |
||||
|
:editor-ref="editorRef" |
||||
|
/> |
||||
|
<!-- 回显富文本编辑器的内容 --> |
||||
|
<!-- <div v-html="editorContent" /> --> |
||||
|
<!-- 查看富文本编辑器的内容 --> |
||||
|
<!-- <div>{{ editorContent }}</div> --> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click.native="handleCloseDialog">取消</el-button> |
||||
|
<el-button type="primary" @click="submit">保存</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import editor from '@/components/quillEditor/index' |
||||
|
export default { |
||||
|
name: 'OnlineAdd', |
||||
|
components: { editor }, |
||||
|
props: { |
||||
|
activeIndex: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
form: { |
||||
|
title: null |
||||
|
}, |
||||
|
onlineTitle: '', |
||||
|
onlineAddVisible: false, |
||||
|
editorRef: 'test', |
||||
|
editorContent: '' |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
submit() { |
||||
|
this.$refs['form'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
console.log('success') |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleCloseDialog(done) { |
||||
|
this.onlineAddVisible = false |
||||
|
// 关闭弹框 |
||||
|
// done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .dialog-footer{ |
||||
|
margin: 30px 0 10px 0 !important |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue