我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.ai/。
同事3天没解决的问题，Trae AI编程工具半小时就解决了。
我司多数系统都是前后端分离的。而我个人也很多年不写前端了，之前接触前端还是 jQuery、JSP、ext 时代。现在我看同事们用的前端多数都是 VUE、React 等框架，我几乎是一窍不通。
刚好有一个系统，需要设计一个新页面，提交新的数据给第三方。而第三方需要一个特殊的文本编辑器，前端组的同事们，找了很多框架，屡试不爽，将问题上报到我这里了。
我迅速了解了一些需求，和产品的设计图。
就这？？？要什么鸡腿，看起来不难，用 textarea 都能实现，不需要其它框架。
于是乎，我使用了字节跳动的 AI 编程工具：Trae，半小时就解决她们的技术难题了。本文记录解决过程。
Trae
Trae 是字节跳动推出的一款 AI 编程工具，对标 Cursor 和 Copilot。
目前首发于海外用户，当然国内也可以使用，需要一点小魔法，目前完全免费。
下载地址，安装教程，以及魔法处理参考这篇文章：。
AI解决难题
这款工具使用起来，超级简单，不需要特殊的提示词即可实现华丽的 AI 编程。
我直接在 Chat 对话框中输入一下内容：
参考图片中的 textarea 案例。请使用 html + JavaScript 语言帮我实现类似效果。并将代码写入到 abc.html 文件中。
我把产品的案例截图和对话一起输送给 Trae。最终它输出了一下代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Textarea with Emojis</title>
<style>
.container {
margin: 20px;
}
.emoji-btn {
font-size: 20px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.toolbar {
margin-bottom: 10px;
}
textarea {
width: 300px;
height: 150px;
padding: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
<button class="emoji-btn" onclick="insertEmoji('😊')">😊</button>
<button class="emoji-btn" onclick="insertEmoji('👍')">👍</button>
<button class="emoji-btn" onclick="insertEmoji('😄')">😄</button>
<button class="emoji-btn" onclick="insertEmoji('😃')">😃</button>
<button class="emoji-btn" onclick="insertEmoji('😉')">😉</button>
</div>
<textarea id="myTextarea" placeholder="请输入内容..."></textarea>
</div>
<script>
function insertEmoji(emoji) {
const textarea = document.getElementById('myTextarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const text = textarea.value;
// 在光标位置插入表情
textarea.value = text.substring(0, start) + emoji + text.substring(end);
// 将光标移动到插入的表情后面
textarea.selectionStart = textarea.selectionEnd = start + emoji.length;
// 让 textarea 重新获得焦点
textarea.focus();
}
</script>
</body>
</html>
另外，它还给出了如下解释：
1. 创建了一个带有工具栏的文本输入区域
2. 工具栏包含了5个表情按钮
3. 点击表情按钮可以在光标位置插入对应的表情
4. 添加了基本的样式，使界面看起来更美观
5. 支持在文本中任意位置插入表情
你可以直接将这段代码保存为 abc.html 文件，然后用浏览器打开即可使用。如果你想添加更多表情，只需在工具栏中添加更多的按钮即可。
运行后的效果令我十分惊讶。
虽然，最终效果没有完全实现，但它的实现程度已经非常高了。
于是，我继续提问，让它辅助我编程。
我在代码中加入了一个新的按钮 B。现需要实现，当我点击 B 按钮时，若选择了内容，则在选中的内容首位添加*。例如：针对内容"你好，我是ai，我会abc"，选中“是a”这个字符串后，效果变为：“你好，我是ai，我会abc”。请帮我完成此效果。
在实现这个代码新增功能的过程中，还出现了一些小插曲。公司网线被同事踢掉了，导致一直上不了网，Trae 一直提示网络异常，请稍后重试。我以为是使用的人多，直接给官方反馈，谁知微信都发不出去消息。问了一下办公室的其他同事，才知道网线给它们踢掉了。
网络好了之后，我直接进行重试。不到 1 分钟的时间，它给我输出了以下代码。
并给我解释了代码。
这段代码的功能说明：
1. insertB 函数接收两个参数：prefix（前缀）和 suffix（后缀），在这里都是 *
2. 获取文本区域中选中文本的起始和结束位置
3. 检查是否有选中的文本（start !== end）
4. 如果有选中的文本，则在选中文本的前后分别添加 *
5. 更新文本区域的内容
6. 保持选中状态，并调整光标位置
7. 最后让文本区域重新获得焦点
现在你可以在文本区域中选择任意文本，点击 B 按钮就可以在选中文本的前后添加 * 了。
我直接点击上图右上角的“应用”按钮，源代码文件中的内容就直接更新了，浏览器刷新后效果令我非常满意。
接着，我继续提问。
我在 abc.html 文件中继续添加了一些代码。现在请帮我实现预览功能。要求把两个
*之间的内容加粗显示；两个“-”之间的内容斜体显示；两个~之间的内容显示删除线；“```”之间的内容显示为代码样式。当我点击预览按钮后，把 myTextarea 中的内容预览显示到 id 为 showPreview 的 div 中。
AI 编程工具，继续输出了代码，并给出了代码解释。
<head>
<meta charset="UTF-8">
<title>Textarea with Emojis</title>
<style>
// ... existing code ...
#showPreview {
margin-top: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
min-height: 100px;
}
.code-block {
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
font-family: monospace;
white-space: pre-wrap;
}
</style>
</head>
// ... existing code ...
<script>
// ... existing code ...
function preview() {
const textarea = document.getElementById('myTextarea');
const previewDiv = document.getElementById('showPreview');
let content = textarea.value;
// 处理加粗文本
content = content.replace(/\*(.*?)\*/g, '<strong>$1</strong>');
// 处理斜体文本
content = content.replace(/_(.*?)_/g, '<i>$1</i>');
// 处理删除线文本
content = content.replace(/~(.*?)~/g, '<del>$1</del>');
// 处理代码块
content = content.replace(/```([\s\S]*?)```/g, '<div class="code-block">$1</div>');
// 保留换行符
content = content.replace(/\n/g, '<br>');
// 显示处理后的内容
previewDiv.innerHTML = content;
}
</script>
我一键应用后，继续测试效果。
接着，我又提了优化，样式等细节问题。
上面的代码中，我发现了一个小问题需要改进。执行 insertB 方法时，如果发现首尾已有对应插入的符号，则不执行prefix和suffix符号添加。请帮我进行优化。
最终都被它完美的实现了。
最后我把文件发给前端同事，她连连感谢，请我一杯咖啡☕️。
以上，请大家赶紧下载，上手试试吧。祝大家玩的开心。
