Newt

無料ではじめる
  • ガイド
  • コンセプト

リッチテキストエディタ

Table of contents

Newtでは、モデルにリッチテキストフィールドを指定することで、リッチテキストエディタを利用できます。
リッチテキストエディタで利用可能なフォーマットの一覧について紹介します。

1. 見出し

管理画面での表示
richtext-editor01.png

出力されるHTML

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

2. テキストのスタイル

管理画面での表示
richtext-editor02.png

出力されるHTML

<strong>太字</strong>
<em>斜体</em>
<u>下線</u>
<s>取り消し線</s>

※ 改行で表示されるpタグについては記載していません

3. リスト

管理画面での表示
richtext-editor03.png

出力されるHTML

<ul>
  <li>aaa</li>
  <li>bbb</li>
</ul>
リストの入れ子には対応しておりません。
リストに対してタブキーを押すと、ql-indent-1 や ql-indent-2 といったクラスが付与され、管理画面上では入れ子になったように見えますが、HTML要素としては入れ子になっていないのでご注意ください。
入れ子を行う場合はマークダウンエディタのご利用をご検討ください。

4. 番号付きリスト

マークダウンエディタでの記載

1. aaa
2. bbb

管理画面での表示
richtext-editor04.png

出力されるHTML

<ol>
  <li>aaa</li>
  <li>bbb</li>
</ol>
リストの入れ子には対応しておりません。
リストに対してタブキーを押すと、ql-indent-1 や ql-indent-2 といったクラスが付与され、管理画面上では入れ子になったように見えますが、HTML要素としては入れ子になっていないのでご注意ください。

5. コード

管理画面での表示
richtext-editor05.png

出力されるHTML

<code>コード</code>

6. コードブロック

管理画面での表示
richtext-editor06.png

出力されるHTML

<pre class="ql-syntax" spellcheck="false">
  <span class="hljs-keyword">const</span> <span class="hljs-title function_">hello</span> = () => {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Hello!'</span>)
}
</pre>
言語識別子を追加することはできません。
言語識別子を追加する場合はマークダウンエディタのご利用をご検討ください。

7. 引用

管理画面での表示
richtext-editor07.png

出力されるHTML

<blockquote>引用</blockquote>

8. 下付き文字

管理画面での表示
richtext-editor08.png

出力されるHTML

<sub>下付き文字</sub>

9. 上付き文字

管理画面での表示
richtext-editor09.png

出力されるHTML

<sup>上付き文字</sup>

10. 文字色

管理画面での表示
richtext-editor10.png

出力されるHTML

<span style="color: rgb(230, 0, 0);">赤</span>
<span style="color: rgb(0, 102, 204);">青</span>

※ 改行で表示されるpタグについては記載していません

11. 背景色

管理画面での表示
richtext-editor11.png

出力されるHTML

<span style="background-color: rgb(230, 0, 0);">赤</span>
<span style="background-color: rgb(0, 102, 204);">青</span>

※ 改行で表示されるpタグについては記載していません

12. 文字揃え

文字揃えは古いオプションです。現在は対応しておりません。

文字揃えを設定すると、ql-align-center・ql-align-right・ql-align-justify といったクラスが付与され、管理画面上ではスタイルが適用されますが、APIで取得した際はスタイルが適用されないため、ご注意ください。

13. 区切り線

管理画面での表示
richtext-editor13.png

出力されるHTML

<hr>

14. 画像

管理画面での表示
richtext-editor14.png

出力されるHTML

<img src="https://画像のURL">

15. リンク

管理画面での表示
richtext-editor15.png

出力されるHTML

<a href="https://リンクのURL" target="_blank">リンクテキスト</a>

16. 数式

管理画面での表示
richtext-editor16.png

出力されるHTML

<span class="ql-formula" data-value="y=x^2">\ufeff
  <span contenteditable="false">
    <span class="katex">
      <span class="katex-mathml">
        <math xmlns="http://www.w3.org/1998/Math/MathML">
          <semantics>
            <mrow>
              <mi>y</mi>
              <mo>=</mo>
              <msup>
                <mi>x</mi>
                <mn>2</mn>
              </msup>
            </mrow>
            <annotation encoding="application/x-tex">y = x^2</annotation>
          </semantics>
        </math>
      </span>
      <span class="katex-html" aria-hidden="true">
        <span class="base">
          <span class="strut" style="height: 0.625em; vertical-align: -0.1944em;"></span> 
          <span class="mord mathnormal" style="margin-right: 0.0359em;">y</span>
          <span class="mspace" style="margin-right: 0.2778em;"></span>
          <span class="mrel">=</span>
          <span class="mspace" style="margin-right: 0.2778em;"></span>
        </span>
        <span class="base">
          <span class="strut" style="height: 0.8141em;"></span>
          <span class="mord">
            <span class="mord mathnormal">x</span>
            <span class="msupsub">
              <span class="vlist-t">
                <span class="vlist-r">
                  <span class="vlist" style="height: 0.8141em;">
                    <span class="" style="top: -3.063em; margin-right: 0.05em;">
                      <span class="pstrut" style="height: 2.7em;"></span>
                      <span class="sizing reset-size6 size3 mtight">
                        <span class="mord mtight">2</span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
        </span>
      </span>
    </span>
  </span>\ufeff
</span>
数式をフロントエンドで正しく表示するには KaTeX のcssが必要です。
例えばNext.jsでご利用の場合、KaTeXのライブラリ をダウンロードし、import 'katex/dist/katex.min.css' するなどの対応が必要です。

17. 埋め込み

Twitterを埋め込んだ場合は以下のようになります。

管理画面での表示
richtext-editor17.png

出力されるHTML

<div class="ql-embed">
  <div class="embed-content">
    <blockquote class="twitter-tweet" data-dnt="true" align="center">
      <p lang="ja" dir="ltr">
        本日より「Form App」の提供をスタートします🎉フォーム構築に必要不可欠なバックエンド機能を、エンドポイントを貼り付けるだけで簡単に利用できるヘッドレスフォームアプリです。無料でご利用いただける「Entryプラン」をご用意していますので、ぜひお試しください！
        <a href="https://t.co/AdmliPy6C7">https://t.co/AdmliPy6C7</a>
      </p>
      — Newt | すべての人にとって使いやすいヘッドレスCMS (@newt_cms)
      <a href=\"https://twitter.com/newt_cms/status/1598113633124634624?ref_src=twsrc%5Etfw\">December 1, 2022</a>
    </blockquote>
    <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  <div class="embed-controller" data-embedded-url="https://x.com/newt_cms/status/1598113633124634624"></div>
</div>

18. フォーマット取り消し

見出し、太字、リスト、文字色などのフォーマットを取り消すことができます。

clean-formatting.png

関連ドキュメント

ガイド / コンセプト

マークダウンエディタ

NewtMade in Newt