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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    tiptap/vue 中给editor绑定带有html的值,自动把里面的除了p标签以外的给过滤了
    56
    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楼

      在Tiptap Vue中,你可以在编辑器中绑定一个带有HTML的值,并在编辑器触发事件时,将HTML内容过滤掉,只保留p标签。这可以通过使用vue中的过滤器和模板语法来实现。

      以下是一个简单的示例:

      首先,你需要在你的Vue组件中创建一个过滤器:

      ```javascript import Vue from 'vue' import { Filter } from 'vue过滤器'

      Vue.filter('filterHTML', function(html) { return html.replace(/]*>/g, '') }) ```

      在这个例子中,我们创建了一个名为filterHTML的过滤器,它使用正则表达式来匹配HTML中的p标签。然后,我们将匹配到的p标签替换为空字符串,从而实现了过滤的效果。

      然后,你可以在你的编辑器的模板中使用这个过滤器:

      ```html

      ```

      在这个例子中,我们使用了filterHTML过滤器来过滤elements数组中的元素,只保留p标签。然后,我们将在编辑器的模板中使用这个过滤器来显示过滤后的元素。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部