yafelement集成markdown编辑器(editor.md)

bloger 2021-01-22 PM 1686℃ 3条

yafelement在这个版本markdown编辑器(editor.md)组件化了,只要在模型中设置字段类型未editor该模块将自动加载markdown编辑器;看一下效果:该编辑器支持很强大的功能、比如公式、流程图、目录生成等等:
Dingtalk_20210122163457.jpg

说到这里,我知道你并不知道yaflement是什么东西,这个一个我自己用yaf改写的一个简易框架。

因为经常做项目,经常需要做后台,而且项目的定制化比较高,很难直接用cms实现,并且cms的东西比较多,我们用不到,二次开发也比较费事,之前也使用tp5、tp3、yii等框架开发过一些后台但是总感觉不是很完美、东西比较多,用起来虽然简单但是还是不够简洁、因此yafelement就诞生了,主要是快速生成一个高定制化的项目后台、和项目解耦,能够胜任一些大型的项目开发;

yafelement采用 yaf + element ui + vue 实现,其中后台功能有:

设置模型字段,自动生成表单、表格、渲染视图、表单验证等(增删改查操作),简而言之,项目中一个模块只需要设置模型,增删改查将自动生成,支持自定义和重写,总之如果你要搭建一个后台管理系统,那么它将是你不错得选择;

  • 图标功能、柱形图、折线图
  • 支持本地上传、oss上传,只要开启上传将会自动上传到oss
  • markdown支持
  • 网站配置
  • 菜单设置(支持无限极菜单,自动渲染,后台只需要添加即可)
  • 管理员设置

如何使用yafelement快速成一个模块的增删改查?

比如我们要建立一个资讯管理模块,我们快速实现一个模块的curd操作

下面演示一波:

  • 建一个空的控制器、用于路由:controllers 下建立文件:article.php

class ArticleController extends ViewController
{

}
  • 设置模型,models下建立文件article.php
<?php
/**
 * User: tangyijun
 * Date: 2019-12-25
 * Time: 14:03
 */
class ArticleModel extends AbstractModel
{
    public $table = 'yaf_article';

    /**
     * @var array
     * 模型字段
     */
    public $fields = [
        [
            'type' => 'text',
            'value' => '',
            'title' => '文章名称',
            'key' => 'title',
        ],
        [
            'type' => 'select',
            'value' => "1",
            'title' => '选择栏目',
            'key' => 'typeid',
            'show' => [],
            'prop' => [
                'callback' => ['ChannelModel', 'getInstance'], //设置回调函数,加载栏目分类
                'function' => 'getChannel',
            ],
            'alias' => [
                'callback' => ['ChannelModel', 'getInstance'],
                'function' => 'getChannel',
            ],
        ],
        [
            'type' => 'radio',
            'value' => "0",
            'title' => '是否推荐',
            'key' => 'is_hot',
            'show' => [],
            'prop' => [
                'callback' => ['ArticleModel', 'getInstance'], //设置回调函数,加载选项
                'function' => 'getRadio', 
            ],
            'alias' => [
                'callback' => ['ArticleModel', 'getInstance'], //设置回调函数,用于表格渲染
                'function' => 'getRadio',
            ],
        ],

        [
            'type' => 'text',
            'value' => '',
            'title' => '文章描述',
            'key' => 'desc',
            'show' => [],
            'isTable' => true
        ],
        [
            'type' => 'upload',
            'value' => '',
            'title' => '文章logo',
            'key' => 'logo',
            'width' => 60,
        ],
        [
            'type' => 'text',
            'value' => '在线AI工具',
            'title' => '作者',
            'key' => 'auther',
        ],
        [
            'type' => 'text',
            'value' => '',
            'title' => '点击量',
            'key' => 'click_num',
        ],
        [
            'type' => 'text',
            'value' => '',
            'title' => '文章来源',
            'key' => 'source',
        ],
        [
            'type' => 'editor',
            'value' => '',
            'title' => '文章详情',
            'key' => 'content',
            'isTable' => true
        ],
    ];

    /**
     * @var array
     * 字段验证
     */
    public $validate = [
        'rules' => [
            'name' => [
                ["required" => true, "message" => '请输入名称', "trigger" => 'blur']
            ],
        ]
    ];


    public $search = ['name'];

    public $reload = true;//是否重载页面

    /*
     * 是否开启markdown,并且字段赋值
     */
    public $extra = ['markdown' => true,"editors"=>'','markdown_eval' => 'vm.form.content =  vm.editors.getMarkdown()'];

    public function getRadio($params = []): string
    {
        return json_encode([
            [
                'id' => "1",
                'name' => '是'
            ],
            [
                'id' => "0",
                'name' => '否'
            ]
        ], JSON_UNESCAPED_UNICODE);
    }
}
  • mysql 建立一张article表

CREATE TABLE `yaf_article` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL COMMENT '新闻标题',
  `desc` varchar(255) NOT NULL DEFAULT '' COMMENT '新闻描述',
  `typeid` tinyint(4) NOT NULL DEFAULT '0' COMMENT '分类id',
  `content` text COMMENT '文章内容',
  `is_hot` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否热门,0否,1是',
  `logo` varchar(255) NOT NULL DEFAULT '' COMMENT '文章logo',
  `auther` varchar(255) NOT NULL COMMENT '作者',
  `click_num` int(11) NOT NULL DEFAULT '0' COMMENT '浏览量',
  `is_hot` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否热门',
  `source` varchar(255) NOT NULL DEFAULT '' COMMENT '文章来源',
  `create_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
  • 好了一个模块的curd操作已经完成,我们来预览一下;

输入:> http://yourdomain.com/article/

列表页:
333.jpg

添加页:
444.jpg

一个高定制的模块就自动生成了;

如果你也想拥有一个高可用的项目框架那么yafelement就是你不错的选择,主要是简洁、性能优越;

你可以在下面地址中获取该项目,免费分享给大家,如果有用请点一个star!

https://www.phpbloger.com/coding/

在项目中已经封装了一下常用的类供大家使用:

  • pdo
  • file
  • api
  • http curl
  • session
  • log(日志处理)
  • server
  • 腾讯oss
  • redis
  • apcu
  • common

安装等已经写在gittree 、github 上,安装该项目请使用php7+;

标签: yaf, yaelemnt

非特殊说明,本博所有文章均为博主原创。

评论啦~



已有 3 条评论


  1. f
    f

    ceshi

    回复 2021-07-27 23:49
  2. f
    f

    111

    回复 2021-07-27 23:45
  3. 站元素主机
    站元素主机

    学习了 赞一个

    回复 2021-01-27 14:22