账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    tiptap/vue 中给editor绑定带有html的值,自动把里面的除了p标签以外的给过滤了
    15
    0
    tiptap/vue 中给editor绑定带有html的值,页面显示自动把里面的除了p标签以外的给过滤了,比如我的span标签就没了代码如下:<template><div class="editor common-flex-col"><EditorContent class="common-flex-grow" :editor="editor" /></div></template><script>import { Editor, EditorContent } from "@tiptap/vue-2";import StarterKit from "@tiptap/starter-kit";import Underline from "@tiptap/extension-underline";import Highlight from "@tiptap/extension-highlight";import TextStyle from "@tiptap/extension-text-style";import TextStyleAttributes from "./text-style-attributes.js";import CharacterCount from "@tiptap/extension-character-count";import Placeholder from "@tiptap/extension-placeholder";import TextAlign from "@tiptap/extension-text-align";import Paragraph from "@tiptap/extension-paragraph";import Heading from "@tiptap/extension-heading";export default {components: {EditorContent,},props: {value: { type: String, default: ""},limit: { type: Number, default: 0},placeholder: { type: String, default: "请输入..."}},data() {return { editor: null};},watch: {value(value) { const isSame = this.editor.getHTML() === value; if (isSame) { return; } // this.editor = value this.editor.commands.setContent(this.value, false);}},mounted() {this.editor = new Editor({ extensions: [ StarterKit, TextStyle, TextStyleAttributes, Underline, Highlight.configure({ multicolor: true }), CharacterCount.configure({ limit: this.limit }), Placeholder.configure({ placeholder: this.placeholder }), Heading, Paragraph, TextAlign.configure({ types: ["heading", "paragraph"] }) ], content: this.value, onUpdate: () => { this.$emit("input", this.editor.getHTML()); }, onBlur: () => { window.config.isWorking = false; }, onFocus: () => { window.config.isWorking = true; }});},beforeDestroy() {this.editor.destroy();}};</script><style lang="less" scoped>.editor {width: 100%;height: 100%;/deep/ .ProseMirror {height: 100%;border: 1px solid #d9d9d9;padding: 16px;overflow: auto;&:focus { outline: none;}p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: #ced4da; pointer-events: none; height: 0;}h1,h2,h3,h4 { font-weight: bold;}h1 { font-size: 28px;}h2 { font-size: 24px;}h3 { font-size: 20px;}h4 { font-size: 16px;}mark { color: inherit;}ul,ol { padding: 0 16px;}ul { list-style-type: disc;}ol { list-style-type: decimal;}hr { border: none; border-top: 1px solid #e8e8e8; margin: 16px 0;}blockquote { padding-left: 16px; border-left: 2px solid #e8e8e8;}}}</style>// home.vue中是这样的 <Editor v-model="text" class="common-edit-left checkeditor" />text:'<p> 国务院办公厅关于开展城镇小区配套幼儿园治理工作的通知 </p><p> 国办发〔2019〕3号 </p><p> 各省自治区直辖市人民政府,<span class="light light214">国院</span></p>'
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益