怎么做简单的视频网站,网站开发工程师专业,网站里面的链接怎么做,html怎么做多个网页文章目录 #x1f7e2; wangeditor 富文本⭐️安装 wangeditor⭐️demo 模板⭐️效果图 ✒️总结 #x1f7e2; wangeditor 富文本 一款开源 Web 富文本编辑器#xff0c;开箱即用#xff0c;配置简单 wangedito 官网
简洁易用、功能强大、文档教程丰富支持 JS、Vue、Rea… 文章目录 wangeditor 富文本⭐️安装 wangeditor⭐️demo 模板⭐️效果图 ✒️总结 wangeditor 富文本 一款开源 Web 富文本编辑器开箱即用配置简单 wangedito 官网
简洁易用、功能强大、文档教程丰富支持 JS、Vue、React踩过 5000坑兼容主流的 PC 游览器、但不在支持 IE 游览器和移动端编辑
优势
使用 vdom扩展性中文文档使用主流技术及时反馈和沟通、有完整的社区方便的应用于 Vue React集成所有功能无需二次开发持续更新
⭐️安装 wangeditor
yarn add wangeditor/editor
# 或者 npm install wangeditor/editor --save
yarn add wangeditor/editor-for-vue
# 或者 npm install wangeditor/editor-for-vue --save⭐️demo 模板
templatediv classmainh1 classtitlewangeditor编辑器配置/h1div styleborder: 1px solid #cccToolbar:defaultConfigtoolbarConfig:editoreditor:modemodestyleborder-bottom: 1px solid #ccc/Editorv-modelhtml:defaultConfigeditorConfig:modemodeclasseditorstyleheight: 500px; overflow-y: hiddenonCreatedonCreatedonChangeonChangeonDestroyedonDestroyedonFocusonFocusonBluronBlurcustomPastecustomPaste//divdiv classsub-btn-boxel-button classsub-btn typeprimary clicksubmit plain提交/el-button/div/div
/templatescriptimport Vue from vueimport { Editor, Toolbar } from wangeditor/editor-for-vueimport { DomEditor } from wangeditor/editorexport default Vue.extend({name: MyEditor,components: { Editor, Toolbar },data() {return {editor: null, // 编辑器实例html: p123/p, // 实例文本toolbarConfig: {// 工具栏配置// toolbarKeys: [// // 分割线// |,// // 菜单 key// bold, // 粗体// underline, // 下划线// italic, // 斜体// through, // 删除线// code, // 行内代码// sub, // 下标// sup, // 上标// clearStyle, // 清除格式// color, // 字体颜色// bgColor, // 背景色// fontSize, // 字号// fontFamily, // 字体// indent, // 增加缩进// delIndent, // 减少缩进// justifyLeft, // 左对齐// justifyRight, // 右对齐// justifyCenter, // 居中对齐// justifyJustify, // 两端对齐// lineHeight, // 行高// insertImage, // 网络图片// deleteImage, // 删除图片// editImage, // 编辑图片// viewImageLink, // 查看链接// imageWidth30, // 图片宽度相对于编辑器宽度的百分比30// imageWidth50, // 图片宽度相对于编辑器宽度的百分比50// imageWidth100, // 图片宽度相对于编辑器宽度的百分比100// divider, // 分割线// emotion, // 表情// insertLink, // 插入链接// editLink, // 修改链接// unLink, // 取消链接// viewLink, // 查看链接// codeBlock, // 代码块// blockquote, // 引用// headerSelect, // 标题// header1, // 标题1// header2, // 标题2// header3, // 标题3// header4, // 标题4// header5, // 标题5// todo, // 待办// redo, // 重做// undo, // 撤销// fullScreen, // 全屏// enter, // 回车// bulletedList, // 无序列表// numberedList, // 有序列表// insertTable, // 插入表格// deleteTable, // 删除表格// insertTableRow, // 插入行// deleteTableRow, // 删除行// insertTableCol, // 插入列// deleteTableCol, // 删除列// tableHeader, // 表头// tableFullWidth, // 宽度自适应// insertVideo, // 插入网络视频// uploadVideo, // 上传视频// editVideoSize, // 修改视频尺寸// uploadImage, // 上传图片// codeSelectLang, // 选择语言// // 菜单组包含多个菜单// {// key: group-more-style, // 必填要以 group 开头// title: 更多样式, // 必填// iconSvg: svg..../svg, // 可选// menuKeys: [through, code, clearStyle], // 下级菜单 key 必填// },// ], //重新配置工具栏显示哪些菜单以及菜单的排序、分组。},editorConfig: {// 编辑器配置placeholder: 请输入内容..., //提示信息readOnly: false, //配置编辑器是否只读默认为autoFocus: true, //配置编辑器默认是否 focus 选中,默认为 truescroll: false, //配置编辑器是否支持滚动默认为 true 。注意此时不要固定 editor-container 的高度设置一个 min-height 即可。// maxLength: 10, //配置编辑器的maxlengthMENU_CONF: {// 文字颜色color: {// colors: [#000, #333, #666],//可选项},// 背景色bgColor: {// colors: [#000, #333, #666], //可选项},// 字号fontSize: {// fontSizeList: [// // 元素支持两种形式// // 1. 字符串// // 2. { name: xxx, value: xxx }// 12px,// 16px,// { name: 24px, value: 24px },// 40px,// ],//可选项},// 字体fontFamily: {// fontFamilyList: [// // 元素支持两种形式// // 1. 字符串// // 2. { name: xxx, value: xxx }// 黑体,// 楷体,// { name: 仿宋, value: 仿宋 },// Arial,// Tahoma,// Verdana,// ],//可选项},// 行号lineHeight: {// lineHeightList: [1, 1.5, 2, 2.5],//行高},// 标签emotion: {// emotions: .split( ), // 数组可选项},// 上传图片的配置uploadImage: {// server服务端地址server: /api/upload, //必填否则上传图片会报错// fieldName文件名称默认值 wangeditor-uploaded-imagefieldName: your-custom-name,// maxFileSize单个文件的最大体积限制默认为 2MmaxFileSize: 1 * 1024 * 1024, // 1M//maxNumberOfFiles 最多可上传几个文件默认为 100maxNumberOfFiles: 10,// allowedFileTypes选择文件时的类型限制默认为 [image/*] 。如不想限制则设置为 []allowedFileTypes: [image/*],// meta自定义上传参数例如传递验证的 token 等。参数会被添加到 formData 中一起上传到服务端。meta: {token: xxx,otherKey: yyy,},// metaWithUrl将 meta 拼接到 url 参数中默认 falsemetaWithUrl: false,// headers自定义增加 http headerheaders: {Accept: text/x-json,otherKey: xxx,},// withCredentials跨域是否传递 cookie 默认为 falsewithCredentials: true,// timeout超时时间默认为 10 秒timeout: 5 * 1000, // 5 秒// 下面是一些上传图片的回调函数//onBeforeUpload 上传之前触发onBeforeUpload(file) {// JS 语法// onBeforeUpload(file: File) { // TS 语法// file 选中的文件格式如 { key: file }return file// 可以 return// 1. return file 或者 new 一个 file 接下来将上传// 2. return false 不上传这个 file},// onProgress上传进度的回调函数onProgress(progress) {// JS 语法// onProgress(progress: number) { // TS 语法// progress 是 0-100 的数字console.log(progress, progress)},// onSuccess单个文件上传成功之后onSuccess(file, res) {// JS 语法// onSuccess(file: File, res: any) { // TS 语法console.log(${file.name} 上传成功, res)},// onFailed单个文件上传失败onFailed(file, res) {// JS 语法// onFailed(file: File, res: any) {// TS 语法console.log(${file.name} 上传失败, res)},// onError上传错误或者触发 timeout 超时onError(file, err, res) {// JS 语法// onError(file: File, err: any, res: any) {// TS 语法console.log(${file.name} 上传出错, err, res)},/*** 自定义插入* 如果你的服务端 response body 无法按照上文规定的格式则无法插入图片提示失败。但你可以使用 customInsert 来自定义插入图片。*/customInsert(res, insertFn) {// JS 语法// customInsert(res: any, insertFn: InsertFnType) { // TS 语法// res 即服务端的返回结果// 从 res 中找到 url alt href 然后插入图片insertFn(url, alt, href)},/*** 自定义上传* 如果你不想使用 wangEditor 自带的上传功能例如你要上传到阿里云 OSS 。可以通过 customUpload 来自定义上传。*/customBrowseAndUpload(insertFn) {// JS 语法// customBrowseAndUpload(insertFn: InsertFnType) { // TS 语法// 自己选择文件// 自己上传文件并得到图片 url alt href// 最后插入图片insertFn(url, alt, href)},// 小于该值就插入 base64 格式而不上传默认为 0base64LimitSize: 5 * 1024, // 5kb},// 上传视频配置uploadVideo: {// 上传视频的配置比较复杂// server服务端地址server: /api/upload, //必填否则上传图片会报错// form-data fieldName 默认值 wangeditor-uploaded-videofieldName: your-custom-name,//maxFileSize 单个文件的最大体积限制默认为 10MmaxFileSize: 5 * 1024 * 1024, // 5M// maxNumberOfFiles最多可上传几个文件默认为 5maxNumberOfFiles: 3,// allowedFileTypes选择文件时的类型限制默认为 [video/*] 。如不想限制则设置为 []allowedFileTypes: [video/*],// meta自定义上传参数例如传递验证的 token 等。参数会被添加到 formData 中一起上传到服务端。meta: {token: xxx,otherKey: yyy,},// metaWithUrl将 meta 拼接到 url 参数中默认 falsemetaWithUrl: false,// headers自定义增加 http headerheaders: {Accept: text/x-json,otherKey: xxx,},// withCredentials跨域是否传递 cookie 默认为 falsewithCredentials: true,// timeout超时时间默认为 30 秒timeout: 15 * 1000, // 15 秒// 视频不支持 base64 格式插入// 回调函数// onBeforeUpload上传之前触发onBeforeUpload(file) {// JS 语法// onBeforeUpload(file: File) {// TS 语法// file 选中的文件格式如 { key: file }return file// 可以 return// 1. return file 或者 new 一个 file 接下来将上传// 2. return false 不上传这个 file},// onProgress上传进度的回调函数onProgress(progress) {// JS 语法// onProgress(progress: number) {// TS 语法// progress 是 0-100 的数字console.log(progress, progress)},// onSuccess单个文件上传成功之后onSuccess(file, res) {// JS 语法// onSuccess(file: File, res: any) {// TS 语法console.log(${file.name} 上传成功, res)},// onFailed单个文件上传失败onFailed(file, res) {// JS 语法// onFailed(file: File, res: any) {// TS 语法console.log(${file.name} 上传失败, res)},// onError上传错误或者触发 timeout 超时onError(file, err, res) {// JS 语法// onError(file: File, err: any, res: any) { // TS 语法console.log(${file.name} 上传出错, err, res)},/*** 自定义插入视频* 如果你的服务端 response body 无法按照上文规定的格式则无法插入视频提示失败。但你可以使用 customInsert 来自定义插入视频。*/customInsert(res, insertFn) {// JS 语法// customInsert(res: any, insertFn: InsertFnType) { // TS 语法// res 即服务端的返回结果// 从 res 中找到 url poster 然后插入视频insertFn(url, poster)},/*** 自定义上传* 如果你不想使用 wangEditor 自带的上传功能例如你要上传到阿里云 OSS 。可以通过 customUpload 来自定义上传。*/async customUpload(file, insertFn) {// JS 语法// customUpload(file: File, insertFn: InsertFnType) { // TS 语法// file 即选中的文件// 自己实现上传并得到视频 url poster// 最后插入视频insertFn(url, poster)},/*** 自定义选择视频* 如果你不想使用 wangEditor 自带的选择文件功能例如你有自己的图床或者视频文件选择器。可以通过 customBrowseAndUpload 来自己实现选择视频、上传视频并插入视频。*/customBrowseAndUpload(insertFn) {// JS 语法// customBrowseAndUpload(insertFn: InsertFnType) { // TS 语法// 自己选择文件// 自己上传文件并得到视频 url poster// 最后插入视频insertFn(url, poster)},},// 代码高亮codeSelectLang: {// 代码语言codeLangs: [{ text: CSS, value: css },{ text: HTML, value: html },{ text: XML, value: xml },// 其他],},},},mode: default, // or simple}},methods: {// 提交按钮点击事件submit() {console.log(编辑器内容, this.html)console.log(获取内容JSON, this.editor.children)console.log(显示HTML, this.editor.getHtml())console.log(显示Text, this.editor.getText())},// onCreated编辑器创建完成的回调函数onCreated(editor) {this.editor Object.seal(editor) // 一定要用 Object.seal() 否则会报错console.log(editor实例, this.editor)},// onChange编辑器内容、选区变化时的回调函数。onChange(editor) {console.log(onChange, editor)// console.log(content, editor.children);},// 编辑器 focus 时的回调函数。onFocus(editor) {console.log(onFocus, editor)},// 编辑器 blur 时的回调函数。onBlur(editor) {console.log(onBlur, editor)},// 编辑器销毁时的回调函数。onDestroyed(editor) {console.log(onDestroyed, editor)},// 自定义粘贴,可阻止编辑器的默认粘贴,实现自己的粘贴逻辑。customPaste(editor, event) {// event 是 ClipboardEvent 类型可以拿到粘贴的数据// 可参考 https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent// const html event.clipboardData.getData(text/html) // 获取粘贴的 html// const text event.clipboardData.getData(text/plain) // 获取粘贴的纯文本// const rtf event.clipboardData.getData(text/rtf) // 获取 rtf 数据如从 word wsp 复制粘贴// 同步editor.insertText(粘贴内容后、我会同步执行)// 异步setTimeout(() {editor.insertText(粘贴内容后、我会异步执行)}, 1000)// 阻止默认的粘贴行为event.preventDefault()return false// 继续执行默认的粘贴行为// return true},},mounted() {// 模拟 ajax 请求异步渲染编辑器setTimeout(() {// this.html p模拟 Ajax 异步设置内容 HTML/p;this.html h1模拟 Ajax 异步设置内容 HTML/h1div data-w-e-typetodoinput typecheckbox disabled 代办1/divdiv data-w-e-typetodoinput typecheckbox disabled checked代办2/divhr/blockquotespan stylefont-size: 22px;br1121/spanspan stylefont-size: 22px;sup2123/sup/spanspan stylefont-size: 22px;.br/spanspan stylefont-size: 22px;strong测试/strong/spanspan stylefont-size: 22px;br/spanspan stylefont-size: 22px;em测试/em/spanspan stylefont-size: 22px;br/spanspan stylefont-size: 22px;em测试123./em/spanspan stylefont-size: 22px;br/span/blockquote}, 500)},created() {},beforeDestroy() {const editor this.editorif (editor null) returneditor.destroy() // 组件销毁时及时销毁编辑器},})
/script
!--引入css样式--
style srcwangeditor/editor/dist/css/style.css/style
!--根据项目UI需求配置自己的css--
style langscss.main {width: 80%;height: 100%;margin: 0 auto;.title {font-size: 20px;text-align: center;margin-bottom: 10px;}.sub-btn-box {margin-top: 10px;text-align: center;}.editor {// height: 200px !important;height: 700px !important;#w-e-textarea-1 {text-align: left !important;}.w-e-text-container {text-align: left !important;}}}
/style⭐️效果图 ✒️总结 如果这篇【文章】有帮助到你希望可以给我点个赞创作不易如果有对前端端或者对python感兴趣的朋友,请多多关注咱们一起探讨和努力 个人主页 : 前端初见
