将 ACE 与 WT 一起使用

Question

更新 3 下面的最终工作代码。您需要 src 文件夹中的 ace.js！它不适用于库，您需要他们网站上的预打包版本。

WText *editor = new WText(root());
editor->setText("function(){\n hello.abc();\n}\n");
editor->setInline(false);

以上代码可以设置ACE窗口的内容。

MyClass::MyClass(const WEnvironment& env)
: WApplication(env)
{
wApp->require("ace-builds/src/ace.js");
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(root());
editor->resize(500, 500);

std::string editor_ref = editor->jsRef(); // is a text string that will be the element when executed in JS

std::string command = 
  editor_ref + ".editor = ace.edit(" + editor_ref + ");" +
  editor_ref + ".editor.setTheme(\"ace/theme/monokai\");" +
  editor_ref + ".editor.getSession().setMode(\"ace/mode/javascript\");";

editor->doJavaScript(command);


JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, &MyClass::textChanged);

WPushButton *b = new WPushButton("Save", root());

command = "function(object, event) {" +
  jsignal->createCall(editor_ref + ".editor.getValue()") +
  ";}";

b->clicked().connect(command);
}

void MyClass::textChanged(std::string incoming)
{

}

更新 2 这是我的项目看起来像 atm 的样子，仍然得到一个白色屏幕，右上角有来自 WT 的红色“正在加载...”消息。更多注释如下。

MyClass::MyClass(const WEnvironment& env)
: WApplication(env)
{
wApp->require("lib/ace/ace.js");
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(root());
editor->resize(500, 500);

std::string editor_ref = editor->jsRef(); // is a text string that will be the element when executed in JS

std::string command = 
  editor_ref + ".editor = ace.edit(" + editor_ref + ");" +
  editor_ref + ".editor.setTheme(\"ace/theme/monokai\");" +
  editor_ref + ".editor.getSession().setMode(\"ace/mode/javascript\");";

editor->doJavaScript(command);


JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, &MyClass::textChanged);

WPushButton *b = new WPushButton("Save", root());

command = "function(object, event) {" +
  jsignal->createCall(editor_ref + ".editor.getValue()") +
  ";}";

b->clicked().connect(command);
}

void MyClass::textChanged(std::string incoming)
{

}

“command”变量用于编辑器时等于下面的->doJavaScript(command)

"Wt3_3_0.$('oy4ycjy').editor = ace.edit(Wt3_3_0.$('oy4ycjy'));Wt3_3_0.$('oy4ycjy').editor.setTheme('ace/theme/monokai');Wt3_3_0.$('oy4ycjy').editor.getSession().setMode('ace/mode/javascript');"

“command”变量用于b->clicked().connect(command);时等于下面的；

"function(object, event) {Wt.emit('oy4ycjy','textChanged',Wt3_3_0.$('oy4ycjy').editor.getValue());;}"

更新 1

将建议的代码添加到我的构造函数中，但是页面不会从纯白屏幕更改。我在这个 WT 项目中什么也没做，只有这段代码在运行。

wApp->require("lib/ace/ace.js");
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(root());
std::string editor_ref = editor->jsRef(); // is a text string that will be the element when executed in JS
editor->doJavaScript(
  editor_ref + ".editor = ace.edit('" + editor_ref + "');" +
  editor_ref + ".editor.setTheme('ace/theme/monokai');" +
  editor_ref + ".editor.getSession().setMode('ace/mode/javascript');"
  );

editor_ref 的值是 "Wt3_3_0.$('oumvrgm')" 减去引号。

还尝试添加下面的代码，页面仍然空白。

JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, &MyClass::textChanged);

WPushButton *b = new WPushButton("Save", root());
b->clicked().connect("function(object, event) {" +
  jsignal->createCall(editor->jsRef() + ".editor.getValue()") +
  ";}");

我也发现注释掉了

editor_ref + ".editor = ace.edit('" + editor_ref + "');" +

使按钮显示出来，但屏幕右上角有一个红色的“正在加载...”说明，因此 WT 正在等待某些内容。

我目前将 textChanged 作为无操作功能。

原帖

