前端新手历险记之在VUE项目中使用Ace编辑器(brace)和一些TypeScript知识点

作者:V君 发布于:2018-9-8 23:52 Saturday 分类:折腾手记

TL;DR


▉ 将Ace编辑器引入项目

1) $npm install brace

2) $npm install --save @types/ace

3) ts:import * as ace from 'brace';

4) ts:import 'brace/...";


▉ TypeScript类型转换,对于 var dom = this.$refs["editor-dom"] 有两种方式

1) ts:ace.edit(dom as HTMLElement);

2) ts:ace.edit(<HTMLElement>dom);//这种方式会使tsx编译器报错标签未关闭,但实际能用


▉ 在TypeScript类中声明可空属性

在标识符后面加感叹号否则必须在构造时初始化,例子:

ts:private editor!: ace.Editor;


虽然这次的收获不多,但还是花了不少时间查资料来弄懂,得好好扯一扯:


终于到了不用跑公司的周末,接下来可以继续学习前端构建了。

继续之前发表的博文话题,依然是在VUE脚手架创建的项目上搞事情。

一直都想自己实现一个博客系统,虽然已经确定要用markdown来作为文章主体承载方式。

但还需要一个可靠的在线文本编辑器,把“web code editor”喂狗之后第一个跳出来的就是ace。

那就选它吧,看看怎么导入项目中来。


一开始的时候由于不知道brace和ace的关系,就一个劲地想把ace导入项目

分别尝试安装了好几个有ace字眼的包到项目里然后试图导入,结果没有一个能行。

接下来转移目标,找找看有没有别人封装好的VUE组件,拿过来用岂不是爽歪歪,

然而并不爽,但发现众多VUE组件封装的ace编辑器都引用了brace而不是ace。

查了才知道ace太过完整,甚至需要服务端支持,就有了brace这个纯前段的ace,

如其名“browserify compatible version of the ace editor”。


明确了要导入的东西之后发现它作为一个npm包是一个js库,在TS中使用只能作为any,

需要引入类型描述文件,这里又绕了一大圈,因为上述原因对于ace字样的包不去看,

一个劲地想找brace类型描述文件,最后还是用上了最初发现的@types/ace包。


将类型描述文件和npm包搭配着导入到项目中之前还以不同的错误姿势尝试了半天,

用各种摸不着头脑的关键字喂狗,最后总算是参考着github上的文档将类型引入。


至此ace编辑器总算可以呈现在浏览器中。

然而要使用ace的其它功能还得用不同的姿势导入其他定义。


这次历险到此结束 XD


标签: 软件开发 Web技术 VUE 前端工程

引用地址:

发表评论:

Powered by emlog 去你妹的备案 sitemap