[tips] CalipsoにTinyMCEを組込んだあと新規投稿ができない状態を回避する方法

2014.07.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今日は小ネタです

表題の通りTinyMCEを組み込んだ後に新規投稿を行うと下記のエラー An invalid form control with name='content[content]' is not focusable. が発生して、コンテンツが登録できない状況に陥りました。ちなみに既存コンテンツの場合は編集後の保存でも問題ありません。これを回避するにはHTMLを修正する必要があります。

修正したHTMLは/Library/WebServer/Documents/MySite/themes/downloaded/calipso/templates/default/scripts.htmlです

/Library/WebServer/Documents/MySiteまでのパスは適宜インストールした環境に合わせて変えてください。

calipso_20

原因は何か?

Chromeでrequired付きinputがhiddenだと落ちるそうです。。。 ということで、12行目〜28行目の回避コードをHTMLに追加して対策完了です。

<!--  JQuery -->
<script src="/js/jquery-1.8.3.min.js"></script>

<!--  Prettify -->
<script src="/js/prettify/prettify.js"></script>

<!--  jsTree menu -->
<!-- <script src="/js/jsTree/jquery.jstree.js"></script> -->

<script src="/js/cleanslate-core.js"></script>

<!-- chrome does not work issue resolved --->
<script type="text/javascript">
$('input#submit').click(function(){
    $('textarea[required="required"]').each(function(){
        var ele = $(this);
        if (ele.is(':hidden')) {
            ele.removeAttr('required');
        }
    });
    $('input[required="required"]').each(function(){
        var ele = $(this);
        if (ele.is(':hidden')) {
            ele.removeAttr('required');
        }
    });
});
</script>

<!--  START OF DYNAMIC INSERTION -->
<%- scripts %>
<!--  END OF DYNAMIC INSERTION -->

<script>
    $(function () {

        // Navigation
        $('.primary-menu').jstree({
            "themes":{
                "theme":"default",
                "dots":false,
                "icons":false
            },
            "plugins":[ "themes", "html_data" ]
        });

        // Pretty printing
        prettyPrint();

        $('.content-block').dblclick(function () {
            if (this.id) {
                location.href = "/content/edit/" + this.id + "?returnTo=<%= request.url %>";
            }
        });

    });
</script>