parent
4b1c07088e
commit
c7e3f0db08
Binary file not shown.
Binary file not shown.
@ -0,0 +1,47 @@ |
|||||||
|
/** |
||||||
|
* 自定义拖拽指令 |
||||||
|
* 生命周期指令包括: |
||||||
|
* bind 第一次绑定在元素上时调用、只调用一次 |
||||||
|
* inserted 元素被插入父节点时调用、 |
||||||
|
* update
|
||||||
|
* componentUpdate 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 |
||||||
|
* unbind 解绑时调用 |
||||||
|
* |
||||||
|
* mouseEvent类型的事件有: |
||||||
|
* client 提供事件发生时的应用客户端区域的水平坐标,也就是无论是否滚动都会,最上方都是0 |
||||||
|
* ctrlKey 当 ctrl 键被按下,返回 true,否则返回 false。 |
||||||
|
* layer 往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 |
||||||
|
* metaKey mac为Mata,windows为windows键 |
||||||
|
* movement 相当于上一次mouseMove的偏移量 |
||||||
|
* offset 事件对象与目标节点的内填充边(padding edge)的偏移量。 |
||||||
|
* page 相对于文档的坐标,如果向上滚动了200px,点击最上方的值为200 |
||||||
|
* screen 提供鼠标在全局(屏幕)中的坐标(偏移量)。 |
||||||
|
*/ |
||||||
|
|
||||||
|
export default { |
||||||
|
install(Vue) { |
||||||
|
Vue.directive("dragme", { |
||||||
|
// 指令全局命名为v-dragme
|
||||||
|
inserted(el) { |
||||||
|
el.onmousedowm = function (ev) { |
||||||
|
// 获取鼠标按下去时候变量
|
||||||
|
const disX = ev.clientX - el.offsetLeft; |
||||||
|
const disY = ev.clientY - el.offsetTop; |
||||||
|
el.onmousemove = function (ev) { |
||||||
|
const l = ev.clientX - disX; |
||||||
|
const t = ev.clientY - disY; |
||||||
|
// 实时设置元素位置
|
||||||
|
el.style.left = l + "px"; |
||||||
|
el.style.top = t + "px"; |
||||||
|
// 获取鼠标移动时的变量
|
||||||
|
}; |
||||||
|
el.onmouseup = function () { |
||||||
|
// 获取鼠标松开时,销毁所有变量
|
||||||
|
document.onmousemove = null; |
||||||
|
document.onmouseup = null; |
||||||
|
}; |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
}, |
||||||
|
}; |
@ -0,0 +1,324 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog title="布置作业" :visible.sync="dialogVisible" width="width" @close="beforeClose" |
||||||
|
:close-on-click-modal="false"> |
||||||
|
<div class="homeWork"> |
||||||
|
<ImageUpload v-show="false" id="imgUploadQuill" :igonreMin="true" v-model="quillImg" @input="getImg"> |
||||||
|
</ImageUpload> |
||||||
|
<quill-editor v-model="editContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" |
||||||
|
@focus="onEditorFocus($event)" @change="onEditorChange($event)"> |
||||||
|
</quill-editor> |
||||||
|
</div> |
||||||
|
<div slot="footer"> |
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="submit">确 定</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ImageUpload from '@/components/ImageUpload/index.vue' |
||||||
|
import { Quill, quillEditor } from "vue-quill-editor"; //调用编辑器 |
||||||
|
// import Quill from "quill"; |
||||||
|
import "quill/dist/quill.core.css"; |
||||||
|
import "quill/dist/quill.snow.css"; |
||||||
|
import "quill/dist/quill.bubble.css"; |
||||||
|
// import { ImageExtend, QuillWatch } from 'quill-image-extend-module' |
||||||
|
import ImageResize from 'quill-image-resize-module'; |
||||||
|
// 设置字体大小 |
||||||
|
const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上 |
||||||
|
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px",]; |
||||||
|
Quill.register(fontSizeStyle, true); |
||||||
|
// // 设置字体样式 |
||||||
|
const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上 |
||||||
|
const fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong"]; |
||||||
|
Font.whitelist = fonts; // 将字体加入到白名单 |
||||||
|
Quill.register(Font, true); |
||||||
|
Quill.register('modules/imageResize', ImageResize); |
||||||
|
import { ImageDrop } from 'quill-image-drop-module' |
||||||
|
Quill.register('modules/imageDrop', ImageDrop) |
||||||
|
const AlignStyle = Quill.import("attributors/style/align"); |
||||||
|
AlignStyle.whitelist = ["right", "center", "justify"]; |
||||||
|
Quill.register(AlignStyle, true); |
||||||
|
const toolbarOptions = [ |
||||||
|
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike'] |
||||||
|
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }] |
||||||
|
[{ align: [] }], // 对齐方式-----[{ align: [] }] |
||||||
|
// [{ size: ["12px","14px","16px","18px","20px","24px","28px","32px","36px",true] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }] |
||||||
|
// [{ font: ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong",true] }], // 字体种类-----[{ font: [] }] |
||||||
|
[{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }] |
||||||
|
[{ font: fonts }], // 字体种类-----[{ font: [] }] |
||||||
|
[{ header: [1, 2, 3, 4, 5, 6, true] }], // 标题 |
||||||
|
[{ direction: "ltl" }], // 文本方向-----[{'direction': 'rtl'}] |
||||||
|
[{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}] |
||||||
|
[{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }] |
||||||
|
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }] |
||||||
|
[{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }] |
||||||
|
["blockquote", "code-block"], // 引用 代码块-----['blockquote', 'code-block'] |
||||||
|
["clean"], // 清除文本格式-----['clean'] |
||||||
|
["link", "image"], // 链接、图片、视频-----['link', 'image', 'video'] |
||||||
|
]; |
||||||
|
export default { |
||||||
|
components: { quillEditor, ImageUpload }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dialogVisible: false, |
||||||
|
editContent: '', |
||||||
|
quillImg: '', |
||||||
|
editorOption: { |
||||||
|
placeholder: "请输入作业内容", |
||||||
|
modules: { |
||||||
|
toolbar: { |
||||||
|
container: toolbarOptions, |
||||||
|
// handlers: { |
||||||
|
// image: this.handleImgUpload, |
||||||
|
// }, |
||||||
|
handlers: { //此处是图片上传时候需要使用到的 |
||||||
|
'image': function (value) { |
||||||
|
console.log(value) |
||||||
|
if (value) { // 点击图片 |
||||||
|
document.querySelector('#imgUploadQuill .el-upload').click() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 图片拖拽 |
||||||
|
// imageDrop: true, |
||||||
|
imageResize: { |
||||||
|
displayStyles: { |
||||||
|
backgroundColor: 'black', |
||||||
|
border: 'none', |
||||||
|
color: 'white' |
||||||
|
}, |
||||||
|
modules: ['Resize', 'DisplaySize', 'Toolbar'] |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
submit() { |
||||||
|
this.$emit('subWork', this.editContent) |
||||||
|
console.log(this.editContent); |
||||||
|
}, |
||||||
|
beforeClose() { |
||||||
|
this.editContent = '' |
||||||
|
}, |
||||||
|
onEditorReady(editor) { |
||||||
|
// 准备编辑器 |
||||||
|
}, |
||||||
|
getImg(url) { |
||||||
|
console.log(process.env.VUE_APP_BASE_API + url); |
||||||
|
if (url) { |
||||||
|
const quill = this.$refs.myQuillEditor.quill |
||||||
|
// 获取光标位置 |
||||||
|
const pos = quill.getSelection().index |
||||||
|
// 插入图片到光标位置 |
||||||
|
quill.insertEmbed(pos, 'image', process.env.VUE_APP_BASE_API + url) |
||||||
|
} else { |
||||||
|
this.$essage.error('图片插入失败') |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
onEditorBlur() { }, // 失去焦点事件 |
||||||
|
onEditorFocus() { }, // 获得焦点事件 |
||||||
|
// 内容改变事件 |
||||||
|
onEditorChange({ quill, html, text }) { |
||||||
|
if (text.length - 1 > 2000) { |
||||||
|
let event = this.$refs.myQuillEditor |
||||||
|
event.quill.deleteText(2000, 1); |
||||||
|
this.$message({ |
||||||
|
type: 'warning', |
||||||
|
message: '长度超出,无法输入!' |
||||||
|
}); |
||||||
|
// this.content = html |
||||||
|
return |
||||||
|
} |
||||||
|
// this.newsobj.content = this.escapeStringHTML(this.editContent); |
||||||
|
// console.log('输出结果', this.editContent) |
||||||
|
}, |
||||||
|
// 转码 |
||||||
|
escapeStringHTML(content) { |
||||||
|
content = content.replace(/</g, "<"); |
||||||
|
content = content.replace(/>/g, ">"); |
||||||
|
return content; |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.ql-editor { |
||||||
|
min-height: 250px; |
||||||
|
max-height: 400px; |
||||||
|
} |
||||||
|
.homeWork .ql-editor{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.ql-snow .ql-tooltip[data-mode="link"]::before { |
||||||
|
content: "请输入链接地址:"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { |
||||||
|
border-right: 0px; |
||||||
|
content: "保存"; |
||||||
|
padding-right: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-tooltip[data-mode="video"]::before { |
||||||
|
content: "请输入视频地址:"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before { |
||||||
|
content: "14px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { |
||||||
|
content: "10px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { |
||||||
|
content: "18px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { |
||||||
|
content: "32px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label::before, |
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item::before { |
||||||
|
content: "文本"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, |
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { |
||||||
|
content: "标题1"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, |
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { |
||||||
|
content: "标题2"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, |
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { |
||||||
|
content: "标题3"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, |
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { |
||||||
|
content: "标题4"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, |
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { |
||||||
|
content: "标题5"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, |
||||||
|
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { |
||||||
|
content: "标题6"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before, |
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before { |
||||||
|
content: "默认"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, |
||||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before { |
||||||
|
content: "宋体"; |
||||||
|
} |
||||||
|
|
||||||
|
.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: "微软雅黑"; |
||||||
|
} |
||||||
|
|
||||||
|
.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: "楷体"; |
||||||
|
} |
||||||
|
|
||||||
|
.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: "仿宋"; |
||||||
|
} |
||||||
|
|
||||||
|
.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: "黑体"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-toolbar.ql-snow+.ql-container.ql-snow { |
||||||
|
border-bottom-left-radius: 5px; |
||||||
|
border-bottom-right-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-toolbar.ql-snow { |
||||||
|
border-top-left-radius: 5px; |
||||||
|
border-top-right-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-stroke, |
||||||
|
.ql-snow .ql-picker { |
||||||
|
/* color: #999; |
||||||
|
stroke: #999; */ |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-fill, |
||||||
|
.ql-snow .ql-stroke.ql-fill { |
||||||
|
/* fill: #999; */ |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { |
||||||
|
content: "12px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { |
||||||
|
content: "14px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { |
||||||
|
content: "16px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { |
||||||
|
content: "20px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { |
||||||
|
content: "24px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { |
||||||
|
content: "28px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { |
||||||
|
content: "32px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before, |
||||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before { |
||||||
|
content: "36px"; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-container { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue