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

ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list [連載] サイボウズLiveを作る
第1回 サイボウズLiveを作る-第1回-アイコン登録まで
第2回 サイボウズLiveを作る-第2回-グループ登録まで
第3回 サイボウズLiveを作る-第3回-トピック登録まで
第4回 サイボウズLiveを作る-第4回-Todoをざっと
第5回 サイボウズLiveを作る-第5回-グループへ参加

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント