No.22 vue-element-admin 学习使用（十七）修改原生JSON编辑器,支持多语言

dangsh
963 阅读1分钟

这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

Markdown

之前提到了markdown组件由于使用了tui-editor库，yarn的时候导致bug，无法使用，就给删除了，之后需要用到的时候再想办法加上好了

JSON编辑器

效果看起来也挺好的，用了CodeMirrorr 也是引入就可以使用

image.png

image.png

但是功能有一些单一，只支持json，其实CodeMirrorr是支持多种语言的，所以尝试对项目里的组件进行一些修改，让它支持多种语言。

页面的vue文件在下面的路径下

image.png

组件在@/components/JsonEditor/index.vue中 我们用props接收一下传来的modes，modes是支持的语法高亮模式，

image.png

<json-editor ref="jsonEditor" :value="value" :modes="modes" />

modes: {
      type: Array,
      default: function() {
        return []
      }
    }

首先需要引入具体的语法高亮库才会有对应的语法高亮效果，于是在原本的基础上，引入了一堆库

image.png

然后在初始化的时候，传modes参数，这样就支持切换别的语言了

image.png

切换语言的小功能，先简单写一个选择框，用来选择编辑器的语言 image.png

change方法是下面这样，修改编辑器语法配置，然后_getLanguage获取到修改后的语法

image.png

所以要看一下_getLanguage方法，比较传来的语法类型

image.png

然后可以看一下效果，原本是json编辑器，python的语法无效

image.png

然后切换成python语法，def关键字就被识别了

image.png

切换成java，public 关键字被识别到了

image.png

至此，json编辑器至此多语言完成了

参考了一些www.jianshu.com/p/b9d342264… 的内容，在这里表示感谢

avatar
文章
阅读
粉丝