读者福利
由于篇幅过长，就不展示所有面试题了，感兴趣的小伙伴
更多笔记分享
javafx-graphics
11.0.2
org.openjfx
javafx-controls
11.0.2
布局和实现
=====
布局的实现比较简单：
最终的H5文本渲染在WebView组件中（JFXPanel是JavaFx => Swing的适配器，WebView是JavaFx的组件，但是这里使用的外层容器都是Swing组件），具体的编码实现如下：
public class MarkdownEditor {
private static final int W = 1200;
private static final int H = 1000;
private static final String TITLE = “markdown editor”;
public static String CONTENT = “\n” +
“<html lang=“en”>\n” +
“\n” +
" <meta charset=“UTF-8”/>\n" +
" <meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>\n" +
"
" <link rel=“stylesheet” href=“https://unpkg.com/bytemd/dist/index.min.css”/>\n" +
" <link rel=“stylesheet” href=“https://unpkg.com/github-markdown-css”/>\n" +
" <script src=“https://unpkg.com/bytemd”>\n" +
" <script src=“https://unpkg.com/@bytemd/plugin-gfm”>\n" +
" <script src=“https://unpkg.com/@bytemd/plugin-highlight”>\n" +
"
" .bytemd {\n" +
" height: calc(100vh - 50px);\n" +
" }\n" +
“\n” +
" .footer {\n" +
" width: 100%;\n" +
" height: 30px;\n" +
" left: 0;\n" +
" position: absolute;\n" +
" bottom: 0;\n" +
" text-align: center;\n" +
" }\n" +
" \n" +
“\n” +
“\n” +
“<div class=“footer”>\n” +
" <a href=“https://github.com/bytedance/bytemd”>bytemd\n" +
“\n” +
“
" const plugins = [bytemdPluginGfm(), bytemdPluginHighlight()];\n" +
" const editor = new bytemd.Editor({\n" +
" target: document.body,\n" +
" props: {\n" +
" value: ‘# heading\n\nparagraph\n\n> blockquote’,\n" +
" plugins,\n" +
" },\n" +
" });\n" +
" editor.$on(‘change’, (e) => {\n" +
" editor.$set({value: e.detail.value});\n" +
" });\n" +
“\n” +
“\n” +
“”;
static {
// 初始化主题
try {
UIManager.setLookAndFeel(FlatIntelliJLaf.class.getName());
} catch (Exception e) {
throw new IllegalStateException(“theme init error”, e);
}
}
private static JFrame buildFrame(int w, int h, LayoutManager layoutManager) {
JFrame frame = new JFrame();
frame.setLayout(layoutManager);
frame.setTitle(TITLE);
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.setSize(w, h);
Toolkit toolkit = Toolkit.getDefaultToolkit();
int x = (int) (toolkit.getScreenSize().getWidth() - frame.getWidth()) / 2;
int y = (int) (toolkit.getScreenSize().getHeight() - frame.getHeight()) / 2;
frame.setLocation(x, y);
return frame;
}
private static void initAndDisplay() {
// 构建窗体
JFrame frame = buildFrame(W, H, new BorderLayout());
JFXPanel panel = new JFXPanel();
Platform.runLater(() -> {
panel.setSize(W, H);
initWebView(panel, CONTENT);
frame.getContentPane().add(panel);
});
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(MarkdownEditor::initAndDisplay);
}
private static void initWebView(JFXPanel fxPanel, String content) {
StackPane root = new StackPane();
Scene scene = new Scene(root);
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.setJavaScriptEnabled(true);
webEngine.loadContent(content);
root.getChildren().add(webView);
fxPanel.setScene(scene);
}
}
H5文本来源于bytemd的原生JS实现例子：
最近我根据上述的技术体系图搜集了几十套腾讯、头条、阿里、美团等公司21年的面试题，把技术点整理成了视频（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分
图片的形式给大家展示一部分
[外链图片转存中…(img-j1qXwqQo-1715666394471)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
