门户网站的新闻、公告等文章,内容可配置,故引入 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. 【CodeSmith】The System.Data.SQLite library is not installed on this computer,不能使用SQLite解决办法

    1.出现问题原因 1)System.Data.SQLite 尚未安装在您的计算机上 2)System.Data.SQLite 尚未正确配置 2.下载并安装System.Data.Sqlite [注意] ...

  2. git操作出现 error: The following untracked working tree files would be overwritten by ...

    命令行:git clean -d -fx,作用是:删除没有git add 的文件 ,执行之后解决了 error: The following untracked working tree files ...

  3. FTP客户端c代码功能实现

    现在市面上有很多免费的FTP软件:如FileZilla ,那如果想自己在代码中实现与ftp服务器的上传下载文件该如何实现那? 本质上ftp协议就是TCP基础上建立的一种协议,具体如下. FTP 概述 ...

  4. 从零实现在线云相亲APP|程序员脱单神器(内附源码Demo)

    实时音视频通话涉及到的技术栈.人力成本.硬件成本非常大,一般个人开发者基本无法独立完成一个功能健全并且稳定的实时音视频应用.本文介绍一天之内,无任何实时音视频低层技术的android开发者完成实时相亲 ...

  5. Iceberg 数据治理及查询加速实践

    数据治理 Flink 实时写入 Iceberg 带来的问题 在实时数据源源不断经过 Flink 写入的 Iceberg 的过程中,Flink 通过定时的 Checkpoint 提交 snapshot ...

  6. .net core Ubuntu下docker部署(精简版)

    一.首先先添加一个.netCore 项目,选择启用docker(我用的是vs2019,之前的可能需要手动点击项目添加docker支持) 没有的话需要手动添加 之后你的项目会存在这个dockerfile ...

  7. CSS3--点击弹出菜单动画

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  8. 四川九联代工M301H hi3798 mv300 mt7668魔百和 强刷和TTL线刷(救砖)经验分享

    以下都是本次自己操作后的一些经验,不是技术分享,也是看来很多水教程后总结的精华. 四川九联代工M301H hi3798 mv300 mt7668魔百和  一.强刷 1.强刷的教程网上有很多,自己百度. ...

  9. 从Linux Bridge引发的网桥、交换机与路由器区别探究

    背景 最近接触docker的网络配置方式,发现其默认会创建一个docker0的Linux Bridge,宿主机上运行的容器可以通过连接该birdge实现与外网的通信,根据bridge这个命名很自然的认 ...

  10. 基于C++的OpenGL 07 之颜色

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