BeetleX.WebFamily之Markdown编辑器
生活随笔
收集整理的這篇文章主要介紹了
BeetleX.WebFamily之Markdown编辑器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
????????組件的新版集成一款Markdown編輯器ToastUIEditor，通過它可以快速地構(gòu)建編寫Markdown文本內(nèi)容功能。集成后的ToastUIEditor支持圖表，表格，文件管理插入等功能。
? ? ? ? 新建一個(gè)控制臺項(xiàng)目，通過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設(shè)置成webfamily-md并調(diào)用WebHost.UseToastUIEditor（）來載入編輯器內(nèi)容即可。啟動(dòng)程序后在瀏覽器訪問即可以編輯Markdown內(nèi)容
在實(shí)際應(yīng)用中可以使用webfamily-md和webfamily-mdview兩個(gè)控件，分別是編輯和預(yù)覽。
<!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>完整示例可查看
https://github.com/beetlex-io/BeetleX-Samples/tree/master/BeetleX.Samples.WebFamily.MarkdownEditor
BeetleX開源跨平臺通訊框架(支持TLS)
提供高性能服務(wù)和大數(shù)據(jù)處理解決方案
https://beetlex.io
總結(jié)
以上是生活随笔為你收集整理的BeetleX.WebFamily之Markdown编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单元测试(二)基本使用争议篇
- 下一篇： BeetleX.WebFamily之El