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