门户网站的新闻、公告等文章,内容可配置,故引入 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. IDEA手动导入jar包到maven本地库

    第一步:下载需要的jar包 第二步:file project structure-liberaries 第三步:点击+号-选择java,再选择刚才下载的jar包,ok 此时我们把jar包加到项目了,但 ...

  2. spring-cloud06---Hystrix01简介

    转:https://segmentfault.com/a/1190000005988895 # 1.服务雪崩介绍## 1.1基本概念分布式系统中经常会出现某个基础服务不可用造成整个系统不可用的情况, ...

  3. 有序数组的平方&长度最小的子数组&螺旋矩阵Ⅱ

    一.有序数组的平方 977.有序数组的平方 leetcode链接 1.方法概述 双"指针"解法:因为数组本来是有序的,平方后可能出现的两端大数值大的情况.所以从数组两端开始遍历,谁 ...

  4. lua 控制语句

    for循环 模式1 for k,v in f, data, init_k do end 进行的操作是 f(data, old_k), 例如f(data, init_k) 渴望返回的是 new_k, v ...

  5. kali挂代理之——proxychains4

    记一次打站需要用到kali,但是得挂代理,就从别人那里知道了一个kali挂代理的工具proxychains4. 首先是打开kali输入:root@Kali:~# vi /etc/proxychains ...

  6. JZOJ 4417. 【HNOI2016模拟4.1】神奇的字符串

    不能算解析的解析 很神仙的题 知道做法后很容易实现 这里不写题解 推荐一个:4417. [HNOI2016模拟4.1]神奇的字符串 感谢写此博文的神犇! \(Code\) #include<cs ...

  7. 两台linux服务器互相自动备份

    转载:csdn https://blog.csdn.net/gjwgjw1111/article/details/103515031

  8. @Transactional千万不要这样用!!踩坑了你都可能发现不了!!!

    前阵子接手了一段同事之前的代码,里面用到了@Transactional注解,了解Spring的小伙伴肯定知道,@Transactional是Spring提供的一种控制事务管理的快捷手段.但是我这段程序 ...

  9. 基于C++的OpenGL 09 之材质

    1. 引言 本文基于C++语言,描述OpenGL的材质 前置知识可参考: 基于C++的OpenGL 08 之基础光照 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者这里不过多描 ...

  10. C#辗转相除法输出最大公约数

    void main() { int r, m, n, t; scanf_s("%d\n%d", &m, &n); if (m < n) { t = m; m ...