cefSharpでWYSIWYGのHTMLエディタ

Windows FormにChromiumベースのコントロールを組み込むことができましたので、ローカルファイルの読込を行ってみます。

ただ、表示して終わりでは面白くないので、オープンソースのHTMLエディタであるTinyMCEを表示してみます。

TinyMCEの本体のjavascriptは、CDNで提供されているものを使用しています。

1. 表示するためのローカルファイル、日本語ローカライズファイルの用意

ローカライズファイル

　TinyMCE本家から日本語ローカライズファイルをダウンロードします。

表示用HTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>tinyMCE WYSIWYG Editor</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.12/tinymce.min.js"></script>

    <!-- Script functions to expose tinyMCE internals that get called from code using InvokeScript method. -->
    <script type="text/javascript">
        function GetContent() {
            return tinyMCE.get('tinyMceEditor').getContent();
        }

        function SetContent(htmlContent) {
            tinyMCE.get('tinyMceEditor').setContent(htmlContent);
        }
    </script>

    <!-- Taken from the tinyMCE examples found on http://tinymce.moxiecode.com/examples/full.php -->
    <!-- TinyMCE -->
    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea',
            height: 400,
            plugins: [
                'advlist autolink lists link image charmap print preview hr anchor pagebreak',
                'searchreplace visualblocks visualchars code fullscreen',
                'insertdatetime media nonbreaking save table directionality',
                'emoticons paste'
            ],
            toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | fontsizeselect | forecolor backcolor emoticons | code' ,
            image_advtab: true,
            paste_data_images: true,
            relative_urls: false,
            convert_urls: false,
            language: 'ja',
            language_url: 'langs/ja.js',
            fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
            setup: function (ed) {
                ed.on('init', function () {
                    this.getDoc().body.style.fontSize = '14px';
                });
            },
            extended_valid_elements: 'script[language|type|src],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder]'
        });
    </script>
    <!-- /TinyMCE -->
</head>
<body>
    <form method="post">
        <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
        <textarea name="tinyMceEditor" style="width:100%; height: 100%;"></textarea>
    </form>
</body>
</html>

2. プロジェクトへ上記ファイルを追加

　これらの2つのファイルをプロジェクトへ追加します。

  1. プロジェクト内へTinyMceフォルダを作成
  2. 表示用HTMLファイルをtinymce.htmlで追加
  3. 日本語ローカライズファイルをlangsフォルダを作成し、ja.jsとして追加

f:id:kz1114inazuma:20190724084044p:plain
ソリューションエクスプローラー

3. Form1へ表示

ローカルファイルを読み込み、ブラウザへ渡します。javascriptのエラーなどの確認のため、Devツールも開きます。

    public partial class Form1 : Form
    {
        private ChromiumWebBrowser _chromeBrowser;

        public Form1()
        {
            InitializeComponent();
            InitializeChromium();
        }

        public void InitializeChromium()
        {
            String page = string.Format(@"{0}\TinyMce\tinymce.html", Application.StartupPath);
            _chromeBrowser = new ChromiumWebBrowser(page);
            this.Controls.Add(_chromeBrowser);
            _chromeBrowser.Dock = DockStyle.Fill;

           // イベントハンドラを追加
            _chromeBrowser.IsBrowserInitializedChanged += OnIsBrowserInitializedChanged;
        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            Cef.Shutdown();
        }

        private void OnIsBrowserInitializedChanged(object sender, IsBrowserInitializedChangedEventArgs e)
        {
            if (e.IsBrowserInitialized)
            {
                _chromeBrowser.ShowDevTools();
            }
        }
  }

4. 表示の確認

　デバッグモードで開始し、表示を確認します。

f:id:kz1114inazuma:20190724084745p:plain
TinyMCEを表示