文章编辑器

能够实现文字和图片的混排的编辑器。按照如下配置即可,需要配置对应的弹窗来选择是图片还是文字。

建议弹窗除了id可以修改,其他尽量不要动。

效果预览

yml配置

# 图文组件主体
- model: article_editor
  label: 文章内容
  name: article
  content: '{%article%}' #对应同步的数据
  buttons: 
    - model: btn
      content: 新增
      dialog_id: add_article
      type: dialog
      icon: 'fa-pencil'
      class_name: 'btn-info btn-sm'

# 同步数据格式
article: 
  - model: 'content'
    value: '云南简介'
  - model: 'content'
    value: '云南的撒范德萨发佛挡杀佛'

# 对应弹窗配置
preloader:
  add_article:
    model: dialog
    title: 添加
    body:
      form:
        action: ''
        content:
          - model: radio_group
            label: 类型
            validate:
              required: required
            options:
              - {value: 'content', content: 文本, related: 'content'}
              - {value: 'image', content: 图片, related: 'image'}
          - model: textarea
            label: 文字内容
            name: content
          - model: image_upload
            label: 上传图片
            multi: 1
            name: image
    buttons:
      - model: button
        class_name: btn-info
        content: 确定
        type: return
        return_type: form
      - model: button
        class_name: btn-default
        content: 取消
        type: dismiss

字段说明

字段 类型 含义 默认值
model String 组件类型为article_editor -
content Array 组件数据,为数组类型 -
name String 控件名 -
label String 控件label名称 -
value String 控件值 -

results matching ""

    No results matching ""