2017-11-21に投稿

サイボウズLiveを作る-第3回-トピック登録まで

グループは作成できたので次は実際のコンテンツを作成していく。
とりあえず仕様的にシンプルそうな掲示板を作ってみることにした。
(もしかすると細かい機能が多くあるのかもしれないが)

処理的に特筆するところは特に何もなかったが、
投稿に関してはwysiwygエディタを入れた。

最終的に画像のアップロードも必要だと思うので有料になるCKEditorは無し。
最近のスタンダードがよく分からなかったのでStarやForkが非常に多い下記を入れてみた。

GitHub - quilljs/quill: Quill is a modern WYSIWYG editor built for compatibility and extensibility.

昔のwysiwygエディタといえば、textareaをターゲットにして起動すれば勝手にぜんぶやってくれたが、
これは多分SPA等も考慮されていると思うので勝手にPOSTまで出来るようにはなっていない。
そのため自前でハンドリングしてhiddenタグに入れる。

import Quill from 'quill';

$(function() {
  $('div.richtext').each(function() {
    const $this = $(this);
    const quill = new Quill(this, {
      theme: 'snow',
    })
    $this.data('quill', quill);
    quill.on('text-change', function(delta, oldDelta, source) {
      const html = $this.find('.ql-editor').html();
      this.next('input[type=hidden]').val(html);
    }.bind($this))
})
  <div class="form-group">
    <%= label f, :body, "本文", class: "control-label" %>
    <div class="richtext">
      <p><%= raw(Ecto.Changeset.get_field(@changeset, :body)) %></p>
    </div>
    <input type="hidden" name="board_topic[body]" value="<%= Ecto.Changeset.get_field(@changeset, :body) %>">
    <%= error_tag f, :body %>
  </div>

上記は元々jQueryで書いていたが下記はVueで書きなおしたもの。

<template>
  <div>
    <div ref="richtext">
      <p v-html="value"></p>
    </div>
    <input type="hidden" :name="name" :value="currentValue">
  </div>
</template>

<script>
import Quill from 'quill'

export default {
  props: ['name', 'value'],

  data () {
    return {
      currentValue: this.value,
    }
  },

  mounted() {
    const quill = new Quill(this.$refs.richtext, {
      theme: 'snow',
    });
    this.$refs.richtext.querySelector('input[type=text]').classList.add('form-control');
    quill.on('text-change', (delta, oldDelta, source) => {
      const html = this.$refs.richtext.querySelector('.ql-editor').innerHTML;
      this.currentValue = html;
    })
  },

  methods: {
  }
}
</script>

呼び出しも下記で良いので非常に簡単。新しい時代が来てるなぁという感じ。

 <editor name="board_post[body]" value="<%= Ecto.Changeset.get_field(@changeset, :body) %>"></editor>

htmlを取る方法も特に無いようなので、
issueを探ってみたら.ql-editor内をそのまま使えばいいとの事だったのでそのようにした。

現在までの完成分はこちら。
とりあえずコメント投稿まで。カテゴリも設定、絞り込みできるようにした。
その他の処理はほぼエラー。
あとはタイムゾーンの設定をしていないので時刻がおかしい。

Copying live


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント