添加富文本url

This commit is contained in:
熊丽君
2021-07-26 12:01:29 +08:00
parent a3090ba6ae
commit 6797895b10
7 changed files with 205 additions and 78 deletions

BIN
src/assets/image/jiace.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 477 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 369 KiB

View File

@ -1,56 +1,66 @@
import Vue from 'vue'
import Vue from 'vue';
import Cookies from 'js-cookie'
import Cookies from 'js-cookie';
import 'normalize.css/normalize.css' // a modern alternative to CSS resets
import 'normalize.css/normalize.css'; // a modern alternative to CSS resets
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import Element from 'element-ui';
import './assets/styles/element-variables.scss';
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import permission from './directive/permission'
import '@/assets/styles/index.scss'; // global css
import '@/assets/styles/ruoyi.scss'; // ruoyi css
import App from './App';
import store from './store';
import router from './router';
import permission from './directive/permission';
import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/ruoyi";
import Pagination from "@/components/Pagination";
import './assets/icons'; // icon
import './permission'; // permission control
import { getDicts } from '@/api/system/dict/data';
import { getConfigKey } from '@/api/system/config';
import {
parseTime,
resetForm,
addDateRange,
selectDictLabel,
selectDictLabels,
download,
handleTree
} from '@/utils/ruoyi';
import { formatRichText } from '@/utils/editor';
import Pagination from '@/components/Pagination';
//自定义表格工具扩展
import RightToolbar from "@/components/RightToolbar"
import RightToolbar from '@/components/RightToolbar';
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.getDicts = getDicts;
Vue.prototype.getConfigKey = getConfigKey;
Vue.prototype.parseTime = parseTime;
Vue.prototype.resetForm = resetForm;
Vue.prototype.addDateRange = addDateRange;
Vue.prototype.selectDictLabel = selectDictLabel;
Vue.prototype.selectDictLabels = selectDictLabels;
Vue.prototype.download = download;
Vue.prototype.handleTree = handleTree;
Vue.prototype.formatRichText = formatRichText;
Vue.prototype.msgSuccess = function (msg) {
this.$message({ showClose: true, message: msg, type: "success" });
}
Vue.prototype.msgSuccess = function(msg) {
this.$message({ showClose: true, message: msg, type: 'success' });
};
Vue.prototype.msgError = function (msg) {
this.$message({ showClose: true, message: msg, type: "error" });
}
Vue.prototype.msgError = function(msg) {
this.$message({ showClose: true, message: msg, type: 'error' });
};
Vue.prototype.msgInfo = function (msg) {
Vue.prototype.msgInfo = function(msg) {
this.$message.info(msg);
}
};
// 全局组件挂载
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Pagination', Pagination);
Vue.component('RightToolbar', RightToolbar);
Vue.use(permission)
Vue.use(permission);
/**
* If you don't want to use mock-server
@ -63,13 +73,13 @@ Vue.use(permission)
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})
});
Vue.config.productionTip = false
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
});

51
src/utils/editor.js Normal file
View File

@ -0,0 +1,51 @@
export function formatRichText(url) {
let src = document.querySelectorAll('#text .ql-editor img');
console.log(src);
for (let i = 0; i < src.length; i++) {
const string = src[i].getAttribute('src');
src[i].setAttribute('src', url + string);
}
let src2 = document.querySelectorAll('#text .ql-editor a');
for (let i = 0; i < src2.length; i++) {
const string = src2[i].getAttribute('href');
src2[i].setAttribute('href', url + string);
}
// console.log(document.querySelectorAll('#text .ql-editor a'));
// var imgReg = /<img.*?(?:>|\/>)/gi;
// var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
// var arr = html.match(imgReg);
// // console.log(arr);
// for (let i = 0; i < arr.length; i++) {
// let src = arr[i].match(srcReg);
// //获取图片地址
// console.log(html);
// console.log(src[1]);
// if (src[1]) {
// var newContent = html.replace(
// /\<img/gi,
// `<img src="${url}${src[1]}"`
// );
// }
// }
// return this.aaa(url, newContent);
}
// function aaa(url, html) {
// console.log(url);
// console.log(html);
// var aReg = /<a.*?(?:>|\/>)/gi;
// var hrefReg = /href=[\'\"]?([^\'\"]*)[\'\"]?/i;
// var arr2 = html.match(aReg);
// for (let i = 0; i < arr2.length; i++) {
// let src = arr2[i].match(hrefReg);
// //获取图片地址
// if (src[1]) {
// var newContent = html.replace(/\<a/gi, `<a href="${url}${src[1]}"`);
// }
// // 替换src
// // if (src[0]) {
// // var t = src[0].replace(/src/i, 'href');
// // console.log(t);
// // }
// }
// return newContent;
// }

View File

@ -2,7 +2,7 @@
<div class="login">
<div class="login-title">
<!-- <img src="../assets/image/logo.png" alt="" /> -->
<span>嘉策科技创新服务平台</span>
<!-- <span>嘉策科技创新服务平台</span> -->
</div>
<el-form
ref="loginForm"
@ -70,82 +70,80 @@
</template>
<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
export default {
name: "Login",
name: 'Login',
data() {
return {
loginForm: {
username: "ailanyin",
password: "ailanyin",
rememberMe: false,
username: 'ailanyin',
password: 'ailanyin',
rememberMe: false
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" },
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" },
{ required: true, trigger: 'blur', message: '用户名不能为空' }
],
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
},
loading: false,
redirect: undefined,
redirect: undefined
};
},
watch: {
$route: {
handler: function (route) {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
immediate: true
}
},
created() {
this.getCookie();
},
methods: {
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get("rememberMe");
const username = Cookies.get('username');
const password = Cookies.get('password');
const rememberMe = Cookies.get('rememberMe');
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30,
Cookies.set('username', this.loginForm.username, { expires: 30 });
Cookies.set('password', encrypt(this.loginForm.password), {
expires: 30
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30,
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30
});
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
Cookies.remove('username');
Cookies.remove('password');
Cookies.remove('rememberMe');
}
this.$store
.dispatch("Login", this.loginForm)
.dispatch('Login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" });
this.$router.push({ path: this.redirect || '/' });
})
.catch(() => {
this.loading = false;
});
}
});
},
},
}
}
};
</script>
@ -158,7 +156,7 @@ $loginForm: 383px;
// align-items: center;
height: 100%;
min-height: $loginHeight;
// background-image: url('../assets/image/login-bg.jpg');
background-image: url('../assets/image/jiace.png');
background-size: cover;
position: relative;
}

View File

@ -47,7 +47,9 @@
<el-input placeholder="请输入" v-model="ruleForm.source"></el-input>
</el-form-item>
<el-form-item label="正文" prop="text">
<div id="text">
<editor v-model="ruleForm.text" :min-height="192" />
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
@ -155,6 +157,16 @@ export default {
// this.$refs[formName].resetFields();
// }
},
watch: {
ruleForm: {
handler: function() {
this.$nextTick(() => {
this.formatRichText(this.ruleForm.downloadUrl);
});
}
},
deep: true
},
created() {
let { id } = this.$route.query;
if (id) {

View File

@ -12,8 +12,9 @@
<el-form-item label="成果标题" prop="title">
<el-input placeholder="请输入" v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="成果图片" prop="image">
<multi-upload v-model="ruleForm.image"></multi-upload>
<el-form-item label="成果图片" prop="pic">
<!-- :maxCount="1" -->
<multi-upload v-model="selectProductPics"></multi-upload>
</el-form-item>
<el-form-item label="技术领域" prop="level">
<el-select v-model="ruleForm.level" placeholder="请选择">
@ -70,12 +71,21 @@ export default {
MultiUpload
},
data() {
// var valiIcon = (rule, value, callback) => {
// // 图片验证
// if (!this.selectProductPics[0]) {
// callback(new Error('请上传成果图片'));
// } else {
// callback();
// }
// };
return {
aaa: '',
bbb: '',
editPage: false,
ruleForm: {
title: '',
pic: '',
level: '',
attribute: '',
source: '',
@ -123,9 +133,55 @@ export default {
source: [{ required: true, message: '请填写', trigger: 'blur' }],
source2: [{ required: true, message: '请填写', trigger: 'blur' }],
text: [{ required: true, message: '请填写内容', trigger: 'blur' }]
// pic: [{ required: true, validator: valiIcon }]
}
};
},
computed: {
//商品的主图和画册图片
selectProductPics: {
get: function() {
let pics = [];
if (
this.ruleForm.pic === undefined ||
this.ruleForm.pic == null ||
this.ruleForm.pic === ''
) {
return pics;
}
pics.push(this.value.pic);
// if (
// this.value.albumPics === undefined ||
// this.value.albumPics == null ||
// this.value.albumPics === ''
// ) {
// return pics;
// }
// let albumPics = this.value.albumPics.split(',');
// for (let i = 0; i < albumPics.length; i++) {
// pics.push(albumPics[i]);
// }
// return pics;
},
set: function(newValue) {
if (newValue == null || newValue.length === 0) {
this.ruleForm.pic = null;
// this.value.albumPics = null;
} else {
this.value.pic = newValue[0];
// this.value.albumPics = '';
// if (newValue.length > 1) {
// for (let i = 1; i < newValue.length; i++) {
// this.value.albumPics += newValue[i];
// if (i !== newValue.length - 1) {
// this.value.albumPics += ',';
// }
// }
// }
}
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {