123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417 |
- <template>
- <div>
- <div class="editor" ref="editor" :style="styles" @change="onEditorChange($event)"></div>
-
- <el-upload v-show="false"
- ref="uploadImg"
- class="avatar-uploader"
- :action="imgUploadUrl"
- name="img"
- :headers="header"
- :data="imgData"
- :show-file-list="false"
- :on-success="uploadSuccess"
- :on-error="uploadError"
- :before-upload="beforeUpload">
- </el-upload>
- <el-upload v-show="false"
- ref="uploadVideo"
- class="video-uploader"
- :action="serverUrl"
- :headers="header"
- :data="videoData"
- :show-file-list="false"
- :before-upload="beforeVideoUpload"
- :on-success="uploadVideoSuccess"
- :on-error="uploadVideoError">
- </el-upload>
- </div>
- </template>
- <script>
- import Quill from "quill";
- import "quill/dist/quill.core.css";
- import "quill/dist/quill.snow.css";
- import "quill/dist/quill.bubble.css";
- import { uploadFile } from "@/api/common/common";
- import { getToken } from '@/utils/auth'
- export default {
- name: "Editor",
- props: {
-
- value: {
- type: String,
- default: "",
- },
-
- height: {
- type: Number,
- default: null,
- },
-
- minHeight: {
- type: Number,
- default: null,
- },
-
- params: {
- type: Object,
- default: null,
- }
- },
- data() {
- return {
- Quill: null,
- currentValue: "",
- content: null,
- serverUrl: process.env.VUE_APP_BASE_API+'/common/upload',
- imgUploadUrl: process.env.VUE_APP_BASE_API+'/common/uploadImg',
- header:{
- 'Authorization': 'Bearer ' + getToken()
- },
- videoData:{
- modName: this.params.modName+'video'
- },
- imgData:{
- modName: this.params.modName+'img'
- },
- options: {
- theme: "snow",
- bounds: document.body,
- debug: "warn",
- modules: {
-
- toolbar: {
- container:[
- ['sourceEditor'],
- ["bold", "italic", "underline", "strike"],
- ["blockquote", "code-block"],
- [{ list: "ordered" }, { list: "bullet" }],
- [{ indent: "-1" }, { indent: "+1" }],
- [{ size: ["small", false, "large", "huge"] }],
- [{ header: [1, 2, 3, 4, 5, 6, false] }],
- [{ color: [] }, { background: [] }],
- [{ align: [] }],
- ["clean"],
- ["link", "image", "video"],
- ],
- handlers: {
- shadeBox: null,
- source: false,
-
- sourceEditor: function () {
- this.source = true;
- console.log("开启源码编辑")
-
- const container = this.container;
- const firstChild = container.nextElementSibling.firstChild;
-
- if (!this.shadeBox) {
- let shadeBox = this.shadeBox = document.createElement('div');
- shadeBox.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer';
- container.style.position = 'relative';
- container.appendChild(shadeBox);
- firstChild.innerText = firstChild.innerHTML;
- shadeBox.addEventListener('click', function () {
- this.source = false;
- console.log("关闭源码编辑")
- this.style.display = 'none';
- firstChild.innerHTML = firstChild.innerText.trim();
- }, false);
- } else {
- this.shadeBox.style.display = 'block';
- firstChild.innerText = firstChild.innerHTML;
- }
-
- },
- 'image': function (value) {
- if (value) {
-
- document.querySelector('.avatar-uploader input').click()
- } else {
- this.quill.format('image', false);
- }
- },
- 'video': function (value) {
- if (value) {
-
- document.querySelector('.video-uploader input').click()
- } else {
- this.quill.format('video', false);
- }
- }
- }
- }
- },
- placeholder: "请输入内容",
- readOnly: false,
- initButton: function () {
-
- const sourceEditorButton = document.querySelector('.ql-sourceEditor');
- sourceEditorButton.style.cssText = 'font-size:18px';
-
- sourceEditorButton.classList.add('el-icon-edit-outline');
-
- sourceEditorButton.title = '源码编辑';
- },
- register(q){
-
- class div extends q.import('blots/block/embed') {}
- class table extends q.import('blots/block/embed') {}
- class tr extends q.import('blots/block/embed') {}
- class td extends q.import('blots/block/embed') {}
- div.blotName =div.tagName='div';
- table.blotName =table.tagName='table';
- tr.blotName =tr.tagName='tr';
- td.blotName =td.tagName='td';
- q.register(div);
- q.register(table);
- q.register(tr);
- q.register(td);
- },
- },
- };
- },
- computed: {
- styles() {
- let style = {};
- if (this.minHeight) {
- style.minHeight = `${this.minHeight}px`;
- }
- if (this.height) {
- style.height = `${this.height}px`;
- }
- return style;
- },
- },
- watch: {
- value: {
- handler(val) {
- if (val !== this.currentValue) {
- this.currentValue = val === null ? "" : val;
- if (this.Quill) {
- this.Quill.pasteHTML(this.value);
- }
- }
- },
- immediate: true,
- },
- },
- mounted() {
- this.init();
- this.options.register(Quill);
- this.options.initButton();
- },
- beforeDestroy() {
- this.Quill = null;
- },
- methods: {
- init() {
- const editor = this.$refs.editor;
- this.Quill = new Quill(editor, this.options);
- this.Quill.pasteHTML(this.currentValue);
- this.Quill.on("text-change", (delta, oldDelta, source) => {
- const html = this.$refs.editor.children[0].innerHTML;
- const text = this.Quill.getText();
- const quill = this.Quill;
- this.currentValue = html;
- this.$emit("input", html);
- this.$emit("on-change", { html, text, quill });
- });
- this.Quill.on("text-change", (delta, oldDelta, source) => {
- this.$emit("on-text-change", delta, oldDelta, source);
- });
- this.Quill.on("selection-change", (range, oldRange, source) => {
- this.$emit("on-selection-change", range, oldRange, source);
- });
- this.Quill.on("editor-change", (eventName, ...args) => {
- this.$emit("on-editor-change", eventName, ...args);
- });
- },
- onEditorChange({editor, html, text}) {
- console.log("---内容改变事件---");
- this.content = html
-
- },
-
- beforeUpload(file) {
-
- const index = ['image/jpg','image/jpeg','image/gif','image/png'].findIndex(y => Object.is(file.type, y));
- const isLt2M = file.size / 1024 / 1024 < 2;
- var isJPG = true;
- if (index < 0) {
- isJPG = false;
- this.$message.error('上传头像图片只能是 jpg/gif/png 格式!');
- }
- if (!isLt2M) {
- this.$message.error('上传头像图片大小不能超过 2MB!');
- }
- return isJPG && isLt2M;
- },
- uploadSuccess(res, file) {
-
-
- console.log(res);
- let quill = this.Quill;
-
- if (res.code == 200 ) {
-
- let length = quill.getSelection().index;
-
- var fileName = res.fileName.replace('//', '/')
- quill.insertEmbed(length, 'image',process.env.VUE_APP_BASE_API+ fileName);
-
- quill.setSelection(length + 1)
- } else {
- this.$message.error('图片插入失败')
- }
- },
- uploadFile(){
- return process.env.VUE_APP_BASE_API+'/common/uploadImg'
- },
-
- uploadError() {
- this.$message.error('图片插入失败')
- },
-
- beforeVideoUpload(file){
- const size = file.size / 1024 / 1024 < 20;
- if (['video/MP4','video/mp4', 'video/ogg', 'video/webm', 'video/WebM'].indexOf(file.type) == -1) {
- this.$message.error('视频仅支持 MP4,WebM,Ogg 格式');
- return false;
- }
- if (!size) {
- this.$message.error('上传视频大小不能超过 20MB');
- return false;
- }
- },
- uploadVideoSuccess(res, file){
-
-
- console.log(res);
- let quill = this.Quill;
-
- if (res.code == 200 ) {
-
- let length = quill.getSelection().index;
-
- var fileName = res.fileName.replace('//', '/')
- quill.insertEmbed(length, 'video',process.env.VUE_APP_BASE_API+ fileName);
-
- quill.setSelection(length + 1)
- } else {
- this.$message.error('视频插入失败')
- }
- },
- uploadVideoError(){
- this.$message.error('视频插入失败')
- }
- },
- };
- </script>
- <style>
- .editor {
- white-space: pre-wrap!important;
- line-height: normal !important;
- }
- .quill-img {
- display: none;
- }
- .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;
- }
- .quill-video {
- display: none;
- }
- .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="serif"]::before,
- .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
- content: "衬线字体";
- }
- .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
- .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
- content: "等宽字体";
- }
- .ql-container{
- overflow-y:auto;
- height:8rem!important;
- }
- .ql-container ::-webkit-scrollbar{
- width: 10px;
- height: 10px;
- }
- .ql-container ::-webkit-scrollbar-thumb{
- background: #666666;
- border-radius: 5px;
- }
- .ql-container ::-webkit-scrollbar-track{
- background: #ccc;
- border-radius: 5px;
- }
- </style>
|