Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Replace WYMeditor and improve the authoring experience

オープン
#520 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
15/100
issue の種類
機能追加
明瞭さ
説明が足りない
活発さ
活発
技術スタック
javascript
領域
frontend

調査の方向性

Start with docs/markdown-editor/prototype.html and inspect the existing WYMeditor integration across page types, including mailing list and comments. The issue leaves the editor and stored content format undecided and raises migration, review, search, and revision requirements. Done means agreeing on those choices and delivering the editor, content migration, editing area, two step article flow, and image alt text requirements.

索引モデルが issue の本文から書いたものです。

説明

Component: User interface Component: Wymeditor Impact: High Level: Difficult Pagetype: Peer reviewed article Status: Needs discussion Type: Enhancement Usecase: De Stadsbron Value: Users

Authors at De Stadsbron consider the current editor a show stopper. Writing or pasting a long article takes paragraph-by-paragraph copying, headings must be fixed by hand, and the editing area is a small, bare text field. WYMeditor 1.1.1 was last released in 2015 and depends on outdated libraries (see #437).

Editor

Choose and integrate a maintained editor. Candidates mentioned so far:

  • Milkdown or TOAST UI Editor (Markdown-based, usable from plain JavaScript)
  • CKEditor 5 or TinyMCE (HTML-based)

Requirements:

  • Clean paste from Word, Google Docs and web pages (see #348)
  • A limited set of styles: body text, two heading levels, quote, list, link, image, table (see #69)
  • Tables (see #64), image captions (see #119, #285), external links in a new tab (see #378)
  • No HTML knowledge required from authors
  • Works for all page types that now use WYMeditor, including the mailing list and comments (see #98)
  • A migration path for existing content
Stored content format

The choice of editor depends on how content is stored. Today content is stored as XHTML inside the page XML. Options:

  • Keep XHTML and use an HTML editor
  • Store Markdown (for example CommonMark plus a few extensions for figures and captions) and render it to HTML on output
  • Store both: Markdown as source, cached HTML for display

Points to decide: separation of content and layout, lossless conversion of existing articles, impact on the mailing list, peer reviewed article, festival and search, and support for revisions (see #241) and inline comments or track changes for reviewers (see #136).

A clickable prototype of a Markdown editor is available in docs/markdown-editor/prototype.html.

Editing area
  • Let the editing area grow automatically with its content (or default to a large height), so authors keep an overview of long articles
  • Repeat the Save and Cancel buttons at the bottom of the form
Creating an article in two steps

Creating an article now presents all fields at once, with the excerpt above the article text. Proposal:

  • Step 1: the article (title and text)
  • Step 2: excerpt (rename to "Intro text on the website"), excerpt image, notes ("Bijsluiter"; reconsider this term) and sources
  • A "Next step" button at the top and the bottom of step 1
  • When choosing "New page", preselect "Article with review" as the page type
Alt text for images
  • Add a required "Description (alt text)" field to the image dialog
  • Show a warning in the edit view when an image has no alt text
  • Keep the caption (see #119) separate from the alt text

Related: #437, #69, #348, #64, #70, #90, #98, #119, #136, #138, #204, #230, #241, #285, #309, #378, #379, #403, #28

Origin: meeting on the future of Hypha (De Stadsbron).

主要言語
JavaScript
スター
5
フォーク
9
平均マージ
18時間 7分
マージ済み PR(30日)
11

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

PlanBCode/hypha のほかの issue

PlanBCode/hypha の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。