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

admin · Post time 2023-6-12 15:54:46

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 标签替换掉，可以支持多行展现和编辑了。

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

使用高级回帖 (可批量传图、插入视频等)快速回复