文章读取显示
This commit is contained in:
WangHao
parent
bbcf39bfc6
commit
368bfc5c85
@ -118,7 +118,7 @@ public class NmNote
|
||||
|
||||
/**富文本文章内容*/
|
||||
@Transient
|
||||
private String UeditorContent;
|
||||
private String ueditorContent;
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -56,12 +56,12 @@
|
||||
this.showView(this.property);
|
||||
},
|
||||
updated(){
|
||||
this.showView(this.property);
|
||||
// this.showView(this.property);
|
||||
},
|
||||
created() {
|
||||
var that=this;
|
||||
//便签ID
|
||||
that.Ueditor = that.$route.query.Ueditor;
|
||||
// var that=this;
|
||||
// //便签ID
|
||||
// that.Ueditor = that.$route.query.Ueditor;
|
||||
|
||||
},
|
||||
filters: {
|
||||
@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
.bookmark:hover {
|
||||
background-color: #D4D4D4;
|
||||
background-color: #E8E8E8;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
language: 'zh_CN',
|
||||
skin_url: '/tinymce/skins/ui/oxide',
|
||||
// skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
|
||||
height: 300,
|
||||
height: 600,
|
||||
menubar: 'file edit insert view format table',//菜单 //
|
||||
// 配置每个菜单栏的子菜单项（如下是默认配置）
|
||||
menu: {
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
<div class="nullbookmark-img">
|
||||
</div>
|
||||
<div style="color: #000000" class="nullbookmark-text">
|
||||
此目录还未添加书签
|
||||
此目录还未添加收藏
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -199,10 +199,10 @@
|
||||
<div class="bookmarklist" :style="datalist" infinite-scroll-distance="10" v-loading="loading" v-if="showbookmark"
|
||||
v-infinite-scroll="load"
|
||||
infinite-scroll-disabled="disabled" style="overflow:auto;" infinite-scroll-immediate="false">
|
||||
<BookmarkOne @on-windowurl="windowurl" :property="property" :listloading="listloading" :loading="loading" :bookmarkList="bookmarkList"></BookmarkOne>
|
||||
<BookmarkOne @on-windowurl="windowurl" :key="property" :property="property" :listloading="listloading" :loading="loading" :bookmarkList="bookmarkList"></BookmarkOne>
|
||||
|
||||
<p v-if="listloading" class="listhint"><i class="el-icon-loading"></i>加载中...</p>
|
||||
<p v-if="listnoMore" class="listhint">没有更多了</p>
|
||||
<p v-if="listnoMore&&!showimg" class="listhint">没有更多了</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -286,15 +286,16 @@
|
||||
<i class="el-icon-rank" ></i>
|
||||
</div>
|
||||
<div class="mianUrl-top-right">
|
||||
<i class="el-icon-edit-outline" @click="windowurlOpen"></i>
|
||||
<i class="el-icon-position"></i>
|
||||
<i class="el-icon-edit-outline" ></i>
|
||||
<i class="el-icon-position" @click="windowurlOpen"></i>
|
||||
</div>
|
||||
</el-header>
|
||||
<!-- <div class="main-url-title">部分网站不允许内嵌套打开,请在设置中选择自己喜欢的打开方式!</div>-->
|
||||
<div class="mianUrl-botoom" v-loading="iframeLoading" >
|
||||
<!-- webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true"-->
|
||||
<!-- <iframe sandbox="allow-forms allow-scripts allow-popups" class="openurl" :src="gourl" target="_self" tabindex="-1" />-->
|
||||
<router-view :key="$route.query.t"></router-view>
|
||||
<!-- <router-view :key="$route.query.t"></router-view>-->
|
||||
<TinyMceEdit :key="noteId" :ueditor="Ueditor" :noteid="noteId"></TinyMceEdit>
|
||||
|
||||
</div>
|
||||
</el-main>
|
||||
@ -311,6 +312,7 @@
|
||||
import {listMenuByUserId} from "@/api/bookmark/menu";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import BookmarkOne from "../../../components/BookmarkList";
|
||||
import TinyMceEdit from "../../../views/bookmark/common/NqEdit";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {
|
||||
selectBymenuIdUserID,
|
||||
@ -331,7 +333,7 @@
|
||||
|
||||
export default {
|
||||
components: {
|
||||
format, Treeselect,BookmarkOne
|
||||
format, Treeselect,BookmarkOne,TinyMceEdit
|
||||
},
|
||||
|
||||
data: function () {
|
||||
@ -436,6 +438,11 @@
|
||||
isMain:true,
|
||||
menuId:undefined,//当前目录
|
||||
|
||||
Ueditor:undefined,//点击的编辑器文章id
|
||||
noteId:undefined, //点击的noteId
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
@ -534,7 +541,6 @@
|
||||
|
||||
that.$set(that.queryParams, 'pageNum', i)
|
||||
that.$set(that.noteParams, 'pageNum', m)
|
||||
// console.log("this.queryParams.pageNum:" + that.queryParams.pageNum)
|
||||
var listcount = Math.ceil(that.total / 15);
|
||||
|
||||
|
||||
@ -543,10 +549,8 @@
|
||||
that.noMore = true;
|
||||
that.listnoMore = true;
|
||||
that.listloading = false
|
||||
// console.log("禁止滚动了")
|
||||
return;
|
||||
} else {
|
||||
|
||||
this.listloading = true
|
||||
setTimeout(() => {
|
||||
switch(this.property) {
|
||||
@ -817,9 +821,6 @@
|
||||
this.bookmarkList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
// if (this.total>0){
|
||||
// this.gourl=this.bookmarkList[0].url;
|
||||
// }
|
||||
if (this.bookmarkList==null||this.bookmarkList.length==0) {
|
||||
this.showimg=true;
|
||||
}
|
||||
@ -880,22 +881,9 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
// /**网站内打开*/
|
||||
// windowurl(url,bookmarkId) {
|
||||
// var that=this;
|
||||
// //网站内打开
|
||||
// that.iframeLoading=true;
|
||||
// this.gourl=url;
|
||||
// setTimeout(function(){
|
||||
// that.iframeLoading=false;
|
||||
// },1000);
|
||||
// },
|
||||
/**网站内便签打开 网页*/
|
||||
windowurl(noteId, tiymceueditor,bookmarkId,url) {
|
||||
var that=this;
|
||||
console.log("noteId:"+noteId)
|
||||
console.log("tiymceueditor:"+tiymceueditor)
|
||||
this.openIsMain();
|
||||
switch (that.property) {
|
||||
case 0:
|
||||
/**网页新窗口打开*/
|
||||
@ -903,16 +891,9 @@
|
||||
break;
|
||||
case 1:
|
||||
/**编辑器内部打开*/
|
||||
that.$router.push({
|
||||
path: "/NqEdit",
|
||||
query: {
|
||||
Ueditor: tiymceueditor,
|
||||
noteId:noteId,
|
||||
// menuId:that.noteParams.menuId,
|
||||
property:that.property,
|
||||
t:Date.now(),
|
||||
}
|
||||
})
|
||||
this.openIsMain();
|
||||
that.Ueditor=tiymceueditor;//点击的编辑器文章id
|
||||
that.noteId=noteId; //点击的noteId
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
||||
@ -1,41 +1,40 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="home" >
|
||||
|
||||
<div CLASS="nqtitle">
|
||||
<div class="mdui-textfield mdui-textfield-floating-label">
|
||||
<label class="mdui-textfield-label">文章标题</label>
|
||||
<input class="mdui-textfield-input" type="text" required/>
|
||||
<div class="mdui-textfield-error">文章标题不能为空</div>
|
||||
<div class="nqtitle">
|
||||
<div class="mdui-textfield mdui-textfield-floating-label inputtop">
|
||||
<input class="mdui-textfield-input" v-model="queryParamsAndMg.title" type="text" required/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="mian" v-html="msg">-->
|
||||
<div v-loading="loading" v-if="!showEditor" class="mian" v-html="queryParamsAndMg.ueditorContent">
|
||||
|
||||
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div v-if="showEditor" class="edit">
|
||||
<tinymce
|
||||
ref="editor"
|
||||
v-model="queryParams.UeditorContent"
|
||||
v-model="queryParamsAndMg.ueditorContent"
|
||||
:disabled="disabled"
|
||||
@onClick="onClick"
|
||||
/>
|
||||
</div>
|
||||
<div STYLE="margin-top: 10px;margin-bottom: 10px">
|
||||
|
||||
<div v-if="showEditor" STYLE="margin-top: 10px;margin-bottom: 10px">
|
||||
<button class="mdui-btn mdui-btn-raised mdui-color-indigo-300" @click="clear">清空内容</button>
|
||||
<button class="mdui-btn mdui-btn-raised mdui-color-indigo-300" @click="clear">发布</button>
|
||||
<button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = true">禁用</button>
|
||||
<button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = false">启用</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tinymce from '../../../components/TinyMCE'
|
||||
import {
|
||||
userUpdateNote,userGetNoteInfo
|
||||
userUpdateNote, userGetNoteInfo
|
||||
} from "@/api/note/note";
|
||||
|
||||
const defaultForm = {
|
||||
status: 'draft',
|
||||
title: '', // 文章题目
|
||||
@ -55,12 +54,25 @@
|
||||
components: {
|
||||
tinymce
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
props: {
|
||||
ueditor: null,
|
||||
noteid: null,
|
||||
updateEditor:null
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.showEditor=this.updateEditor;
|
||||
this.getNoteById();
|
||||
},
|
||||
updated() {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
postForm: Object.assign({}, defaultForm),
|
||||
msg: "<span>请尽情创作吧!</span>",
|
||||
disabled: false,
|
||||
queryParams:{
|
||||
queryParamsAndMg: {
|
||||
noteId: undefined,
|
||||
userId: undefined,
|
||||
title: undefined,
|
||||
@ -77,73 +89,94 @@
|
||||
isShare: undefined,
|
||||
isEncryption: undefined,
|
||||
createUserName: undefined,
|
||||
tiymceUeditor:undefined,
|
||||
UeditorContent:undefined,
|
||||
tiymceUeditor: undefined,
|
||||
ueditorContent: undefined,
|
||||
},
|
||||
showEditor:false,
|
||||
loading:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var that = this;
|
||||
var Ueditor = that.$route.query.Ueditor;
|
||||
var noteId = that.$route.query.noteId;
|
||||
this.queryParams.tiymceUeditor=Ueditor;
|
||||
this.queryParams.noteId=noteId;
|
||||
|
||||
//查看对应的文章 信息和标题等等
|
||||
this.getNoteList();
|
||||
|
||||
},
|
||||
methods: {
|
||||
/** 实时更新文章的信息 */
|
||||
UpdateNote(){
|
||||
userUpdateNote(this.queryParams).then(response =>{
|
||||
console.log("已保存:"+Date.now())
|
||||
UpdateNote() {
|
||||
userUpdateNote(this.queryParamsAndMg).then(response => {
|
||||
console.log("已保存:" + Date.now())
|
||||
});
|
||||
},
|
||||
/** 查询便签管理列表 */
|
||||
getNoteList() {
|
||||
userGetNoteInfo(this.queryParams.noteId).then(response => {
|
||||
this.queryParams = response.rows;
|
||||
getNoteById() {
|
||||
console.log("请求执行了!!!")
|
||||
var that = this;
|
||||
that.loading=true;
|
||||
var blueditor = that.ueditor != null && that.ueditor != '' && that.ueditor != undefined;
|
||||
var blnoteId = that.noteid != null && that.noteid != '' && that.noteid != undefined;
|
||||
if (blueditor) {
|
||||
this.queryParamsAndMg.tiymceUeditor = that.ueditor;
|
||||
}
|
||||
if (blnoteId) {
|
||||
this.queryParamsAndMg.noteId = that.noteid;
|
||||
}
|
||||
if (blueditor && blnoteId) {
|
||||
userGetNoteInfo(this.queryParamsAndMg.noteId).then(response => {
|
||||
that.queryParamsAndMg = response.data;
|
||||
});
|
||||
}
|
||||
that.loading=false;
|
||||
},
|
||||
//鼠标单击的事件
|
||||
onClick (e, editor) {
|
||||
onClick(e, editor) {
|
||||
console.log('Element clicked')
|
||||
console.log(e)
|
||||
console.log(editor)
|
||||
},
|
||||
//清空内容
|
||||
clear () {
|
||||
clear() {
|
||||
this.$refs.editor.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.title{
|
||||
.title {
|
||||
display: flex;
|
||||
}
|
||||
.title div:first-child{
|
||||
|
||||
.title div:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.title div{
|
||||
|
||||
.title div {
|
||||
width: 50%;
|
||||
|
||||
}
|
||||
.mian{
|
||||
height: 300px;
|
||||
|
||||
.mian {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border: 1px solid #cacaca;
|
||||
background-color: #ebebeb;
|
||||
width: 1000px;
|
||||
/*text-indent: 10px;*/
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.home{
|
||||
|
||||
.home {
|
||||
height: 800px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.edit{
|
||||
margin-left: 3px;
|
||||
|
||||
}
|
||||
.nqtitle{
|
||||
margin-left: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.inputtop{
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user