CodeMirror 如何调整高度与宽度?

今天在做项目开发的时候需要使用CodeMirror的代码高亮功能做一个SQL语句的输入框,但是页面显示一直是细细的一条输入框,根据网上的修改CSS文件,或者直接配置参数都无效,最后查资料发现通过editor.setSize方式可以设置,特来做个笔记供大家参考。

附代码及解决办法:

    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      matchBrackets: true,
    });
    editor.setSize('auto','300px');

如上述代码,使用editor.setSize来设置。editor.setSize('width','height');


要配置CodeMirror来支持PHP语言,你需要按照以下步骤进行操作: 1. 首先,引入CodeMirror的核心库文件。你可以从官方网站上下载最新的CodeMirror库文件,并将其引入到你的项目中。 2. 创建一个页面容器,用于承载CodeMirror编辑器。 3. 按需引入CodeMirror的包文件。对于PHP语言的支持,你需要引入php.js包。 4. 根据你的需要选择一个主题,然后引入相应的主题包。主题包存储在theme目录下。 5. 初始化编辑器时,设置语言为PHP,并引入相应的工具包。对于PHP语言,你需要引入php.js工具包。 6. 将页面容器转换为CodeMirror编辑器。使用CodeMirror.fromTextArea()方法可以方便地将textarea元素转换为编辑器。 7. 可选的,你可以设置一些初始化时的参数值,如编辑器的宽度高度等。 8. 监听CodeMirror的事件,对于PHP语言的提示补全功能,你可以在'inputRead'事件中调用showHint()方法。例如,当用户输入或粘贴时,可以触发showHint()方法。 9. 根据需要,可以使用CodeMirror提供的API进行更多的定制和扩展。 需要注意的是,以上步骤仅为一般性的配置指南,具体的实现方式可能会因项目环境和需求而有所差异。你可以根据CodeMirror的文档和示例代码进行更详细的配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CodeMirror-5.60.0在线代码编辑器](https://download.csdn.net/download/LuXiuKang/86505965)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [124.《sql,json编辑器之CodeMirror》](https://blog.csdn.net/qq_44864082/article/details/123945286)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值