彩色编码 Coder

Coder 组件 是基于 CodeMirror 的进一步封装，实现彩色编码功能，但是不再使用 Javascript 的初始化方式并增了一些自动功能。

Coder 以 TEXTAREA 作为配置标签，并支持所有 CodeMirror 的原有属性。

在设置属性时需要使用分隔符格式，如上例中使用line-wrapping而不是lineWrapping。Coder 常用属性简单列表如下：

value 获取代码框中的内容，这是最关键属性。设置值即设置 TEXTAREA 标签的值即可。
coder或mode 编码语言，默认pql。这里可使用 mineType 值，也可直接使用语言名称，如java。一般使用coder属性。
readOnly 是否只读，默认false。
rows 最小行数，默认1。
save 保存代码的动作，支持接口和 PQL 语句，详见与数据相关的属性。当按下Ctrl+Enter时触发保存动作。例如： <textarea coder="html" save="/api/code/update?id=&(id)&code=">
validator 验证器，仅coder或mode属性为json时可用，支持array、object、object-array三个值，分别验证数组、对象和对象数组。当格式不正确时，提示错误信息或invalid-text的内容。如下例： <textarea coder="json" validator="object">
save-text 保存提醒文字。
saving-text 保存中提醒文字。
saved-text 保存完成提醒文字。
required-text 代码框为空时的提示文字。
invalid-text 代码格式不正确时的提示文字，仅支持 Json 的验证。
valid-text 代码格式正确时的提示文字。
success-text 保存成功时的提示文字，默认与saved-text相同。
failure-text 后端验证失败时的提示文字。
exception-text 后端事件发生错误时的提示文字。
message-duration 消息框显示时间，单位秒，设置为0表示一直显示。必须设置这个属性才能使用 Message 进行提醒。
alternative 备选的语言代码 mode，主要是告诉 Voyager 引擎该引入哪些相关的 js 库，这个属性不会被前端使用。如alternative="pql,shell,python"

以上-text结尾的属性显示在代码框的右下角。

与方法相关的属性有 4 个，属性值均为精简事件和事件表达式。

save-on 当其他标签或元素行为触发的保存。
clear-on 当其他标签或元素行为触发的清空。
copy-on 当其他标签或元素行为触发的将所有代码复制到剪切板。
set-{attr}-on 当其他标签或元素行为触发的设置属性，例如 set-mode-on="change: #Select1 -> #(Select1)"。

以上 4 个属性对应的方法分别为save()、clear()、copy()和set(attr, value)。

事件主要有onsave，当保存代码内容时触发，支持return语句，当return false时中断保存。保存事件在输入框失去焦点或者同时按下Ctrl+Enter时触发。

还有一个与之对应的服务器端事件onsave+。

另外两个事件不常用，onfocus和onblur，当输入框获得焦点和失去焦点时触发。

参考链接