文章读取显示

ruoyi-note/src/main/java/com/ruoyi/note/domain/NmNote.java

@@ -118,7 +118,7 @@ public class NmNote
 
     /**富文本文章内容*/
     @Transient
-    private  String UeditorContent;
+    private  String ueditorContent;
 
 
 }

ruoyi-ui/src/components/BookmarkList/index.vue

@@ -56,12 +56,12 @@
       this.showView(this.property);
     },
     updated(){
-      this.showView(this.property);
+      // this.showView(this.property);
      },
     created() {
-      var that=this;
+      // var that=this;
-      //便签ID
+      // //便签ID
-      that.Ueditor = that.$route.query.Ueditor;
+      // that.Ueditor = that.$route.query.Ueditor;
 
     },
     filters: {
@@ -121,7 +121,7 @@
   }
 
   .bookmark:hover {
-    background-color: #D4D4D4;
+    background-color: #E8E8E8;
 
   }
 

ruoyi-ui/src/components/TinyMCE/index.vue

@@ -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: {

ruoyi-ui/src/views/bookmark/bookmark/index.vue

@@ -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-edit-outline" ></i>
-                      <i class="el-icon-position"></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({
+            this.openIsMain();
-              path: "/NqEdit",
+            that.Ueditor=tiymceueditor;//点击的编辑器文章id
-              query: {
+            that.noteId=noteId; //点击的noteId
-                Ueditor: tiymceueditor,
-                noteId:noteId,
-                // menuId:that.noteParams.menuId,
-                property:that.property,
-                t:Date.now(),
-              }
-            })
             break;
           default:
         }

ruoyi-ui/src/views/bookmark/common/NqEdit.vue

@@ -1,41 +1,40 @@
 <template>
-  <div class="home">
+  <div class="home" >
 
-    <div CLASS="nqtitle">
+    <div class="nqtitle">
-      <div class="mdui-textfield mdui-textfield-floating-label">
+      <div class="mdui-textfield mdui-textfield-floating-label inputtop">
-        <label class="mdui-textfield-label">文章标题</label>
+        <input class="mdui-textfield-input" v-model="queryParamsAndMg.title" type="text" required/>
-        <input class="mdui-textfield-input" type="text" required/>
-        <div class="mdui-textfield-error">文章标题不能为空</div>
       </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
+      <tinymce
-      ref="editor"
+        ref="editor"
-      v-model="queryParams.UeditorContent"
+        v-model="queryParamsAndMg.ueditorContent"
-      :disabled="disabled"
+        :disabled="disabled"
-      @onClick="onClick"
+        @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(){
+    props: {
-      return{
+      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,
+          tiymceUeditor: undefined,
-          UeditorContent: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(){
+      UpdateNote() {
-        userUpdateNote(this.queryParams).then(response =>{
+        userUpdateNote(this.queryParamsAndMg).then(response => {
-            console.log("已保存:"+Date.now())
+          console.log("已保存:" + Date.now())
         });
       },
       /** 查询便签管理列表 */
-      getNoteList() {
+      getNoteById() {
-        userGetNoteInfo(this.queryParams.noteId).then(response => {
+        console.log("请求执行了!!!")
-          this.queryParams = response.rows;
+        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%;
+    width: 1000px;
-    border: 1px solid #cacaca;
-    background-color: #ebebeb;
     /*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>