BeetleX.WebFamily之Markdown编辑器

组件的新版集成一款Markdown编辑器ToastUIEditor，通过它可以快速地构建编写Markdown文本内容功能。集成后的ToastUIEditor支持图表，表格，文件管理插入等功能。

新建一个控制台项目，通过Nuget引用组件后编写以下代码

class Program
{static void Main(string[] args){WebHost host = new WebHost();WebHost.Title = "Beetlex WebFamily";WebHost.HomeModel = "webfamily-md";WebHost.HomeName = "Markdown";WebHost.Login = false;host.RegisterComponent<Program>();host.UseToastUIEditor();host.Setting(o =>{o.SetDebug();o.Port = 80;o.LogLevel = EventArgs.LogType.Info;o.LogToConsole = true;}).UseElement(PageStyle.Element).Initialize((http, vue, resoure) =>{resoure.AddCss("website.css");vue.Debug();}).Run();}}

把主页面的Tab设置成webfamily-md并调用WebHost.UseToastUIEditor（）来载入编辑器内容即可。启动程序后在浏览器访问即可以编辑Markdown内容

在实际应用中可以使用webfamily-md和webfamily-mdview两个控件，分别是编辑和预览。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>Beetlex WebFamily</title><link href="/css/beetlex-v1.css" rel="stylesheet" /><script src="/js/beetlex-v1.js"></script>
</head>
<body><div id="app"><webfamily-md v-model="content" height="600px"></webfamily-md><el-divider content-position="left">Viewer</el-divider><webfamily-mdview :value="content" ></webfamily-mdview></div><script>var page = {}Vue.prototype.$getID = function () {page.controlid = page.controlid + 1;return page.controlid;};page = new Vue({el: '#app',data: {content: '',controlid: 1},methods: {}});
</script>
</body>
</html>