Dcat Admin 将 tinyMCE 替换为 wangEditor5
将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');