使用tinymce富文本

zhouwenxuan

2023-12-08 b7143b51f3a50b6fac9c139d291c1fad017daee6

 src/views/components/details.vue

@@ -19,7 +19,12 @@
      <div class="title">{{state.content.title}}</div>
      <el-divider border-style="dashed"/>
      <div class="time">更新时间：{{state.content.updateTime?state.content.updateTime:state.content.createTime}}</div>
      <div v-html="state.content.content"></div>
        <div class="ql-container ql-snow" style="border: none" >
            <div class="ql-editor">
                <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>
            </div>
        </div>
<!--      <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>-->
    </div>
    <div class="main" v-if="state.firstClass == '法律法规'">
      <div class="title">{{state.content.title}}</div>
@@ -27,7 +32,12 @@
      <div class="info"><span>法律法规类别：{{state.content.lawType}}</span><span>颁布机构：{{state.content.pubAgency}}</span><span>颁布日期：{{state.content.pubDate}}</span></div>
      <el-divider border-style="dashed"/>
      <div class="time">更新时间：{{state.content.updateTime?state.content.updateTime:state.content.createTime}}</div>
      <div v-html="state.content.content"></div>
        <div class="ql-container ql-snow" style="border: none" >
            <div class="ql-editor">
                <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>
            </div>
        </div>
<!--      <div v-html="state.content.content" class="reviewTable" @click="showFile($event)"></div>-->
    </div>
    <div class="main" v-if="state.firstClass == '机构公示'">
      <div class="title">{{state.content.name}}</div>
@@ -83,6 +93,8 @@
import {ElMessage} from "element-plus";
import {getLawsDetails, getNoticeDetails, getPublishDetails} from "../../api/home/homePage";
import { getDict } from "@/api/login"
import axios from "axios";
import {getToken} from "@/utils/auth";

const route = useRoute()
const router = useRouter()
@@ -94,7 +106,7 @@
})
const emit = defineEmits(['backJump'])
onMounted(()=>{
  getBusiness()
  // getBusiness()
})

onUnmounted(()=>{
@@ -143,6 +155,38 @@
  }
}

const showFile = (e) => {
    if(e.target.nodeName === 'A'){
        console.log("e",e)
        e.preventDefault();
        const file = {
            fileUrl: e.target.href,
            fileName: e.target.download
        }
        axios.get( file.fileUrl,{
                headers:
                    {
                        'Content-Type': 'application/json',
                        'Authorization':getToken(),
                    },
                responseType: 'blob'
            }
        ).then(res=>{
            if (res) {
                const link = document.createElement('a')
                let blob = new Blob([res.data],{type: res.data.type})
                link.style.display = "none";
                link.href = URL.createObjectURL(blob); // 创建URL
                link.setAttribute("download", file.fileName);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } else {
                this.$message.error('获取文件失败')
            }
        })
    }
}

const back = ()=>{
  if(state.firstClass == '通知公告'){
@@ -266,5 +310,19 @@
      }
    }
  }
    .reviewTable {
        :deep(table){
            border: 1px solid #ccc;
            text-align: center;
        }
        :deep(table td){
            border: 1px solid #ccc;
            text-align: center;
            padding: 0 5px;
        }
        :deep(table th){
            border: 1px solid #ccc;
        }
    }
}
</style>