门户网站的新闻、公告等文章,内容可配置,故引入 wagneditor

1、安装: npm i wangeditor

2、方便调用,抽成组件:

<template>
<div ref='editor'></div>
</template> <script setup>
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, onUpdated } from 'vue';
import WangEditor from 'wangeditor';
import { getItem, StorageKey } from "@/utils/storage";
import { GetImageUploadUrl } from "@/api/admin"; const { proxy } = getCurrentInstance();
const editor = ref(null);
let params = defineProps([ 'data' ]); let instance
onMounted(() => {
createEditor();
}); onUpdated(() => {
if (instance) {
instance.txt.html(params.data)
}
}) const createEditor = () => {
instance = new WangEditor(editor.value)
instance.config.showLinkImg = false
instance.config.showLinkImgAlt = false
instance.config.showLinkImgHref = false
instance.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
instance.config.uploadFileName = 'file'
instance.config.height = 700;
// 图片上传需添加token到请求头
instance.config.uploadImgShowBase64 = true;
instance.config.uploadImgHeaders = {
token: getItem(StorageKey.token)
}
// 图片返回格式不同,需要自定义返回格式
instance.config.uploadImgHooks = {
// 图片上传并返回了结果,想要自己把图片插入到编辑器中
// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式,可使用 customInsert
customInsert: function(insertImgFn, result) {
// console.log('result', result)
// result 即服务端返回的接口
// insertImgFn 可把图片插入到编辑器,传入图片 src ,执行函数即可
if (result.data && result.data.length) {
result.data.forEach(item => insertImgFn(item))
}
}
}
// 图片上传的地址url
instance.config.uploadImgServer = GetImageUploadUrl();
Object.assign(instance.config, {
// 输入内容会触发change事件
onchange(e) {
console.log('change', e)
},
})
instance.create()
} onBeforeUnmount(() => {
instance.destroy();
instance = null;
}) </script>

界面调用即可看到效果:

除了可编辑内容外,当然还要将编辑的内容渲染出来:(部分样式遇到问题,未渲染成功:

查看代码发现是对应的 class 不存在,源码中又没有 css 文件可以直接引入,都是些 less 文件。。。只能手动抽一下:

@mixin wangeditor {
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
} ul, ol {
padding-left: 20px;
} table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc; td, th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
min-height: 30px;
height: 30px;
} th {
border-bottom: 2px solid #ccc;
text-align: center;
background-color: #f1f1f1;
}
} /*分割线样式*/
hr {
cursor: pointer;
display: block;
height: 0;
border: 0;
border-top: 3px solid #ccc;
margin: 20px 0;
} pre {
line-height: 1.5;
overflow: auto;
background-color: #f1f1f1;
code {
display: block;
}
} /* 代码段 */
code {
display: inline-block;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
}

再看渲染,样式大体相同了:

vue3 门户网站搭建6-wangeditor的更多相关文章

  1. linux下网站搭建

    我们知道windows网站搭建一般是:IIS+Asp+Sqlserver,而 linux网站搭建是:Apache+php+Mysql.两者之间个有千秋,但是为什么我们许多的门户网站搭建都选择linux ...

  2. 爬虫抓取5大门户网站和电商数据day1:基础环境搭建

    最新想用爬虫实现抓取五大门户网站(搜狐.新浪.网易.腾讯.凤凰网)和电商数据(天猫,京东,聚美等), 今天第一天先搭建下环境和测试. 采用maven+xpath+ HttpClient+正则表达式. ...

  3. 外网主机访问虚拟机下的Web服务器_服务器应用_Linux公社-Linux系统门户网站

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现

    在淘宝.京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示,因为前端不是我做的,所以不说明前端实现,只介绍后端实现. 搭建部署SpringBoot环境 配置文件配置: 开启了对Th ...

  5. PHPCMS V9轻松完成WAP手机网站搭建全教程

    ---恢复内容开始--- 应用PHPCMS V9轻松完成WAP手机网站搭建全教程 用PHPCMS最新发布的V9搭建了PHPCMS研究中心网站(http://www.17huiyi.net)完成后,有用 ...

  6. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  7. node.js express安装及示例网站搭建

    1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g expressnpm install ...

  8. SharePoint Online 创建门户网站系列之定制栏目

    前 言 SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受. 下面, ...

  9. SharePoint Online 创建门户网站系列之创建栏目

    前 言 SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型.新闻列表类型.图片类型: 下面,让我们开始在SharePoin ...

  10. SharePoint Online 创建门户网站系列之图片滚动

    前 言 创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式.自带WebPart方式和JavaScript读取后台数据前台做展示的三种: 但是,对于复杂的展示来说,这 ...

随机推荐

  1. 学习ASP.NET Core Blazor编程系列二十六——登录(5)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  2. 关于vue项目和内嵌iframe页面之间的通信问题

    最近项目中遇到一个与内嵌iframe页面之间通信的问题,起初与原生之间通信很简单,没想到过与vue项目通信的问题,霎时间一脸懵*啊,百度了一下,原来是那么简单,这里记录下以供下次参考 //vue页面 ...

  3. JavaScript 中的 apply、call、bind

    在 JavaScript 中,apply.call.bind 是三个与函数调用相关的方法,它们都允许你在调用函数时手动设置函数的上下文(即 this 指向). 1.apply 方法:apply 方法允 ...

  4. JZOJ 2020.02.16【NOIP提高组】模拟A 组

    2020.02.16[NOIP提高组]模拟A 组 呼呼呼呼呼呼呼呼 今天暴力分可真多啊 第一次 \(A\) 组进前 \(5\) ! 呼呼呼呼呼呼呼呼 总有人虐场,总有人在场中被虐······ 总结 3 ...

  5. JZOJ 3293. 【SHTSC2013】阶乘字符串

    \(\text{Problem}\) 给定一个由前 \(n\) 个小写字母组成的串 \(S\). 串 \(S\) 是阶乘字符串当且仅当前 \(n\) 个小写字母的全排列(共 \(n!\) 种)都作为 ...

  6. 基于电商直播SDK快速实现一个淘宝直播APP【内附源码】

    现在各大互联网APP都标配电商直播带货了,没有直播带货开发经验都感觉自己跟不上技术的进步.今天快速基于Java实现一个安卓端电商直播APP,深入理解整个电商直播开发流程.我们最终实现效果如下: 按照惯 ...

  7. [EULAR文摘] 滑膜HIF-1a与类风湿关节炎的关节破坏

    滑膜HIF-1a与类风湿关节炎的关节破坏 Wei XN, et al. EULAR 2015. Present ID: OP0070. 背景:低氧诱导因子(HIF)-1α是缺氧条件下细胞反应的一个关键 ...

  8. Computed 和 Watch 的区别

    1.computed计算属性: 作用:(1)解决模板中放入过多的逻辑会让模板过重且难以维护的问题.例如两个数据的拼接或字体颜色的判断. (2)它支持缓存,只有依赖的数据发生了变化,才会重新计算.例如模 ...

  9. windows pwn(一)

    前言 前几天因为看CS shellcode装了一个win10虚拟机,然后正好因为逆向课老师要装一系列工具.于是就想起来之前一直想看的windows pwn,就顺便装了一下相关工具并且入门了一下. 工具 ...

  10. GitLab服务器修改用户密码

    重置密码: 1.切换到相应路径 cd /opt/gitlab/bin/2.进入控制台 gitlab-rails console3.根据序号查询用户账号信息并赋值给u u=User.find(2) [注 ...