Froala编辑器

Froala编辑器是一款功能强大的富文本编辑器组件，支持图片上传、视频嵌入、代码高亮等丰富功能。

用法示例

<?php
use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;

// 创建表单
Builder::form(function (Form $builder) {
  // 基本Froala编辑器
  $builder->addRowEditorFroala('content', '文章内容', '', function ($component) {
    $component->placeholder('请输入文章内容');
  });
  
  // 自定义高度
  $builder->addRowEditorFroala('description', '详细描述', '', function ($component) {
    $component->options([
      'height' => 300,
    ]);
  });
  
  // 配置工具栏按钮
  $builder->addRowEditorFroala('news_content', '新闻内容', '', function ($component) {
    $component->options([
      'height' => 400,
      'toolbarButtons' => [
        'bold', 'italic', 'underline', '|',
        'fontFamily', 'fontSize', 'color', '|',
        'align', 'formatOL', 'formatUL', '|',
        'insertLink', 'insertImage', 'insertVideo', '|',
        'undo', 'redo'
      ]
    ]);
    $component->buttons([
      'bold', 'italic', 'underline', 'insertImage', 'insertLink'
    ]);
  });
  
  // 配置图片上传
  $builder->addRowEditorFroala('article', '文章', '', function ($component) {
    $component->receiver('/api/upload/image');
    $component->fileField('file');
    $component->options([
      'height' => 500,
      'imageUploadParam' => 'file',
      'imageMaxSize' => 5 * 1024 * 1024, // 5MB
      'imageAllowedTypes' => ['jpeg', 'jpg', 'png', 'gif']
    ]);
  });
  
  // 配置视频上传
  $builder->addRowEditorFroala('video_content', '视频内容', '', function ($component) {
    $component->videoReceiver('/api/upload/video');
    $component->options([
      'videoUploadParam' => 'file',
      'videoMaxSize' => 50 * 1024 * 1024, // 50MB
      'videoAllowedTypes' => ['mp4', 'webm', 'ogg']
    ]);
  });
  
  // 设置编辑器大小
  $builder->addRowEditorFroala('large_content', '内容', '', function ($component) {
    $component->size('lg'); // 可选：md, lg
    $component->options([
      'height' => 600,
    ]);
  });
  
  // 完整配置示例
  $builder->addRowEditorFroala('full_content', '完整内容', '', function ($component) {
    $component->vendor('froala');
    $component->receiver('/api/upload/image');
    $component->videoReceiver('/api/upload/video');
    $component->fileField('file');
    $component->size('lg');
    $component->placeholder('请输入内容');
    $component->options([
      'height' => 500,
      'language' => 'zh_cn',
      'charCounterCount' => true,
      'imageUploadParam' => 'file',
      'videoUploadParam' => 'file',
      'toolbarButtons' => [
        'bold', 'italic', 'underline', 'strikeThrough', '|',
        'fontFamily', 'fontSize', 'color', 'paragraphStyle', '|',
        'paragraphFormat', 'align', 'formatOL', 'formatUL', '|',
        'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|',
        'quote', 'insertHR', 'undo', 'redo', 'clearFormatting', '|',
        'selectAll', 'html', 'fullscreen'
      ]
    ]);
  });
});

组件参数

options常用配置

工具栏按钮

常用的工具栏按钮包括：

• 文本格式：bold, italic, underline, strikeThrough
• 字体：fontFamily, fontSize, color, backgroundColor
• 段落：paragraphFormat, paragraphStyle, align
• 列表：formatOL, formatUL, outdent, indent
• 插入：insertLink, insertImage, insertVideo, insertTable, insertHR
• 其他：quote, undo, redo, clearFormatting, selectAll, html, fullscreen

使用说明

1. 基本使用：通过 addRowEditorFroala() 方法添加Froala编辑器
2. 编辑器类型：自动设置 vendor('froala') 使用Froala编辑器
3. 高度设置：通过options中的height参数设置编辑器高度
4. 图片上传：使用 receiver() 设置图片上传API
5. 视频上传：使用 videoReceiver() 设置视频上传API，Froala编辑器特有功能
6. 工具栏配置：通过 buttons() 或 options中的toolbarButtons配置工具栏
7. 大小控制：使用 size() 方法设置编辑器整体大小（md或lg）
8. 语言设置：在options中设置language参数
9. 文件限制：可在options中配置文件大小和类型限制
10. 上传参数：使用 fileField() 设置上传时的文件字段名
11. 返回格式：服务端上传接口需返回标准格式，包含文件URL

适用场景：

• 新闻文章编辑
• 产品详情描述
• 博客内容编写
• 需要丰富格式的文本输入