TinyMCE jQuery (4.1.x) を、ざっくりと導入

ざっくりとTinyMCEを導入する方法を記述する。

まずは、ココでTinyMCE4.1.6 jQuery packageをダウンロード。

tinymce1

 

落とした物を解凍し、任意のサイトのjsフォルダに、解凍したjsフォルダの中のtynymceフォルダをまるっとコピー

tinymce2

こんな感じかな。
*なんかついてるけど、NetBenseのツリーなので気にしないで。
*scssは、前回の記事の名残だからこれも気にしないで。

そして、index.htmlはこんな感じ。

<!DOCTYPE html>
<html>
    <head>
        <title>LaboLabo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1");
            google.load("jqueryui", "1");
        </script>
        <script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
        <script type="text/javascript">
            $(function(){
                tinyMCE.init({
                    selector:"textarea"
                });
            });
        </script>
    </head>
    
    <body>                  
        <form method="post" action="somepage">
            <textarea>
            </textarea>
        </form>
    </body>
</html>

これで、とりあえず最低限のWYSIWYGができる。

以上。

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>