# fzyEditor

**Repository Path**: lpwm/fzyEditor

## Basic Information

- **Project Name**: fzyEditor
- **Description**: - 由于市面上很多的md编辑器在html中引用并不方便，也不便于扩展.
- 又由于Layui本身并没有提供完善的编辑器，也方便在Layui中调用，Layui的三方扩展md编辑器也比较少且不完善.
- 市面上有的md编辑器在扩展上对很多开发者并不友好，我们希望每个开发者拿来即用.
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2025-04-05
- **Last Updated**: 2025-04-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fzyEditor

#### 介绍
- 由于市面上很多的md编辑器在html中引用并不方便，也不便于扩展.
- 又由于Layui本身并没有提供完善的编辑器，也方便在Layui中调用，Layui的三方扩展md编辑器也比较少且不完善.
- 市面上有的md编辑器在扩展上对很多开发者并不友好，我们希望每个开发者拿来即用.

![输入图片说明](f6a7b4f93cca97e77069aae8baf5685.png)
#### 软件架构
基于国产前端框架Layui+monaco-editor编辑器底层代码进行,完全遵循monaco-editor开发接口和模式,需要具体修改和完善的,自行学习monaco-editor相关的接口和调用

#### 使用说明

1. 下载本仓库代码
2. 按照layui引用规范进行引用即可
3. 演示代码在index.html中
4. 本仓库代码只适用Layui框架模式,若需单独拎出来使用,请自行修改源码,代码不复杂,很简单
5. CSS不是本人强项,可自行美化css代码

#### 基础用法
需要在服务环境测试,不可直接文件访问
1. 单独引用预览css
```html
<link rel="stylesheet" href="css/preview.css" media="all" />
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
```
2. js引用

```js
layui.use('fzyEditor', function () {
        var fzyEditor = layui.fzyEditor;

        const editor = fzyEditor.render('editor',{
            theme:'light',
            enabled:true,
            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=',//该地址不一定能行,自行配置一个能播放mp4/m3u8的dplayer播放器
        });
    });
```
3. 菜单扩展(貌似已经废弃,新的参照博客的文档,待更新)

```
<div id="demo1"></div>
<script>
layui.use('fzyEditor',function(){
    const fzyEditor = layui.fzyEditor;
    const editor = fzyEditor.render('demo1',{
        height:200,
        tools:['undo','redo','abc',//自定义abc工具
            '|',
            'bold', 'italic', 'underline', 'del','indent',
            '|',
            'h1', 'h2', 'h3', 'h4', 'h5', 'h6','ucfirst','uppercase','lowercase',
            '|',
            'hr','codeBlock','link','face','img','quote','orderedList', 'unorderedList',
            '|',
            'clear','help','about'],
        //同名会覆盖已有的工具栏（如果没有自定义同名事件，会按照已有事件执行，只是换了个图标）
        autoTool:{
            abc:`<div class="-fzy-tool-item" title="弹出" editor-event="abc"><i class="layui-icon layui-icon-error"></i></div>`,
        },
        //自定义工具事件
        //同名会覆盖已有的工具栏方法
        autoToolbarHandles: {
            abc:function (othis){
                //othis可选，返回当前工具dom
                //editor.cm 是内置CodeMirror的所有方法和接口的返回，可以供自定义使用
                editor.cm.replaceSelection(`{abc aaa="123"/}`);
            }
        },
        //自定义事件解析
        autoParser:function (str){
            if(str.indexOf('{abc')!==-1){
                str = str.replace(/{abc aaa="([\s\S]*?)"\/}/g,'<div>$1</div>');
            }
            return str; //不管是否有自定义内容，请必须返回，否则预览将不会显示
        },
    });
 
});
//注意：一定要按照格式自定义，否则会出错，editor-event="abc" 非常重要，涉及到事件名，否则不会被执行
</script>
```
4. 详细配置教程参照 [直达](https://www.fengzhiya.cn/a/18.html) [解析结果预览地址](https://www.fengzhiya.cn/a/1.html)