在cryptpad日历记事功能中编辑条目内容时怎样支持多行

admin

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([type="checkbox"]), 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;
        }
        &[readonly] {
            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 标签替换掉，可以支持多行展现和编辑了。