none
TinyMCE4 でファイルをアップロードする方法 RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    お世話になります。

    TinyMCE4 を使用した時のファイルのアップロードの仕方を教えてください。

       <script type="text/javascript" src="../tinymce\js\tinymce\tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea',
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table contextmenu paste imagetools'
            ],
            toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | Emotions',
            imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
            content_css: [  '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
                            '//www.tinymce.com/css/codepen.min.css'
            ],

            file_browser_callback: myCustomFileBrowser
        });

        function myCustomFileBrowser(field_name, url, type, win) {
            var filebrowser = "filebrowser.htm";

    aler(filebrowser);

            filebrowser += (filebrowser.indexOf("?") < 0) ? "?type=" + type : "&type=" + type;
            tinymce.activeEditor.windowManager.open({
                title: "Insertar fichero",
                width: 520,
                height: 400,
                url: filebrowser
            }, {
                window: win,
                input: field_name
            });
            return false;
        }

    と言うように、「https://www.morethanweb.es/en/news/how-to-implement-a-file-loader-in-tinymce-4.html」を参考にしました。

    どのように動かないかと言うと、上記のサンプル中央下にある画像の赤枠で囲まれた「Insertar fichero」とあるようなウインドウは表示されません。というか、上記コードの　var filebrowser = "filebrowser.htm";の直前までは走っているようです。alert("zz");で確認済み

    たた、var filebrowser = "filebrowser.htm";以降が動かないようです。

    画像のアップロードのやり方を教えてください。

    2017年2月10日 9:50
    |

回答

  • Question
    サインインして投票
    0
    サインインして投票

    Ajax Control Toolkit の HtmlEditorExtender を使うのであれば、その .dll をダウンロードして Visual Studio にインストールする必要があります。（デモのページのコードをコピペしてもダメです）

    自分は v7.x しか使ったことがないし手動でしかインストールしたことはないので詳細は分かりませんが、最新版 v16.1.1 はインストーラーや NuGet を使って自動的にインストールできるそうです。（自動インストールに v7.x 以前では入手できたデモのソースコードが含まれるかは分かりません。それが大変有用なのですが）

    DevExpress/AjaxControlToolkit
    https://github.com/DevExpress/AjaxControlToolkit/wiki

    v16.1.1 は .NET 4 以上でないと使えませんので、もし .NET 3.5 で使うのであれば以下のサイトから v7.x をダウンロードできるようです。（こちらにはデモのソースコードが含まれています）

    http://ajaxcontroltoolkit.codeplex.com/releases

    ただし、手動でのインストールが必要です。インストールの仕方は、古い記事ですが、以下が参考になると思います。

    ［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？
    （2008年7月改訂版）［2.0、3.0、3.5、C#、VB］
    http://www.atmarkit.co.jp/fdotnet/dotnettips/561aspajaxprepare/aspajaxprepare.html

    今後、Ajax Control Toolkit の HtmlEditorExtender に関する追加の質問をしたい場合は、新たに別のスレッドを立ててそこで質問していただくようお願いします。

    ここで質問を継続される場合は表題の「TinyMCE4 でファイルをアップロードする方法」の話に限っていただくようお願いします。

    2017年2月11日 7:42
    |

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票 
    aler(filebrowser);

    の誤字は関係ありますか？

    Webブラウザー上でF12開発者ツールを立ち上げればエラー箇所で停止するので原因を特定できるかもしれません。

    2017年2月10日 12:36
    |
  • Question
    サインインして投票
    0
    サインインして投票

    お世話になります。

    > var filebrowser = "filebrowser.htm";の直前までは走っているようです

    は、おっしゃる通り誤字でした。しかし実行後は下記のようになり（文字化け？）

    ファイルブラウザ（これを期待しています）が」表示されません。

    "filebrowser.htm"の中身は、

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>サンプル</title>
</head>
<body>

<?php
$carpeta_ficheros = 'uploads/';
$directorio = opendir($carpeta_ficheros); // Opens Folder
while ($fichero = readdir($directorio)) { // reads every file
       if (!is_dir($fichero)){ // Omits the folders
            echo "<div class='fichero' data-src='".$carpeta_ficheros.$fichero."'>".$fichero."</div>";
      }
}
?>

