富文本，事件绑定解决方法 about form-builder

[hlmd]

Editor.php
`<?php
/**

• FormBuilder表单生成器
• Author: xaboy
• Github: https://github.com/xaboy/form-builder
• Editor: 黄连木笛
  */

namespace FormBuilder\components;

use FormBuilder\FormComponentDriver;
use FormBuilder\Helper;

/**

• Editor组件

• Class Editor

• @Package FormBuilder\components

• @method $this bind(String $name , Array $param) 绑定事件
  /
  class Editor extends FormComponentDriver
  {
  /*

  • @var string
    */
    protected $name = 'vue-editor';

  /**

  • 绑定的事件
  • @var array
    **/
    protected $on = [];

  /**

  • @var array
    */
    protected $props = [
    'useCustomImageHandler' => false
    ];

  /**

  • @var array
    */
    protected static $propsRule = [
    'placeholder' => 'string',
    'useCustomImageHandler' => 'boolean'
    ];

  protected function init()
  {
  $this->placeholder($this->getPlaceHolder());
  }

  protected function getPlaceHolder($pre = '请输入')
  {
  return parent::getPlaceHolder($pre);
  }

  public function getValidateHandler()
  {
  return Validate::str(Validate::TRIGGER_BLUR);
  }

  /**

  • 自定义事件
  • @var array

  •  @param [0] string 绑定事件的名称
    

  •  @parma [1] func 绑定事件调用的方法
    

  **/
  protected $bindEvents = [
  'image-added' => ['image-added' , 'imageAdded'],
  'image-removed' => ['image-removed' , 'imageRemoved']
  ];

  /**

  • 绑定事件
  • @param $name string 自定义事件名称
  • @param $param array 参数
  • @return Object
    **/
    public function bind($name , $param = []){
    $action = $this->bindEvents[$name] ?? false;
    if(!$action) return $this;
    $func_name = $action[1];
    $this->$func_name($name , $param , $action);
    return $this;
    }

  /**

  • 富文本图片上传事件

  • @param $name string 自定义事件名称

  • @param $param array 参数

  • @param $action array 事件名称
    **/
    protected function imageAdded($name , $param = [] , $action){
    if(!$param['url']) return;

    //事件内容 string
    $this->on[$name] = "
    function(file,Editor,cursorLocation,resetUploader){
    var formData = new FormData();
    formData.append('file',file);
    $.ajax({
    url: '{$param['url']}',
    type: 'post',
    data: formData,
    dataType: 'JSON',
    processData: false,
    contentType: false,
    success: function(res){
    Editor.insertEmbed(cursorLocation , 'image' , res.data.url);
    resetUploader()
    }
    });
    }
    ";
    }

  /**

  • 绑定富文本图片删除事件
  • @param $name string 自定义事件名称
  • @param $param array 参数
  • @param $action array 事件名称
    **/
    protected function imageRemoved($name , $param = [] , $action){
    //事件内容 string
    $this->on[$name] = "
    function(file,Editor,cursorLocation,resetUploader){
    console.log('图片删除了');
    }
    ";
    }

  /**

  • 生成表单规则
  • @return array
    */
    public function build()
    {
    return [
    'type' => $this->name,
    'field' => $this->field,
    'title' => $this->title,
    'on' => $this->on,
    'value' => $this->value,
    'props' => (object)$this->props,
    'validate' => $this->validate,
    'col' => $this->col
    ];
    }
    }`

[hlmd]

前端getRules后把字符串的函数转成函数
if(c.on){ //事件 for(let i in c.on){ eval('c.on[i] = ' + c.on[i]); } }

[xaboy]

需要自己通过 form-create 实现

[hlmd]

我这边尝试的加了form-create里面的富文本，然后图片上传的话需要绑定事件所以就自己弄了下绑定事件

[hlmd]

我觉得form-builder 有必要更新一下使用最新的form-create 并把富文本和绑定事件给补充一下

[hlmd]

富文本带入
`<script src="https://unpkg.com/quill/dist/quill.min.js"></script>

<script src="https://unpkg.com/vue2-editor/dist/vue2-editor.umd.js"></script> var VueEditor = window.Vue2Editor.VueEditor; Vue.component('vue-editor', VueEditor); </script> `

ＰＨＰ使用
Form Class
use FormEditorTrait;

FormEditorTrait.php

setProps(['useCustomImageHandler' => true]) ->bind('image-added' , ['url'=> url('upload')]) ->bind('image-removed')`

[hlmd]

以上就是我解决 富文本和绑定事件的代码

[xaboy]

可以内置一下绑定事件功能

[pgyf]

我引入富文本编辑器的方法简单暴力
1、页面直接页面引入百度编辑器的js插件
2、php端：

        $span = new FormBuilder\Driver\CustomComponent('div');
        $span->title('编辑器');
        $span->props(['id' => 'myEditor']);

页面

            var editor = UE.getEditor('myEditor',{
                serverUrl: ''
            });
            editor.ready(function () {
                editor.setContent(后台传的内容);
            });