记事本

Dcat Admin 将 tinyMCE 替换为 wangEditor5

我觉得很好 196 次浏览

将Dcat-Admin内置的tinyMCE替换成wangEditor5,以下为集成方案:

  • 将以下三个文件保存到本地:/public/vendor/dcat-admin/wangEditor5

https://unpkg.com/@wangeditor/editor@latest/dist/index.js

https://unpkg.com/@wangeditor/editor@latest/dist/index.js.map

https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css


  • 创建:resources/views/admin/wang-editor-5.blade.php
<div class="{{$viewClass['form-group']}} form-editor">

 <label class="{{$viewClass['label']}} control-label">{{$label}}</label>

 <div class="{{$viewClass['field']}}">

     @include('admin::form.error')

     <div {!! $attributes !!} style="z-index: 999999; border: 1px solid #dbe3e6">
         <div id="toolbar-container" style="border-bottom: 1px solid #dbe3e6;"></div>
         <div id="editor-container" style="min-height: {!! $options['min_height'] !!}px;"></div>
     </div>

     <label>
         <textarea style="display: none" name="{{$name}}">{{ old($column, $value) }}</textarea>
     </label>

     @include('admin::form.help-block')

 </div>
</div>
<!-- script标签加上 "init" 属性后会自动使用 Dcat.init() 方法动态监听元素生成 -->
<script require="@wang-editor" init="{!! $selector !!}">
 // 解决页面存在多个富文本问题
 $('#toolbar-container').attr('id', 'toolbar-container' + id);
 $('#editor-container').attr('id', 'editor-container' + id);
 const {createEditor, createToolbar} = window.wangEditor
 const editorConfig = {MENU_CONF: {}};
 editorConfig.placeholder = '{!! $placeholder !!}';
 editorConfig.readOnly = '{!! $options['readonly'] !!}' || false;
 editorConfig.maxLength = parseInt('{!! $options['max_length'] !!}')
 editorConfig.MENU_CONF['uploadImage'] = {
     server: '{!! $options['images_upload_url'] !!}',
     maxFileSize: parseInt('{!! $options['max_file_size'] !!}'),
     fieldName: 'file',
     customInsert(res, insertFn) {
         insertFn(res.location, '', res.location)
     },
     onBeforeUpload(file) {// 上传之前触发
         return file
     },
     onProgress(progress) {// 上传进度的回调函数
         console.log('progress', progress)// progress 是 0-100 的数字
     },
     onSuccess(file, res) {// 单个文件上传成功之后
         console.log(`${file.name} 上传成功`, res)
     },
     onFailed(file, res) {// 单个文件上传失败
         console.log(`${file.name} 上传失败`, res)
     },
     onError(file, err, res) {
         console.error('上传图片失败', err)
         alert('上传图片失败:' + err.message)
     }
 }
 editorConfig.onChange = (editor) => {
     const html = editor.getHtml()
     let FormEditor = $('.form-editor');
     FormEditor.find('textarea[name="{{ $name }}"]').val(html);
 }
 let html = $('.form-editor').find('textarea[name="{{ $name }}"]').val();
 const editor = createEditor({
     selector: '#editor-container' + id,
     html: html,
     config: editorConfig,
     mode: 'simple'
 })
 const toolbarConfig = {excludeKeys: ["group-video", "emotion"]};
 const toolbar = createToolbar({
     editor,
     config: toolbarConfig,
     selector: '#toolbar-container' + id,
     mode: 'default'
 })
</script>


  • 创建:app/Admin/Extensions/Form/WangEditor.php
<?php

namespace App\Admin\Extensions\Form;

use Dcat\Admin\Form\Field\Editor;

/**
 * @see https://www.wangeditor.com/v5/editor-config.html
 * @see https://www.wangeditor.com/v5/API.html#%E5%9B%BE%E7%89%87
 */
class WangEditor extends Editor
{
 protected $view = 'admin.wang-editor-5';
 
 protected $imageUploadDirectory = 'uploads/images';
 
 protected $disk = 'public';
 
 /**
  * @var array
  * @see formatOptions 动态增加 readonly / images_upload_url 等基础通用配置项
  */
 protected $options = [
     'min_height'    => 400,            //400px
     'max_file_size' => 1024 * 1024 * 2,//2MB
     'max_length'    => 0,              //无限制
 ];
 
 /**
  * 文件上传最大字节数
  *
  * @param  int  $max_file_size  最大上传KB字节数
  *
  * @return \App\Admin\Extensions\Form\WangEditor
  */
 public function maxFileSize(int $max_file_size): WangEditor
 {
     return $this->mergeOptions([
         'max_file_size' => $max_file_size * 1024,
     ]);
 }
 
 /**
  * 输入最大长度
  *
  * @param  int  $max_length
  *
  * @return \App\Admin\Extensions\Form\WangEditor
  */
 public function maxLength(int $max_length): WangEditor
 {
     return $this->mergeOptions([
         'max_length' => $max_length,
     ]);
 }
}


  • 修改:app/Admin/bootstrap.php
Admin::asset()->alias('@wang-editor', [
 'js' => ['/vendor/dcat-admin/wangEditor5/index.js'],
 'css' => ['/vendor/dcat-admin/wangEditor5/style.css'],
]);


Form::extend('editor', WangEditor::class);


使用示例:$form->editor('richtext', 'RichText')->disk('local');

站内搜索