前端html本地使用vue-axios-elementul资源框架，下载即用，附带富文本编辑器本地资源

共12个文件

js：5个

css：3个

html：2个

html模板

vue模板

需积分: 37 136 浏览量 2022-09-30 14:25:14 上传评论收藏 688KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

html-vue模板.zip （12个子文件）

fonts

element-icons.ttf 55KB

element-icons.woff 28KB

vue.js 336KB

index.html 1KB

axios.min.js 14KB

element.js 562KB

wangEditor.html 6KB

wangEditor

css

style.css 15KB

index.js 1.26MB

common.js 1KB

element-index.css 233KB

index.css 7KB

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'>  <script src='vue.js'></script>  <script src='element.js'></script> <link rel='stylesheet' href='element-index.css'>  <script src='axios.min.js'></script> <script src='tinymce-vue.js'></script>  <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script> <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> </head> <body> <div id="app"> <el-form ref="form" label-width="90px"> <el-form-item label="富文本模板"> <div id="editor—wrapper"> <div id="toolbar-container">  </div> <div id="editor-container" style="height: 300px;">  </div> </div> <el-button type="primary">保存</el-button> </el-form-item> </el-form> </div> </body> <script> new Vue({ el: '#app', data() { return { // 富文本内容 content: '', form: '' }; }, mounted() { this.wangeditor() }, methods: { //富文本初始化配置 wangeditor() { let that = this const { createEditor, createToolbar } = window.wangEditor const editorConfig = { MENU_CONF: {}, placeholder: 'Type here...', onChange(editor) { // 这里拿到富文本的内容，传给外面的content，注意这里需要先保存this。否则this指向不生效 const html = editor.getHtml() that.content = html // console.log('topEditor', that.topEditor) // 也可以同步到 <textarea> }, } editorConfig.MENU_CONF['uploadImage'] = { server: 'http://xxxxxxx.xxxx.xxxx.xxx',//这里填自己公司后端上传图片的地址 maxFileSize: 10 * 1024 * 1024, // 10M 图片大小限制 fieldName: 'img',//上传类型 // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 [] allowedFileTypes: ['image/*'], // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。 meta: { image_class_id: '2', file_type: '1' }, timeout: 30 * 1000, // 30 秒，超时断开 // 需要设置请求头就在这写 // headers: { // Accept: 'text/x-json', // otherKey: 'xxx' // }, // 上传进度的回调函数 onProgress(progress) { // JS 语法 // progress 是 0-100 的数字 console.log('progress', progress) }, // // 单个文件上传成功之后 // onSuccess(file, res) { // JS 语法 // console.log(`${file.name} 上传成功`, res) // }, // 单个文件上传失败 onFailed(file, res) { // JS 语法 console.log(`${file.name} 上传失败`, res) }, // 上传错误，或者触发 timeout 超时 onError(file, err, res) { // JS 语法 console.log(`${file.name} 上传出错`, err, res) }, // 自定义插入图片 customInsert(res, insertFn) { // JS 语法 // res 即服务端的返回结果 let url = res.data.url let alt = res.data.name let href = res.data.url // 从 res 中找到 url alt href ，然后插入图片 insertFn(url, alt, href) }, } // 初始化输入框 const editor = createEditor({ selector: '#editor-container', html: '<p><br></p>', config: editorConfig, mode: 'default', // or 'simple' }) // editor.setHtml(that.content) //往编辑器内放数据 const toolbarConfig = {} toolbarConfig.excludeKeys = [ 'codeBlock', 'group-video' // 排除菜单组，写菜单组 key 的值即可 ] // 初始化菜单栏 const toolbar = createToolbar({ editor, selector: '#toolbar-container', config: toolbarConfig, mode: 'default', // or 'simple' }) }, }, }) </script> <style scoped> .el-table .cell { text-align: center; min-height: 40px; } #editor—wrapper { border: 1px solid #ccc; z-index: 100; margin-bottom: 5px /* 按需定义 */ } #toolbar-container { border-bottom: 1px solid #ccc; } #editor-container { height: 500px; } </style> </html>