</body>
</html>

    2017年2月10日 14:22
    |
  • Question
    サインインして投票
    0
    サインインして投票

    指摘するまでもないことですが、IISがエラーを返すのであればIISのログを確認してください。ブラウザーからどのようなリクエストを受け、それに対してエラーを返したのかが書かれています。

    なお、filebrowser.htmは拡張子がhtmにもかかわらず、中身には  <?php ... ?> の記述があるためPHPコードと判ります。PHPの設定が適切に行われているのでしょうか？ そしてPHPの問題であればASP.NETとは無関係に思います。

    2017年2月10日 21:55
    |
  • Question
    サインインして投票
    0
    サインインして投票

    参考にされている記事に、

    "A file browser is a page where you can  read files in a directory  and  load files . It can be programmed in any programming language that implements these functions. In this case, we have used PHP."

    とあるように、その記事のサンプルの Web アプリ FILEBROWSER.PHP は PHP アプリです。そこを理解されているでしょうか？

    もし質問者さんが、その記事の通りに PHP で実装したいということなら ASP.NET フォーラムで聞くべき質問ではありません。この先私がお役に立てることはなさそうです。

    そうではなくて、Web アプリ FILEBROWSER.PHP を ASP.NET ベースのアプリに代えて実装したいということなら話は別ですが、そうなんでしょうか？


    Web Forms アプリを作っているなら Ajax Control Toolkit の HtmlEditorExtender を利用することも検討してはいかがですか？　デモが以下のページにあります。

    HtmlEditorExtender
    https://ajaxcontroltoolkit.devexpress.com/HtmlEditorExtender/HtmlEditorExtender.aspx

    ファイルアップロードも可能なようです。（使ったことはないので、参考にされている記事のものと比べて使い勝手が良いかどうかは分かりませんが）

    ＃参考にされている記事のコードを試したわけではないので外れかもしれませんが、ファイルをサーバーにアップロードするという機能はなくて、サーバーにアップロード済みの画像ファイルにリンクを張るというようなことをしているように見えます。

    2017年2月11日 3:52
    |
  • Question
    サインインして投票
    0
    サインインして投票

    お世話になります。

    >  ASP.NET ベースのアプリに代えて実装したい・・・

    PHPにこだわっている訳ではありません。 Ajax Control Toolkit の HtmlEditorExtender を利用して実現できるなら申し分ありません。要は、エディタ機能があって（ここでは、TinyMCE）ファイルのアップロードが出来ればいいです。

    教えていただいたサイトのHtmlEditorExtenderは、AjaxControlToolkitを参照に取り込み下記のコードをコピペしましたが、

    <ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" 
    TargetControlID="TextBox1" DisplaySourceTab="true" runat="server"/>
    <Toolbar> 
        <ajaxToolkit:Undo />
        <ajaxToolkit:Redo />
        <ajaxToolkit:Bold />

    上記は、

    <Toolbar> 要素(XHTML5) toolbar はサポートされていません
        <ajaxToolkit:Undo /> 要素 'Undo'は不明な要素です。これは、Wenサイトでコンパイルエラーがある時、または web.configファイルがない時に発生することがあります。

    というメッセージがでます。どのような形で追加できますか？（追加する部分は、上記で会っていますか？）

    2017年2月11日 6:46
    |
  • Question
    サインインして投票
    0
    サインインして投票

    Ajax Control Toolkit の HtmlEditorExtender を使うのであれば、その .dll をダウンロードして Visual Studio にインストールする必要があります。（デモのページのコードをコピペしてもダメです）

    自分は v7.x しか使ったことがないし手動でしかインストールしたことはないので詳細は分かりませんが、最新版 v16.1.1 はインストーラーや NuGet を使って自動的にインストールできるそうです。（自動インストールに v7.x 以前では入手できたデモのソースコードが含まれるかは分かりません。それが大変有用なのですが）

    DevExpress/AjaxControlToolkit
    https://github.com/DevExpress/AjaxControlToolkit/wiki

    v16.1.1 は .NET 4 以上でないと使えませんので、もし .NET 3.5 で使うのであれば以下のサイトから v7.x をダウンロードできるようです。（こちらにはデモのソースコードが含まれています）

    http://ajaxcontroltoolkit.codeplex.com/releases

    ただし、手動でのインストールが必要です。インストールの仕方は、古い記事ですが、以下が参考になると思います。

    ［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？
    （2008年7月改訂版）［2.0、3.0、3.5、C#、VB］
    http://www.atmarkit.co.jp/fdotnet/dotnettips/561aspajaxprepare/aspajaxprepare.html

    今後、Ajax Control Toolkit の HtmlEditorExtender に関する追加の質問をしたい場合は、新たに別のスレッドを立ててそこで質問していただくようお願いします。

    ここで質問を継続される場合は表題の「TinyMCE4 でファイルをアップロードする方法」の話に限っていただくようお願いします。

    2017年2月11日 7:42
    |