angular|markdown angular|markdown

angular2 集成 Editor.md：https://blog.csdn.net/qq_16566415/article/details/73741247

"./node_modules/jquery/dist/jquery.min.js", "src/assets/editormd/editormd.js", "src/assets/editormd/lib/marked.min.js", "src/assets/editormd/lib/prettify.min.js", "src/assets/editormd/lib/raphael.min.js", "src/assets/editormd/lib/underscore.min.js", "src/assets/editormd/lib/sequence-diagram.min.js", "src/assets/editormd/lib/flowchart.min.js", "src/assets/editormd/lib/jquery.flowchart.min.js"

问题：
沙盒限制，并没法测试是否ok，需要自己测试一下。
项目中使用Editor.md 中的坑：https://blog.csdn.net/Hello_kong/article/details/87369112
Angular集成Editor.md的Markdown编辑器，支持NgModel双向绑定：
https://blog.csdn.net/lxpume/article/details/78967345
其中的例子：https://gitee.com/imlxp/ngx-editor.md-markdown
可以实现，但是没实现预览的效果；且很多参数并没有搞明白。
案例的执行代码：
需要的目录：

css，fonts，images，lib，plugins，editormd.js和min.js，

npm install jqueryng g d editor/editor-md --spec false ng g classeditor/model/editor-config --spec false

自己修改一下为简单容易理解的：

Markdown内容: {{markdown}}

conf = new EditorConfig(); markdown = '测试语句ksbk'; editor:any; ngOnInit(){ console.log("editormd:",editormd); console.log("this.editor:",this.editor); this.markdown=sessionStorage.getItem("ksItem")||'没有数据'; this.editor = editormd('md', this.conf); // 创建编辑器 // 返回为undefined，在单独的函数里，那么就是可以取到的。 let that=this; // change事件 this.editor.on("change",function(){ console.log("change事件"); console.log($('#md' +' :first').val()); that.markdown=$('#md' +' :first').val(); // 有个空格。 }) // editormd.markdownToHTML('md', this.conf); // 这个我没学会用。 }// mdchange后，执行的事件，同步属性内容 syncModel(str): void { this.markdown = str; }// 获取值，提交给后端，目前模拟存在session里面 getValue(value){ console.log("获取的内容：",this.markdown); console.log("获取的内容：",typeof this.markdown); sessionStorage.setItem("ksItem",this.markdown); }// 预览 preview(){ console.log(this.editor); // 有点异步，直接在OnInit里面不行的。 this.editor.previewing(); }

注：ngAfterViewInit中去获取 this.editor，能获取到，但是执行： this.editor.previewing(); 报错。所以只能在函数里写。

参数：

conf = { width: "90%", height: 440, placeholder:'本编辑器支持Markdown编辑，左边编写，右边预览',//默认显示的文字 path: 'assets/editor.md/lib/', theme: "dark",//工具栏主题 editorTheme: "pastel-on-dark",//编辑主题 previewTheme: "dark",//预览主题 toolbarIcons : function() {//自定义工具栏，后面有详细介绍 return ["undo", "redo", "|", "bold", "hr",'table']; // full, simple, mini }, };

配置工具栏：
参考：https://www.jianshu.com/p/a1f37bcbdf9f

toolbarIcons : function() {//自定义工具栏，后面有详细介绍 return editormd.toolbarModes['simple']; // full, simple, mini },// 自定义： toolbarIcons : function() { // Or return editormd.toolbarModes[name]; // full, simple, mini // Using "||" set icons align right. return ["undo", "redo", "|", "bold", "hr"] },

editor.md 常用参数配置和使用方法：https://cloud.tencent.com/developer/article/1417170
直接想预览：

previewing方法，然后让“X”隐藏。
使用文档上的方法
http://editor.md.ipandao.com/examples/index.html 中：非编辑时Markdown转HTML的显示处理，地址：
http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html
只读模式
http://editor.md.ipandao.com/examples/index.html 中：自读模式。

其他的markdown插件：

ngx-markdown ngx-markdown-editor

ngx-markdown：
https://blog.csdn.net/weixin_34061555/article/details/90890802
angular-cli详解：
https://www.jianshu.com/p/00e14635dd48
【angular|markdown】或者直接参考：写的很详细！
https://cloud.tencent.com/developer/article/1342750