富文本，事件绑定解决方法

[hlmd]

动态添加 事件监听

[xaboy]

需要自己通过 form-create 实现

[hlmd]

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

[hlmd]

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

[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]); } }

[hlmd]

富文本带入 `

var VueEditor = window.Vue2Editor.VueEditor; Vue.component('vue-editor', VueEditor); ` ＰＨＰ使用 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(后台传的内容);
            });