利用富文本标签——elementui——关于tabs标签页不能在内部包裹这个form表单
Posted 勇敢*牛牛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用富文本标签——elementui——关于tabs标签页不能在内部包裹这个form表单相关的知识,希望对你有一定的参考价值。
elementui——关于tabs标签页不能在内部包裹这个form表单
如果需要就在外部添加表单域,里面添加表单项。
<el-form ref="form" :model="form" label-width="80px">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="表单添加" name="one">
<el-form-item label="名称" prop="input" >
<el-input v-model="form.input"></el-input>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="富文本编辑" name="two">富文本编辑</el-tab-pane>
</el-tabs>
</el-form>
利用富文本标签
富文本的使用教程
安装:
npm i -S @wangeditor/editor @wangeditor/editor-for-vue
第一步:
添加视图组件(两个)(一个是工具栏标签,一个是编辑器标签)
<div style="border: 1px solid #ccc;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
第二步:
导入组件,注册组件,以及一些data依赖
import Editor, Toolbar from '@wangeditor/editor-for-vue'
components: Editor, Toolbar
data()
return
// 富文本编辑对象
editor: null,
// 富文本中的绑定的数据
html: '<p>hello</p>',
// 工具栏,可以自定义
toolbarConfig: ,
//编辑框的自定义
editorConfig: placeholder: '请输入内容...' ,
//剪辑模式和默认模式
mode: 'default', // or 'simple'
,
methods:
onCreated(editor)
this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
,
,
mounted()
// 模拟 ajax 请求,异步渲染编辑器
setTimeout(() =>
this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
, 1500)
,
beforeDestroy()
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时,及时销毁编辑器
第三步,记得引入 style
<style src="@wangeditor/editor/dist/css/style.css"></style>
完成一个富文本的框架。
以上是关于利用富文本标签——elementui——关于tabs标签页不能在内部包裹这个form表单的主要内容,如果未能解决你的问题,请参考以下文章
cocos2d-x之 利用富文本控件解析xhml标签(文字标签,图片标签,换行标签,标签属性)
从文本中提取图片路径(java 解析富文本处理 img 标签)