Vue.js使用vue-editor绑定v-model时< >等特殊字符无法显示如何解决

问题原因 #

vue-editor默认会将v-model绑定的内容作为HTML代码渲染，未转义的<、>会被浏览器识别为HTML标签的首尾标识，格式不合法的HTML标签及后续内容会被直接过滤，导致内容截断。

解决方法 #

你可以根据自身需求选择以下任意一种方案：

方案1：纯文本渲染（无需保留富文本能力推荐） #

给vue-editor组件添加content-as-text属性，组件会自动将所有传入内容识别为纯文本，自动转义特殊字符，不会做HTML解析，修改组件代码如下：

<vue-editor 
  id="Leditor" 
  type="textarea" 
  v-model="pandogsogeon"
  :content-as-text="true"
></vue-editor>

原有JS赋值逻辑不需要修改即可正常显示所有字符。

方案2：手动转义特殊字符（需要保留富文本能力推荐） #

如果需要保留编辑器的富文本解析能力，仅要把传入的纯文本内容中的特殊字符转义，可以自行实现转义函数处理内容后再赋值给绑定变量：

// HTML特殊字符转义函数
function escapeHtml(rawStr) {
  return rawStr.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;')
}

// 赋值前先转义
const text = "aasdfas<>asdfad<>"
this.pandogsogeon = escapeHtml(text)

内容的提问来源于stack exchange，提问作者김경연