getting text in ace editor in webview2

Harry Potter 21

i was using ace editor in web browser but i had so many problems with it so i switched to webview2 User's image

i want to save the the text that above by using a button (savefiledialog) is theres any way to do that i was using that code below to save the code in local file and this is the js im using im still new go easy on me

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
    
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/javascript");
</script>
<script>

 function getValue() {
            return editor.getValue();
        }

        function setValue(value) {
            editor.setValue(value);
        }
</script>
</body>
</html>

  SaveFileDialog dialog = new SaveFileDialog();
            dialog.Filter = "Txt Files (*.txt)|*.txt|Lua Files (*.lua)|*.lua|All Files (*.*)|*.*";

            if (dialog.ShowDialog() == true)
            {
                string content = editor.InvokeScript("getValue").ToString();
                File.WriteAllText(dialog.FileName, content);
            }

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Minxin Yu 11,026 Microsoft Vendor

What type of editor in your c# snippet and what c# project are you using?
Will snippet below work?

        private async void button1_Click(object sender, EventArgs e)
        {

            string result = await webView.CoreWebView2.ExecuteScriptAsync("foo();");
            MessageBox.Show(result);

        }

Harry Potter 21 Reputation points

2023-04-10T16:58:52.8166667+00:00

im using wpf project and i tried ur snippet it said null
Hui Liu-MSFT 47,341 Reputation points Microsoft Vendor

2023-04-12T08:43:00.08+00:00

Hi,@ Harry Potter. How do you add ACE editor to WebView2? What are the steps? And what is the definition of editor in your code?
Harry Potter 21 Reputation points

2023-04-12T10:29:01.79+00:00

in order to add ACE editor to WebView2 you have to make index.html and add ace.js they can be found in their repository and of course you can add more javascript files if you want to change theme language mode etc. definition of editor is web browser. index.html = https://github.com/ajaxorg/ace-builds/blob/master/editor.html ace.js = https://github.com/ajaxorg/ace-builds/tree/master/src-noconflicti cant add direct link as it wont let me do that all you gotta do find ace.js and copy all code and paste it into ur ace.js file
Hui Liu-MSFT 47,341 Reputation points Microsoft Vendor

2023-04-13T03:09:25.5466667+00:00

Hi,@ Harry Potter. I didn't reproduce your question. Could you show your complete code that reproduce the problem to analyze?

Harry Potter 21

heres the problem when i save file the text i wrote inside ace editor if i try to save file it doesnt save properly like if i add spaces into ace editor its gonna look like this "\r\n" i dont know why and is there any way to fix it?


public static async Task<string> ExecuteScriptFunctionAsync(this WebView2 webView2, string functionName, params object[] parameters)
        {


            string script = functionName + "(";
            for (int i = 0; i < parameters.Length; i++)
            {
                script += JsonConvert.SerializeObject(parameters[i]);
                if (i < parameters.Length - 1)
                {
                    script += ",";
                }
            }
            script += ");";
            return await webView2.ExecuteScriptAsync(script);
        }

	GetText = function () {

				return editor.getValue();

			}

			SetText = function (x) {

				editor.setValue(x);

			}




     SaveFileDialog dialog = new SaveFileDialog();
            dialog.Filter = "Txt Files (*.txt)|*.txt|Lua Files (*.lua)|*.lua|All Files (*.*)|*.*";

            if (dialog.ShowDialog() == true)
            {
                string content = await editor.ExecuteScriptFunctionAsync("GetText");
                File.WriteAllText(dialog.FileName, content);
            }

Hui Liu-MSFT 47,341 Reputation points Microsoft Vendor

2023-04-14T03:03:23.8933333+00:00

Hi,@ Harry Potter. Which class is your method ExecuteScriptFunctionAsync in? Could you show the code of your editor?

await editor.ExecuteScriptFunctionAsync("GetText");
Harry Potter 21 Reputation points

2023-04-14T08:26:23.4566667+00:00

ExecuteScriptFunctionAsync is in class i called Extensions i already showed the code up
Hui Liu-MSFT 47,341 Reputation points Microsoft Vendor

2023-04-19T06:11:01.66+00:00

Hi,@ Harry Potter. ExecuteScriptFunctionAsync is in which extension you called?

4 answers

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Share via

getting text in ace editor in webview2

4 answers