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