在cryptpad日历记事功能中编辑条目内容时怎样支持多行
cryptpad是一款开源协作办公工具,笔者日常较多使用其日历记事功能。不过在增加和编辑日历记事条目内容时,cryptpad不支持多行,感觉不爽。现将解决方案发布于此,希望对大家有所帮助。
需要修改两个文件,然后重新启动cryptpad后即可生效。
一、修改文件 www/calendar/inner.js
1、找到1174行,如下述代码位置。如果内容不一致,请按内容查找,定位到该内容所在行。
if ($el.find('.tui-full-calendar-hide.tui-full-calendar-dropdown').length || !show) {
$el.hide();
UI.warn(Messages.calendar_errorNoCalendar);
return;
}
var isUpdate = Boolean($el.find('#tui-full-calendar-schedule-title').val());
if (!isUpdate) { $el.find('.tui-full-calendar-dropdown-menu li').first().click(); }
1174行: var $button = $el.find('.tui-full-calendar-section-button-save');
var div = getNotificationDropdown();
$button.before(div);
2、在该行增加插入如下内容
var ei=document.getElementById("tui-full-calendar-schedule-title");
var et=document.createElement("textarea");
et.id=ei.id;
et.className=ei.className;
et.innerText=ei.value;
ei.after(et);
ei.remove(1);
这段代码使用支持多行 TEXTAREA 标签替换掉原来只支持单行的 INPUT 标签。
二、修改文件 customize.dist/src/less2/include/forms.less:
1、找到第18行,如下述代码位置。如果内容不一致,请按内容查找,定位到该内容所在行。
input:not(.numInput):not(.form-control):not(), textarea, div.cp-textarea {
// background-color: @alertify-input-fg;
color: @cp_forms-fg;
background-color: @cp_forms-bg;
border: 1px solid @cp_forms-border;
border-radius: @variables_radius;
18行: font-size: 100%;
padding: @alertify_padding-base;
&:not(.tui-full-calendar-content) {
width: 100%;
}
&.tui-full-calendar-content {
font-size: @colortheme_app-font-size;
}
& {
background-color: @cp_forms-readonly;
border-color: @cp_forms-readonly-border;
color: @cp_forms-fg;
}
.tools_placeholder-color();
}
2、在该行前插入双斜线,注释掉该行,如
//font-size: 100%;
注释掉该行的原因时,font-size:100% 会影响 TEXTAREA 内容的正常展现和编辑。
三、重启cryptpad,修改生效
进入 cryptpad 主目录,运行 node server.js。
打开页面,进入日历功能,看下效果。可以看到,原来的 INPUT 标签已经被 TEXTAREA 标签替换掉,可以支持多行展现和编辑了。
页:
[1]