できた。が、C#とJSが連動できないため、入力したテキストを取得できない……。
成果物
対象環境
- Raspbierry pi 3 Model B+
- Raspbian stretch(9.0) 2018-06-27
- Mono 5.16.0
- MonoDevelop 7.6 build 711
- Eto.Forms 2.4.1 拡張機能, NuGetパッケージ
- .NET Core 2.2, MonoDevelop参照方法
参考
- https://ace.c9.io/build/kitchen-sink.html
- https://github.com/ajaxorg/ace
- https://cdnjs.com/libraries/ace/1.3.3
手順
ソースコード
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#で書きたい。