【Movable Type】編集画面でタイトルの文字数カウント

タイトルの文字数をカウントしたい

MTの編集画面でタイトルの文字数をカウントする方法をご紹介します。
今回は下記記事を参考にさせていただきました。

Movable Type のリッチエディタ(TinyMCE)に文字数カウント機能を付ける

こちらは本文の文字数カウントなのでちょっと調整。

alt-tmplを作成

alt-tmplに下記を複製します。

mt/tmpl/cms/edit_entry.tmpl

mt/alt-tmpl/cms/edit_entry.tmpl

edit_entry.tmplに追記

<mt:include name="include/header.tmpl" id="header_include">

の手前に下記のコードを挿入します。

<mt:setvarblock name="js_include" append="1">
  <script>
    jQuery(function($){
      var $title = $('#title');
      var l = $title.val().replace(/<.*?>|\n/g, '').length;
      var statusHTML = '<span>文字数 : <span id="current-length-title">' + l + '</span></span>';
      $title.before(statusHTML);

      $title.on('keydown keyup keypress change',function(){
        var l = $(this).val().length;
        $('#current-length-title').html(l);
      });
    });
  </script>
</mt:setvarblock>

以上で、作業は終了です。

Writer

ko

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Page Topへ