其他分享
首页 > 其他分享> > markdown

markdown

作者:互联网

angular2 集成 Editor.mdhttps://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 jquery


ng g d editor/editor-md --spec false
ng g class  editor/model/editor-config --spec false

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

<div id="md" (onEditorChange)="syncModel($event)">
  <textarea style="display: block;" [(ngModel)]="markdown"></textarea>
</div>

<button nz-button (click)="getValue();">获取md文件内容</button>
<button nz-button (click)="preview();">预览</button>
<hr>
<h2>Markdown内容:</h2>
<span>{{markdown}}</span>
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

其他的markdown插件:

ngx-markdown
ngx-markdown-editor

标签:md,markdown,lib,js,editormd,editor
来源: https://blog.csdn.net/weixin_42995876/article/details/97813659