fzyEditor编辑器是什么?

fzyEditor编辑器是一款简约版Markdown编辑器,它支持所有Markdown编辑器的所有语法,且内置了更多丰富的菜单功能,是文章写作的方便助手

fzyEditor编辑器能干什么?

• 它能快速编辑文案资讯等内容.
• 它能便捷的在文本中插入各种图片/视频/链接/轮播/列表/表格/代码/表情/字符等丰富的内容,不需要记住Markdown的输入语法,都有可视化菜单进行加入.
• 它能解析出你需要的html内容或者提取出编辑器的原内容.
• 它提供了快捷菜单.
• 它提供了自定义快捷菜单等丰富的功能

fzyEditor有什么优/缺点

核心部件

• Layui框架 直达

• ManacoEditor 直达

  可扩展性

  扩展性很强，你完全可以扩展出流程图、目录等功能，还能自定义很多自己需要的功能，它还支持成为代码编辑器，只要你敢想，它就能实现。
  //比如我自己扩展了某音的视频解析功能(当然要结合后端语言,本站不提供接口,若有需要,可邮箱联系我(83560309@qq.com))

  部分功能编辑预览

  详见文章

外观

仓库地址(github老是访问不了,没传)

https://gitee.com/Fengzhiya123/fzyEditor

快捷键对应

自定义快捷键

在配置中配置如下代码

keyMap:{
    'Ctrl-1':h1, //如果是小键盘的数字，需要设置为N1,h1为菜单名称
    // *如果是小键盘数字，未必能覆盖浏览器默认的数字快捷键*
    ...
}

自定义菜单

  tools:[
    'alert', //这里也需要配置你自定义的菜单,全部名称要对应哦
    //....
  ],
  //同名会覆盖已有的工具栏
  // editor-event="alert" 此句必须
  autoTool:{
      alert:`<div class="-fzy-tool-item" title="弹出" editor-event="alert"><i class="layui-icon layui-icon-error"></i></div>`,
  },
  //同名会覆盖已有的工具栏方法
  autoToolbarHandles: {
      alert:function (othis){
          const selection = editor.Ed.getSelection();//获取光标/选中区域
          // let selectedText = editor.getSelectionText(selection);//获取选中内容
          editor.replaceSelection(selection,`\n{abc aaa="123"/}`);//将内容插入到指定光标位置
      }
  },
  //自定义解析
  autoParser:function (str){
      if(str.indexOf('{abc')!==-1){
          str = str.replace(/{abc aaa="([\s\S]*?)"\/}/g,'<div>$1</div>'); //显示123
      }
      return str; //此句必须
  },
  //注意:tools里面必须要配置自定义的菜单名称,图标上必须要带事件editor-event=菜单名,自定义菜单方法也必须以菜单名为准;解析的时候主要是自定义

参数

API

//简单使用
const editor = fzyEditor.render('editor',{
    theme:'dark',
});

createDialog 参数

预览

<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<link rel="stylesheet" href="css/preview.css" media="all" />
<div id="editor"><!--可以默认markdown内容--></div>
<script>
layui.use('fzyEditor', function () {
    var fzyEditor = layui.fzyEditor;    
    const editor = fzyEditor.render('editor',{
    theme:'dark',
    enabled:true,
    //tools:['alert'],
    //autoTool:{
    /*    alert:`<div class="-fzy-tool-item" title="弹出" editor-event="alert"><i class="layui-icon layui-icon-error"></i></div>`,
    },*/
    //同名会覆盖已有的工具栏方法
    /*autoToolbarHandles: {
        alert:function (othis){
            const selection = editor.Ed.getSelection();//获取光标/选中区域
            // let selectedText = editor.getSelectionText(selection);//获取选中内容
            editor.replaceSelection(selection,`\n{abc aaa="123"/}`);
        }
    },*/
    //自定义解析
    /*autoParser:function (str){
        if(str.indexOf('{abc')!==-1){
            str = str.replace(/{abc aaa="([\s\S]*?)"\/}/g,'<div>$1</div>');
        }
        return str; //此句必须
    },*/
    //uploadFile:{
    //    url:'/data/uploadFile.json',
    //    data:{}
    //},
    //uploadImage: {
    //    url:'/data/uploadFile.json',
    //    data:{}
    //},
    // uploadAudio:{
    //     url:'/data/uploadFile.json',
    //     data:{}
    // },
    //player: 'https://www.fengzhiya.cn/player/index.html?url=',
    });
    console.log(editor);
});    
</script>

php解析参考 去查看