所以，我的问题是这样的。如何在 WT http://www.webtoolkit.eu/wt 中获得 ACE http://ace.ajax.org/#nav=about。更具体地说，在 WT Wt::WTextArea 或 Wt::WTabWidget 中的 ACE，文本区域将是首选。这几天我一直在尝试这样做，但没有取得太大的成功。

我已经能够在 HTML 页面中嵌入 ACE 没有问题，因为他们的网站说“只需将其复制并粘贴到您的页面中”，这真的很简单。但是，我需要通过 WT 在本地将其加载到容器中。我将他们的存储库从 GIT 下载到我的机器上并尝试使用

require("lib/ace/ace.js");

和

doJavaScript(...);

各种命令都没有成功...我在 Java 和 HTML 方面的能力不如 C++，所以如果这涉及到大量 Java/HTML，我会要求尽可能多的细节。在此先感谢队友！

Answer 1

也许这会让你朝着正确的方向前进：

wApp->require("lib/ace/ace.js")
// A WContainerWidget is rendered as a div
WContainerWidget *editor = new WContainerWidget(parent);
// editor->jsRef() is a text string that will be the element when executed in JS
editor->doJavaScript(
    editor->jsRef() + ".editor = ace.edit(" + editor->jsRef() + ");" +
    editor->jsRef() + ".editor.setTheme('ace/theme/monokai');" +
    editor->jsRef() + ".editor.getSession().setMode('ace/mode/javascript');"
  );

那应该装饰编辑器。 Wt 不会自动将对 div 的修改发送到服务器，因此您可以通过 JSignal 手动执行此操作（从 JS 向 C++ 发出信号）：

JSignal <std::string> *jsignal = new JSignal<std::string>(editor, "textChanged");
jsignal->connect(this, MyClass::textChanged);

WPushButton *b = new WPushButton("Save", parent);
b->clicked().connect("function(object, event) {" +
    jsignal->createCall(editor->jsRef() + ".editor.getValue()") +
  ";}");

（以上代码未经测试，可能需要稍作调整）

我在早期的 JWt (java) 项目中集成了 CodeMirror，如下所示：

import eu.webtoolkit.jwt.WApplication;
import eu.webtoolkit.jwt.WContainerWidget;
import eu.webtoolkit.jwt.WTextArea;

public class CodeMirrorTextArea extends WContainerWidget {
        private WTextArea textArea;
        public CodeMirrorTextArea(WContainerWidget parent) {
                super(parent);

                textArea = new WTextArea(this);

                WApplication app = WApplication.getInstance();

                app.require(app.resolveRelativeUrl("codemirror-2.32/lib/codemirror.js"));
                app.require(app.resolveRelativeUrl("codemirror-2.32/mode/groovy/groovy.js"));

                //TODO:
                //We save the editor state to the text area on each key stroke,
                //it appears to be not a performance issue,
                //however it might very well become one when editing larger fragments of code.
                //A better solution would be to save this state to the text area only when
                //the form is submitted, currently this is not yet possible in Wt???.

                String js =
                        "var e = " + textArea.getJsRef() + ";" +
                        "var cm = CodeMirror.fromTextArea(e, {" +
                        "       onKeyEvent : function (editor, event) {" +
                    "           editor.save();" +
                    "   }," +
                        "       lineNumbers: true" +
                        "       });" +
                        "var self = " + getJsRef() + ";" +
                        "self.cm = cm;";

                this.doJavaScript(js);
        }

        public CodeMirrorTextArea() {
                this(null);
        }

        public void setText(String text) {
                textArea.setText(text);
        }

        public String getText() {
                return textArea.getText();
        }

        public void setMarker(int line, String htmlMarker) {
                String js =
                        "var self = " + getJsRef() + ";" +
                        "self.cm.setMarker(" + line + ", " + jsStringLiteral(htmlMarker +
"%N%") + ");";

                this.doJavaScript(js);
        }

        public void clearMarker(int line) {
                String js =
                        "var self = " + getJsRef() + ";" +
                        "self.cm.clearMarker(" + line + ");";

                this.doJavaScript(js);
        }
}