Dcat-Admin集成wangEditor富文本编辑器的V5版本，编辑回显时html闭合标签丢失

问答 / 8 / 2 / 创建于 2年前

Dcat-Admin2.1.7-beta集成最新wangEditorV5版本，创建是没问题的，但是编辑的时候，回显的html样式混乱了，我打印了一下在JS里面获取的变量内容，发现html的闭合标签好像都没有了，导致样式混乱，想问下，这个是Dcat-Admin处理的吗？
截图如下：

我尝试放在Blade里面渲染，发现样式是正常的，但是因为没有放在对应位置，此时是不能编辑的，截图如下：

Dcat-Admin集成wangEditor富文本编辑器的V5版本，编辑回显时html闭合标签丢失

代码如下：

<style>
  #editor-wrapper {
    border: 1px solid #ccc;
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 600px; }
</style>
<div class="{{$viewClass['form-group']}}">

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

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

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

    <div id="editor-wrapper" {!! $attributes !!} style="width: 100%;height: 100%;">
      <div id="toolbar-container"></div>
      <div id="editor-container"></div>
    </div>
    <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />

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

  </div>
</div>

<!-- script标签加上 "init" 属性后会自动使用 Dcat.init() 方法动态监听元素生成 -->
<script require="@wang-editor2" init="{!! $selector !!}">
  const {createEditor, createToolbar} = window.wangEditor;

  const editorConfig = {
    placeholder: '请输入文章内容',
    MENU_CONF: {
      uploadImage: {
        fieldName: 'upload_image',
        maxFileSize: 5 * 1024 * 1024, // 5M
        maxNumberOfFiles: 5,
        allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'],
        meta: {
          _token: '{{ csrf_token() }}',
        },
        server: '{{ route('dcat.admin.articles.upload_image') }}',
      }
    },
    onChange(editor) {
      $this.parents('.form-field').find('input[type="hidden"]').val(editor.getHtml());
    }
  }

  const editor = createEditor({
    selector: '#editor-container',
    html: `{!! $value !!}`, //    这个地方的html闭合标签好像没有了？
    config: editorConfig,
    mode: 'default',
  });

  const toolbarConfig = {}

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default',
  });

</script>

dcat-admin wangEditor

ljheisenberg

课程读者 187 声望

暂无个人描述~

1 人点赞

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

ononl

198 声望

最佳答案

仅供参考，wangeditor版本号为v5.10.0.，wangeditor更新比较频繁，最好不要直接引用最新版本，会不兼容现在的一些东西，吃过这个亏。

<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: 10000;border: 1px solid #dbe3e6">
            <div id="toolbar-container" style="border-bottom: 1px solid #dbe3e6;"></div>
            <div id="editor-container" style="min-height: 200px;"></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 = '请输入内容';
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/api/general/editor/upload/image',
        maxFileSize: 1024 * 1024 * 20,
        fieldName: 'file',
        // 自定义插入图片
        customInsert(res, insertFn) {
            // res 即服务端的返回结果x
            // 从 res 中找到 url alt href ，然后插图图片
            insertFn(res.data.url, '', res.data.href)
        },
    }
    editorConfig.onChange = (editor) => {
        const html = editor.getHtml()
        var FormEditor = $('.form-editor');
        FormEditor.find('textarea[name="{{ $name }}"]').val(html);
    }
    var 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>

2年前评论

ljheisenberg （楼主）

太妙了，因为我是文章详情页，只有一个编辑器，所以前面加不加id都可以，通过jquery去blade里面获取$value的内容太棒了，我对比过，在普通详情页script里面和dcat-admin的script获取{!! $value!!}我发现，普通详情页是正常的，但是dcat-admin里面闭合标签被全部去掉了，不知道是不是被处理了:joy:

讨论数量: 2

ononl

198 声望

仅供参考，wangeditor版本号为v5.10.0.，wangeditor更新比较频繁，最好不要直接引用最新版本，会不兼容现在的一些东西，吃过这个亏。

<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: 10000;border: 1px solid #dbe3e6">
            <div id="toolbar-container" style="border-bottom: 1px solid #dbe3e6;"></div>
            <div id="editor-container" style="min-height: 200px;"></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 = '请输入内容';
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/api/general/editor/upload/image',
        maxFileSize: 1024 * 1024 * 20,
        fieldName: 'file',
        // 自定义插入图片
        customInsert(res, insertFn) {
            // res 即服务端的返回结果x
            // 从 res 中找到 url alt href ，然后插图图片
            insertFn(res.data.url, '', res.data.href)
        },
    }
    editorConfig.onChange = (editor) => {
        const html = editor.getHtml()
        var FormEditor = $('.form-editor');
        FormEditor.find('textarea[name="{{ $name }}"]').val(html);
    }
    var 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>

2年前评论

ljheisenberg （楼主）

太妙了，因为我是文章详情页，只有一个编辑器，所以前面加不加id都可以，通过jquery去blade里面获取$value的内容太棒了，我对比过，在普通详情页script里面和dcat-admin的script获取{!! $value!!}我发现，普通详情页是正常的，但是dcat-admin里面闭合标签被全部去掉了，不知道是不是被处理了:joy:

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

Dcat-Admin集成wangEditor富文本编辑器的V5版本，编辑回显时html闭合标签丢失

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

Dcat-Admin集成wangEditor富文本编辑器的V5版本，编辑回显时html闭合标签丢失

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录