|
|
@@ -44,7 +44,8 @@
|
|
|
<el-form-item label="内容" prop="content">
|
|
|
<!-- bidirectional data binding（双向数据绑定） -->
|
|
|
<quill-editor
|
|
|
- v-model.trim="form.content"
|
|
|
+ class="ql-editor"
|
|
|
+ v-model="form.content"
|
|
|
ref="myQuillEditor"
|
|
|
:options="editorOption"
|
|
|
@change="onEditorChange($event)"
|
|
|
@@ -99,7 +100,7 @@ import { vaildStudentUrl } from "@/utils/validate";
|
|
|
import "quill/dist/quill.core.css";
|
|
|
import "quill/dist/quill.snow.css";
|
|
|
import "quill/dist/quill.bubble.css";
|
|
|
-import Quill from 'quill'
|
|
|
+import Quill from "quill";
|
|
|
import { quillEditor } from "vue-quill-editor";
|
|
|
// 工具栏配置
|
|
|
const toolbarOptions = [
|
|
|
@@ -140,22 +141,22 @@ const titleConfig = {
|
|
|
"ql-direction": "文本方向",
|
|
|
"ql-code-block": "代码块",
|
|
|
"ql-formula": "公式",
|
|
|
- 'ql-image': '图片',
|
|
|
+ "ql-image": "图片",
|
|
|
"ql-video": "视频",
|
|
|
"ql-clean": "清除字体样式",
|
|
|
"ql-upload": "文件"
|
|
|
};
|
|
|
|
|
|
// 这里引入修改过的video模块并注册
|
|
|
-import Video from '../quill/video.js'
|
|
|
-Quill.register(Video, true)
|
|
|
+import Video from "../quill/video.js";
|
|
|
+Quill.register(Video, true);
|
|
|
export default {
|
|
|
name: "contentOperation",
|
|
|
components: {
|
|
|
quillEditor
|
|
|
},
|
|
|
data() {
|
|
|
- let that = this
|
|
|
+ let that = this;
|
|
|
return {
|
|
|
categoryList: [],
|
|
|
type: this.$route.query.type,
|
|
|
@@ -183,10 +184,10 @@ export default {
|
|
|
},
|
|
|
video: function(value) {
|
|
|
if (value) {
|
|
|
- that.dialogFormVisible = true
|
|
|
- let editor = that.$refs.myQuillEditor.quill
|
|
|
+ that.dialogFormVisible = true;
|
|
|
+ let editor = that.$refs.myQuillEditor.quill;
|
|
|
// 光标所在位置
|
|
|
- that.editorIndex = editor.getSelection().index
|
|
|
+ that.editorIndex = editor.getSelection().index;
|
|
|
} else {
|
|
|
this.quill.format("image", false);
|
|
|
}
|
|
|
@@ -200,7 +201,9 @@ export default {
|
|
|
url: null
|
|
|
},
|
|
|
dialogFormRules: {
|
|
|
- poster: [{ required: true, message: "请输入封面地址", trigger: "blur" }],
|
|
|
+ poster: [
|
|
|
+ { required: true, message: "请输入封面地址", trigger: "blur" }
|
|
|
+ ],
|
|
|
url: [{ required: true, message: "请输入视屏地址", trigger: "blur" }]
|
|
|
},
|
|
|
form: {
|
|
|
@@ -266,19 +269,19 @@ export default {
|
|
|
onVideoComfirm(formName) {
|
|
|
this.$refs[formName].validate(valid => {
|
|
|
if (valid) {
|
|
|
- let dialogForm = this.dialogForm
|
|
|
+ let dialogForm = this.dialogForm;
|
|
|
// 获取富文本组件实例
|
|
|
let quill = this.editor;
|
|
|
// 插入图片，res为服务器返回的图片链接地址
|
|
|
quill.insertEmbed(this.editorIndex, "video", dialogForm);
|
|
|
// 调整光标到最后
|
|
|
quill.setSelection(this.editorIndex + 1);
|
|
|
-
|
|
|
- this.dialogFormVisible = false
|
|
|
+
|
|
|
+ this.dialogFormVisible = false;
|
|
|
this.dialogForm = {
|
|
|
poster: null,
|
|
|
url: null
|
|
|
- }
|
|
|
+ };
|
|
|
} else {
|
|
|
return false;
|
|
|
}
|
|
|
@@ -411,20 +414,20 @@ export default {
|
|
|
let tempTitle = {
|
|
|
1: "精彩活动",
|
|
|
2: "热门资讯",
|
|
|
- 3: "活动列表",
|
|
|
4: "专项训练",
|
|
|
5: "闪页管理",
|
|
|
+ 3: "BANNER管理",
|
|
|
6: "APP按钮管理"
|
|
|
};
|
|
|
return tempTitle[type];
|
|
|
},
|
|
|
typeIndex(type) {
|
|
|
let tempTitle = {
|
|
|
- 3: 0,
|
|
|
- 1: 1,
|
|
|
- 2: 2,
|
|
|
- 4: 3,
|
|
|
- 5: 4,
|
|
|
+ 1: 0,
|
|
|
+ 2: 1,
|
|
|
+ 3: 4,
|
|
|
+ 4: 2,
|
|
|
+ 5: 3,
|
|
|
6: 5
|
|
|
};
|
|
|
return tempTitle[type];
|
