ace编辑器将粘贴的json自动格式化

weixin_44131214

已于 2022-04-12 18:01:11 修改

阅读量3.6k

点赞数

分类专栏：前端组件文章标签： json js layui.js 编辑器

于 2022-03-29 17:56:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44131214/article/details/123827686

版权

本文介绍了如何在ace编辑器中实现JSON数据的粘贴并自动格式化。通过引入ace.js及相关样式文件，设置编辑器配置，并利用工作线程和模式文件work-json.js和mode-json.js来处理JSON格式化。在处理粘贴事件后，通过延迟执行确保原始字符串被格式化的JSON字符串覆盖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导入ace.js

<script src="/lib/layui-v2.5.5/ace.js" charset="utf-8"></script>

html 设置一个隐藏的文本框,可以将编辑器的文本内容赋值给文本框,方便form表单提交

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">扩展数据</label>
    <div class="layui-input-block">
        <textarea style="display : none;" placeholder="请输入指定格式的JSON"  lay-verify="isJSON" class="layui-textarea"  name="extData"></textarea>
        <div id="extDataEditor" style="height:200px"></div>
    </div>
</div>

设置编辑器样式,字体等
注意编辑器样式js需要与ace.js放在同一个文件夹中
同时还需要引入work-json.js和mode-json.js