关于前端:vue中tinyMCE数据回显示html标签回显数据带标签等错误问题

编辑数据:
1、首先咱们须要定义一个办法transContent转换v-model中的值,替换以后编辑器返回的数据(带有html标签:<p>、<br/>等标签)

<Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled" />
<script>
import tinymce from 'tinymce'
import 'tinymce/themes/silver'
// 引入tinymce-vue
import Editor from '@tinymce/tinymce-vue'
...
//应用组件模式援用
watch: {
    // 监听内容变动
    value(newValue) {
        this.myValue = transContent(newValue)
    },
    myValue(newValue) {
        this.$emit('input', transContent(newValue))
    }
},

2、transContent办法:
// 转换成一般字符

export function transContent(str) {
    if (!str) return str
    var arr = {
        'lt': '<',
        'gt': '>',
        'nbsp': ' ',
        'amp': '&',
        'quot': '"'
    }
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
        return arr[t]
    })
}

3、init减少配置:forced_root_block: ”,写在配置项最后面

            init: {
                forced_root_block: '', // 革除标签显示
              }

4、回显胜利:

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理