陈裕财
4 years ago
19 changed files with 540 additions and 968 deletions
-
2build/webpack.base.conf.js
-
8config/index.js
-
3index.html
-
6package.json
-
3src/components/Tinymce/Index.vue
-
300src/components/VueEditor/Index.vue
-
124src/components/editor/ImgEditor.vue
-
2src/views/mdp/workflow/re/procdefParames/ProcdefParamesSet.vue
-
2src/views/mdp/workflow/ru/procinstParames/ProcinstParamesStartSet.vue
-
2src/views/xm/core/components/headEditor.vue
-
2src/views/xm/core/xmExchange/TaskUserEditor.vue
-
2src/views/xm/core/xmFile/XmFileAdd.vue
-
2src/views/xm/core/xmFile/XmFileEdit.vue
-
2src/views/xm/core/xmMenuExchange/MenuUserEditor.vue
-
2src/views/xm/core/xmProject/XmProjectAssess.vue
-
2src/views/xm/core/xmQuestion/XmQuestionAdd.vue
-
2src/views/xm/core/xmQuestion/XmQuestionEdit.vue
-
2src/views/xm/core/xmTestCase/XmTestCaseAdd.vue
-
2src/views/xm/core/xmTestCase/XmTestCaseEdit.vue
@ -1,300 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<quill-editor style="width:100%;" v-model="content" |
|||
:options="editorOption" |
|||
:id="id" |
|||
ref="myTextEditor" |
|||
@blur="onEditorBlur($event)" |
|||
@focus="onEditorFocus($event)" |
|||
@ready="onEditorReady($event)"> |
|||
<div :id="id+'_toolbar'" slot="toolbar"> |
|||
<!-- Add a bold button --> |
|||
<button class="ql-bold">Bold</button> |
|||
<button class="ql-italic">Italic</button> |
|||
<button class="ql-underline">Underline</button> |
|||
<button class="ql-strike">Strike</button> |
|||
<button class="ql-header" value="1"></button> |
|||
<button class="ql-header" value="2"></button> |
|||
<button class="ql-header" value="3"></button> |
|||
<button class="ql-indent" value="+1"></button> |
|||
<button class="ql-indent" value="-1"></button> |
|||
<button class="ql-direction" value="rtl"></button> |
|||
<!-- Add font size dropdown --> |
|||
<select class="ql-size ql-picker"> |
|||
<option value="small"></option> |
|||
<!-- Note a missing, thus falsy value, is used to reset to default --> |
|||
<option selected></option> |
|||
<option value="large"></option> |
|||
<option value="huge"></option> |
|||
</select> |
|||
<select class="ql-font"> |
|||
<option selected="selected"></option> |
|||
<option value="serif"></option> |
|||
<option value="monospace"></option> |
|||
</select> |
|||
<select class="ql-color"> |
|||
</select> |
|||
<select class="ql-background"> |
|||
</select> |
|||
<!-- Add subscript and superscript buttons --> |
|||
<button class="ql-script" value="sub"></button> |
|||
<button class="ql-script" value="super"></button> |
|||
<button class="ql-link">链接</button> |
|||
<button class="ql-video">视频</button> |
|||
<!-- You can also add your own --> |
|||
<button id="custom-button-img" @click="mateImageButtonClick" style="width:80px;">图片库</button> |
|||
<el-upload ref="uploadFromFile" :action="uploadAction+'?userToken='+token" :on-change="fileChange" :accept="'image/*'" multiple :on-success="uploadSuccess" :on-error="handleUploadError" :show-file-list="false" :before-upload="beforeupload" :data="uploadOptions"> |
|||
<el-button type="text">本地图片</el-button> |
|||
</el-upload> |
|||
</div> |
|||
</quill-editor> |
|||
|
|||
<el-dialog title="裁剪图片" :visible.sync="shearMngVisible" top="0px" width="1100px" :lock-scroll="false" :close-on-click-modal="false" append-to-body> |
|||
<div slot="title">为了良好的客户体验，app图片建议控制在50Kb左右，宽400，高300上限，<br>如果是兼容pc的图片，建议宽800，高600为上限</div> |
|||
<shear-mng :imgWidth="myWidth" :imgHeight="myHeight" :image="image" :fullscreen.sync="fullscreen" :branch-id="uploadOptions.branchId" :category-id="image.categoryId" :remark="uploadOptions.remark" @cancel="shearMngVisible=false" @upload-success="uploadSuccess"></shear-mng> |
|||
</el-dialog> |
|||
<el-dialog title="选择图片" :visible.sync="addFormVisible" width="90%" top="0px" :close-on-click-modal="false" append-to-body> |
|||
<upload-image :branch-id="branchId" :multiple="true" :visible="addFormVisible" @cancel="addFormVisible=false" @confirm="handleConfirm"></upload-image> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import hljs from 'highlight.js' |
|||
//require styles |
|||
import 'quill/dist/quill.core.css' |
|||
import 'quill/dist/quill.snow.css' |
|||
import 'quill/dist/quill.bubble.css' |
|||
import {quillEditor,Quill} from 'vue-quill-editor' |
|||
import { ImageDrop } from 'quill-image-drop-module' |
|||
import ImageResize from 'quill-image-resize-module' |
|||
|
|||
Quill.register('modules/imageDrop', ImageDrop) |
|||
Quill.register('modules/imageResize', ImageResize) |
|||
|
|||
import util from '@/common/js/util';//全局公共库 |
|||
import UploadImage from '@/components/Image/UploadImage'; |
|||
import ShearMng from '@/components/Image/ShearSelectUpload'; |
|||
import config from '@/common/config';//config |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
export default { |
|||
props:['branchId','categoryId','deptid','remark','value','imgWidth','imgHeight','id'], |
|||
watch: { |
|||
'value':function(val){ |
|||
this.content = val; |
|||
}, |
|||
'content':function(content){ |
|||
this.$emit('input',content) |
|||
}, |
|||
'imgWidth':function(val){ |
|||
this.myWidth = val; |
|||
}, |
|||
'imgHeight':function(val){ |
|||
this.myHeight = val; |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
name: '03-example', |
|||
content: "请填写内容/上传图片/视频等", |
|||
editorOption: { |
|||
modules: { |
|||
toolbar: '#'+this.id+'_toolbar', |
|||
history: { |
|||
delay: 1000, |
|||
maxStack: 50, |
|||
userOnly: false |
|||
}, |
|||
imageDrop: true, |
|||
imageResize: { |
|||
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] |
|||
} |
|||
} |
|||
}, |
|||
fullscreen:false, |
|||
addFormVisible:false, |
|||
shearMngVisible:false, |
|||
/**begin 在下面加自定义属性,记得补上面的一个逗号**/ |
|||
image:{categoryId:'123'}, |
|||
uploadOptions:{branchId:this.branchId,categoryId:this.categoryId,fileName:'',remark:'',deptid:this.deptid},//当前选择上传图片的类型 |
|||
previewVisible:false, |
|||
myWidth:this.imgWidth, |
|||
myHeight:this.imgHeight,//80||178 |
|||
currentEditorIndex:0,//记录当前编辑器的选中位置，用于插入图片等 |
|||
uploadAction:config.getArcImagePath()+"/arc/image/upload", |
|||
} |
|||
}, |
|||
components: { |
|||
quillEditor, |
|||
'upload-image':UploadImage, |
|||
'shear-mng':ShearMng |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'userInfo','token' |
|||
]), |
|||
contentCode() { |
|||
return hljs.highlightAuto(this.content).value |
|||
}, |
|||
editor() { |
|||
return this.$refs.myTextEditor.quill |
|||
} |
|||
}, |
|||
methods: { |
|||
onEditorBlur(editor) { |
|||
//console.log('editor blur!', editor) |
|||
}, |
|||
onEditorFocus(editor) { |
|||
//console.log('editor focus!', editor) |
|||
}, |
|||
onEditorReady(editor) { |
|||
console.log('editor ready!', editor) |
|||
this.content = this.value |
|||
}, |
|||
imageButtonClick(ev) { |
|||
var oEvent = ev || event; |
|||
oEvent.preventDefault(); |
|||
let addImgRange = this.editor.getSelection() |
|||
if(addImgRange==null){ |
|||
this.currentEditorIndex=0 |
|||
}else{ |
|||
this.currentEditorIndex=addImgRange.index; |
|||
} |
|||
|
|||
this.addFormVisible=true; |
|||
return false; |
|||
}, |
|||
mateImageButtonClick(ev) { |
|||
var oEvent = ev || event; |
|||
oEvent.preventDefault(); |
|||
let addImgRange = this.editor.getSelection() |
|||
if(addImgRange==null){ |
|||
this.currentEditorIndex=0 |
|||
}else{ |
|||
this.currentEditorIndex=addImgRange.index; |
|||
} |
|||
|
|||
this.addFormVisible=true; |
|||
return false; |
|||
}, |
|||
handleConfirm(imgs){ |
|||
const range = this.editor.getSelection(); |
|||
var editorPosition=this.currentEditorIndex; |
|||
if(range!=null){ |
|||
editorPosition=range.index; |
|||
} |
|||
imgs.forEach(i=>{ |
|||
this.editor.insertEmbed(editorPosition, 'image', i.url, Quill.sources.USER) |
|||
editorPosition=editorPosition+1; |
|||
}) |
|||
|
|||
this.currentEditorIndex=editorPosition; |
|||
//this.shearMngVisible=true; |
|||
}, |
|||
//上传64图片后，指定回调父组件的方法,一般用于保存该图片的信息到另一张表 |
|||
uploadSuccess(res){ |
|||
const range = this.editor.getSelection(); |
|||
var editorPosition=this.currentEditorIndex; |
|||
if(range!=null){ |
|||
editorPosition=range.index; |
|||
} |
|||
|
|||
this.editor.insertEmbed(editorPosition, 'image', res.data.url, Quill.sources.USER) |
|||
this.currentEditorIndex=editorPosition+1; |
|||
this.shearMngVisible=false; |
|||
|
|||
|
|||
/* }); */ |
|||
//this.$emit('cancel'); |
|||
|
|||
}, |
|||
|
|||
handleUploadError : function(err, file, fileList){ |
|||
this.$message({showClose: true, message: "文件上传失败，请检查文件是否过大，建议图片文件控制在500K内", type: "warning" }); |
|||
}, |
|||
/**begin 在下面加自定义方法,记得补上面的一个逗号**/ |
|||
converUrl(url){ |
|||
if(url==null||url==''||url=='undefined'){ |
|||
return url; |
|||
} |
|||
if(!url.indexOf('http')==0 && !url.indexOf('www')==0){ |
|||
return config.getArcImagePath()+"/"+url; |
|||
} |
|||
return url; |
|||
}, |
|||
previewImg(){ |
|||
this.previewVisible=true; |
|||
}, |
|||
beforeupload(file){ |
|||
return true; |
|||
}, |
|||
fileChange(file, fileList) { |
|||
var that = this; |
|||
console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"); |
|||
console.log(file) |
|||
if(file.raw.type.indexOf('image')<0){ |
|||
this.$message({showClose: true, message: "请选择图片文件", type: "warning" }); |
|||
return false; |
|||
} |
|||
return true; |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.myWidth=this.imgWidth?this.imgWidth:400, |
|||
this.myHeight=this.imgHeight?this.imgHeight:300 |
|||
console.log(this.$refs.uploadFromFile); |
|||
var that=this; |
|||
const imgHandler= function(isImage) { |
|||
console.log(isImage) |
|||
let addImgRange = that.editor.getSelection() |
|||
that.currentEditorIndex=addImgRange.index; |
|||
if (isImage) { |
|||
that.$refs.uploadFromFile.$el.querySelector(".el-upload input").click() |
|||
} |
|||
} |
|||
console.log(this.editor) |
|||
this.editor.getModule("toolbar").addHandler("image", imgHandler) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.quill-editor, |
|||
.quill-code { |
|||
width: 50%; |
|||
float: left; |
|||
} |
|||
.quill-code { |
|||
height: auto; |
|||
border: none; |
|||
> .title { |
|||
border: 1px solid #ccc; |
|||
border-left: none; |
|||
height: 3em; |
|||
line-height: 3em; |
|||
text-indent: 1rem; |
|||
font-weight: bold; |
|||
} |
|||
> code { |
|||
width: 100%; |
|||
margin: 0; |
|||
padding: 1rem; |
|||
border: 1px solid #ccc; |
|||
border-top: none; |
|||
border-left: none; |
|||
border-radius: 0; |
|||
height: 30rem; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
.quill-editor{ |
|||
p { |
|||
>img { |
|||
float: left; |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,124 +0,0 @@ |
|||
<template> |
|||
<!--工具条1--> |
|||
<!--如果有更多工具条,放开此注释 |
|||
<el-col :span="24" class="toolbar" size="small" style="padding-bottom: 0px;"> |
|||
<el-col :span="4"> |
|||
</el-col> |
|||
</el-col> |
|||
--> |
|||
|
|||
<!--新增界面 Archive 档案信息表--> |
|||
|
|||
<quill-editor ref="archiveContextEditor" |
|||
v-model="value" |
|||
:options="editorOption" |
|||
@blur="onEditorBlur($event)" |
|||
@focus="onEditorFocus($event)" |
|||
@ready="onEditorReady($event)"> |
|||
</quill-editor> |
|||
</template> |
|||
|
|||
<script> |
|||
//begin富文本编辑器 |
|||
import { quillEditor,Quill } from 'vue-quill-editor' |
|||
import 'quill/dist/quill.core.css' |
|||
import 'quill/dist/quill.snow.css' |
|||
import 'quill/dist/quill.bubble.css' |
|||
import { ImageDrop } from 'quill-image-drop-module' |
|||
import ImageResize from 'quill-image-resize-module' |
|||
Quill.register('modules/imageDrop', ImageDrop) |
|||
Quill.register('modules/imageResize', ImageResize) |
|||
//end 富文本编辑器 |
|||
export default { |
|||
props:['value'] |
|||
data() { |
|||
return { |
|||
editorOption: { |
|||
modules: { |
|||
toolbar: [ |
|||
[{ 'size': ['small', false, 'large'] }], |
|||
['bold', 'italic'], |
|||
[{ 'list': 'ordered'}, { 'list': 'bullet' }], |
|||
['link', 'image'] |
|||
], |
|||
history: { |
|||
delay: 1000, |
|||
maxStack: 50, |
|||
userOnly: false |
|||
}, |
|||
imageDrop: true, |
|||
imageResize: { |
|||
displayStyles: { |
|||
backgroundColor: 'black', |
|||
border: 'none', |
|||
color: 'white' |
|||
}, |
|||
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
computed: { |
|||
contentCode() { |
|||
return hljs.highlightAuto(this.content).value |
|||
}, |
|||
}, |
|||
methods: { |
|||
onEditorBlur(editor) { |
|||
// console.log('editor blur!', editor) |
|||
}, |
|||
onEditorFocus(editor) { |
|||
// console.log('editor focus!', editor) |
|||
}, |
|||
onEditorReady(editor) { |
|||
// console.log('editor ready!', editor) |
|||
} |
|||
}, |
|||
components: { |
|||
//在下面添加其它组件 'archive-edit':ArchiveEdit |
|||
'quill-editor':quillEditor |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.quill-editor:not(.bubble) .ql-container, |
|||
.quill-editor:not(.bubble) .ql-container .ql-editor { |
|||
height: 30rem; |
|||
padding-bottom: 1rem; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.quill-editor, |
|||
.quill-code { |
|||
width: 50%; |
|||
float: left; |
|||
} |
|||
.quill-code { |
|||
height: auto; |
|||
border: none; |
|||
> .title { |
|||
border: 1px solid #ccc; |
|||
border-left: none; |
|||
height: 3em; |
|||
line-height: 3em; |
|||
text-indent: 1rem; |
|||
font-weight: bold; |
|||
} |
|||
> code { |
|||
width: 100%; |
|||
margin: 0; |
|||
padding: 1rem; |
|||
border: 1px solid #ccc; |
|||
border-top: none; |
|||
border-left: none; |
|||
border-radius: 0; |
|||
height: 30rem; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue