やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > C# > Eto.Forms.WebView で JS製テキストエディタ Ace を ローカルファイルで記述し CDN から読み込む

Eto.Forms.WebView で JS製テキストエディタ Ace を ローカルファイルで記述し CDN から読み込む

C# Library

　できた。が、C#とJSが連動できないため、入力したテキストを取得できない……。

成果物

f:id:ytyaru:20181221201814p:plain

対象環境

参考

手順

ソースコード

MainForm.cs

using System;
using Eto.Forms;
using Eto.Drawing;

namespace WebViewLocalHtml
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            Title = "WebView LocalHtml";
            ClientSize = new Size(400, 350);
            //WebView webView = new WebView() { Url=new Uri("file:///res/index.html") };
            WebView webView = new WebView() { Url=new Uri("file:///tmp/work/Projects/WebViewLocalHtml/WebViewLocalHtml/WebViewLocalHtml/res/index.html") };
            //WebView webView = new WebView() { Url=new Uri("https://ace.c9.io/build/kitchen-sink.html") };

            DynamicLayout layout = new DynamicLayout();
            layout.Add(webView);
            Content = layout;
        }
    }
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/theme-twilight.js"></script>
    <!--
    <script src="./app.js"></script>
    <script src="./index.js"></script>
    -->
    <script>
        $(document).ready(function(){
            editor = CreateEditor();
            LoadDefaultMarkdown(editor);
        }, false);
        function CreateEditor() {
            var editor = ace.edit("Editor");
            alert(editor);
            editor.setTheme("ace/theme/twilight");// 唯一背景黒＆箇条書き色分けされる
            editor.setOptions({
                maxLines: Infinity,
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            editor.setFontSize(18);
            editor.getSession().setMode("ace/mode/markdown");
            editor.getSession().setUseWrapMode(true);
            editor.getSession().setTabSize(4);
            editor.scrollToLine(50, true, true, function () {});
            editor.focus();
            return editor;
        }
        function LoadDefaultMarkdown(editor) {
            alert(editor);
            md = "# Markdown ビューア😃\n## h2\n### h3\n#### h4\n##### h5\n###### h6\n\n* A\n* B\n\n段落。<kbd><kbd>Ctrl</kbd>+<kbd>A</kbd></kbd>\n\n```js\nvar X = 100;\nfor (int i=0; i<10; i++) {\n    console.log(i);\n}\n```\n\n* [highlight.js]\n* [marked]\n* [ace]\n\n[highlight.js]: https://highlightjs.org/\n[marked]: https://github.com/markedjs/marked\n[ace]: https://ace.c9.io/"
            editor.setValue(md, -1);
            /*
            $.ajax({
                url: "./default.md"
            }).done(function (response, textStatus, jqXHR) {
                alert("set ./default.md");
                editor.setValue(response, -1);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert("set default Markdown.");
                md = "# Markdown ビューア😃\n## h2\n### h3\n#### h4\n##### h5\n###### h6\n\n* A\n* B\n\n段落。<kbd><kbd>Ctrl</kbd>+<kbd>A</kbd></kbd>\n\n```js:index.js\nvar X = 100;\nfor (int i=0; i<10; i++) {\n    console.log(i);\n}\n```\n\n* [highlight.js]\n* [marked]\n* [ace]\n\n[highlight.js]: https://highlightjs.org/\n[marked]: https://github.com/markedjs/marked\n[ace]: https://ace.c9.io/"
                editor.setValue(md, -1);
            }).always(function (data_or_jqXHR, textStatus, jqXHR_or_errorThrown) {});
            */
        }
    </script>
</head>
<body>
    <div id="Editor" style="width:100%; height:100%;"></div>
</body>
</html>

所感

　結局JSでWebアプリを作成するしかない。C#で書きたい。