做那类网站赚钱,如何看网站的流量,友情链接平台广告,大数据营销获客接了个单子#xff0c;需要添加一个文章模块#xff0c;一看用到的技术这么老#xff0c;人傻了#xff0c;纯html css js 。
在普通页面中
!DOCTYPE html
html langenheadmeta charsetUTF-8meta name需要添加一个文章模块一看用到的技术这么老人傻了纯html css js 。
在普通页面中
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink hrefhttps://unpkg.com/wangeditor/editorlatest/dist/css/style.css relstylesheet!-- Bootstrap CSS --link hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css relstylesheetstyle#editor—wrapper {border: 1px solid #ccc;z-index: 100;}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}.row {width: 98%;padding-left: 10px;padding-right: 10px;display: flex;justify-content: space-between;}.half-width {width: 45%;}.marginLeft {margin-left: 30px;}/style
/headbodydiv classrow marginLeftdiv ideditor—wrapper classhalf-widthdiv idtoolbar-container!-- 工具栏 --/divdiv ideditor-container!-- 编辑器 --/div/divdiv classhalf-widthh1 styletext-align: center; font-family: 楷体; margin: 0 0; height: 10%;展示效果/h1div ideditor-showNode styleborder: 1px solid #ccc;height: 90%;!-- 编辑器 --/div/div
/divdiv classmarginLeft stylemargin-top: 50px; display: flex; align-items: center;p stylemargin-right: 10px; display: inline-block; margin-top: 13px;文件名称/pinput styledisplay: inline-block; width: 80%; typetext classform-control placeholder文件名称 aria-describedbybasic-addon2
/divdiv classmarginLeft stylemargin-top: 50px; display: flex; align-items: center;p stylemargin-right: 10px; display: inline-block; margin-top: 13px;添加备注/pinput styledisplay: inline-block; width: 80%; typetext classform-control placeholder添加备注 aria-describedbybasic-addon2
/div
br/
div classmarginLeft stylemargin-top: 50px; display: flex; align-items: center;p stylemargin-right: 10px; display: inline-block; margin-top: 15px;选择附件/pinput typefile classbtn btn-primary data-togglebutton aria-pressedfalse
/divdiv classd-flex justify-content-center mb-3 stylemargin-top: 80px; margin-left: -50px; margin-bottom: 40pxbutton idclear-editor classbtn btn-primary stylewidth: 300px;提交公告摘要/button !-- 使用了Bootstrap的按钮样式 --
/div
div styleheight: 50px/div/body!-- Bootstrap JS --
script srchttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js/scriptscript srchttps://unpkg.com/wangeditor/editorlatest/dist/index.js/script
scriptconst { createEditor, createToolbar } window.wangEditorconst editorConfig {placeholder: Type here...,onChange(editor) {const html editor.getHtml()console.log(, html) //html是当前编辑器的内容// 也可以同步到 textareadocument.getElementById(editor-showNode).innerHTMLhtml;}}const editor createEditor({selector: #editor-container,html: pbr/p, //这是编辑器默认显示的内容config: editorConfig,mode: default, // or simple})const toolbarConfig {}const toolbar createToolbar({editor,selector: #toolbar-container,config: toolbarConfig,mode: default, // or simple});// 为按钮添加点击事件处理函数document.getElementById(clear-editor).addEventListener(click, function() {// 使用编辑器的 clear 方法来清空内容editor.clear()})
/script/html效果 在表单页面中需要与要上传的文件一起添加到服务器
添加了一个隐藏的textarea标签来存储编辑器的内容在提交表单时更新这个字段的值。改改了了按钮的点击事件处理函数使其在提交表单时阻止默认的表单提交行为并通过XMLHttpRequest发送一个POST请求把所有内容提交到后台。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink hrefhttps://unpkg.com/wangeditor/editorlatest/dist/css/style.css relstylesheet!-- Bootstrap CSS --link hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css relstylesheetstyle#editor—wrapper {border: 1px solid #ccc;z-index: 100;}#toolbar-container {border-bottom: 1px solid #ccc;}#editor-container {height: 500px;}.row {width: 98%;padding-left: 10px;padding-right: 10px;display: flex;justify-content: space-between;}.half-width {width: 45%;}.marginLeft {margin-left: 30px;}/style
/head
body
form idmyForm methodpost enctypemultipart/form-datadiv classrow marginLeftdiv ideditor—wrapper classhalf-widthdiv idtoolbar-container!-- 工具栏 --/divdiv ideditor-container!-- 编辑器 --/div/divdiv classhalf-widthh1 styletext-align: center; font-family: 楷体; margin: 0 0; height: 10%;展示效果/h1div ideditor-showNode styleborder: 1px solid #ccc;height: 90%;!-- 编辑器 --/div/div/divdiv classmarginLeft stylemargin-top: 50px; display: flex; align-items: center;p stylemargin-right: 10px; display: inline-block; margin-top: 13px;文件名称/pinput namefileName styledisplay: inline-block; width: 80%; typetext classform-control placeholder文件名称 aria-describedbybasic-addon2/divdiv classmarginLeft stylemargin-top: 50px; display: flex; align-items: center;p stylemargin-right: 10px; display: inline-block; margin-top: 13px;添加备注/pinput namenote styledisplay: inline-block; width: 80%; typetext classform-control placeholder添加备注 aria-describedbybasic-addon2/divdiv classmarginLeft stylemargin-top: 50px; display: flex; align-items: center;p stylemargin-right: 10px; display: inline-block; margin-top: 15px;选择附件/pinput namefile typefile classbtn btn-primary data-togglebutton aria-pressedfalse/divtextarea ideditorContent nameeditorContent styledisplay: none;/textareadiv classd-flex justify-content-center mb-3 stylemargin-top: 80px; margin-left: -50px; margin-bottom: 40pxbutton idsubmit classbtn btn-primary stylewidth: 300px;提交公告摘要/button/div
/form!-- Bootstrap JS --
script srchttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js/script
script srchttps://unpkg.com/wangeditor/editorlatest/dist/index.js/scriptscriptconst { createEditor, createToolbar } window.wangEditorconst editorConfig {placeholder: Type here...,onChange(editor) {const html editor.getHtml()console.log(, html)document.getElementById(editor-showNode).innerHTMLhtml;}}const editor createEditor({selector: #editor-container,html: pbr/p, config: editorConfig,mode: default, })const toolbarConfig {}const toolbar createToolbar({editor,selector: #toolbar-container,config: toolbarConfig,mode: default,});document.getElementById(submit).addEventListener(click, function(event) {event.preventDefault(); document.getElementById(editorContent).value editor.getHtml();var formElement document.querySelector(form);var formData new FormData(formElement);var request new XMLHttpRequest(); request.open(POST, /submit); request.send(formData); })
/script
/body
/html效果
