admin 发表于 2023-6-12 15:54:46

在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]
查看完整版本: 在cryptpad日历记事功能中编辑条目内容时怎样支持多行