zoukankan      html  css  js  c++  java
  • abp vnext v2.9.0 Blogging模块安装遇到的问题及解决方法

    abp vnext v2.9.0 Blogging模块安装使用过程中,遇到TuiEditor脚本报错和添加post上传封面报错2个问题。

    tuiEditor报错

    20200722更新,非abp的问题造成,应该是我还原客户端js包的过程中出了问题,在梁士伟 同学帮助下,发现是tui-editor依赖的tui-code-snippet包的版本不一致造成。

    tuiEditor v1.4.1之后默认不包括jquery扩展,abp v2.9引用版本为v1.4.10,不能使用jquery扩展方法初始化。

    另外,abp引用js为tui-editor-Editor.min.js无法创建编辑器,通过重写TuiEditorScriptContributor替换js为tui-editor-Editor-full.min.js

    public class TuiEditorExtensionScriptContributor : BundleContributor
        {
            public override void ConfigureBundle(BundleConfigurationContext context)
            {
                context.Files.ReplaceOne(
                    "/libs/tui-editor/tui-editor-Editor.min.js",
                    "/libs/tui-editor/tui-editor-Editor-full.min.js"
                );
            }
        }
    

    在web模块的ConfuguireServices中添加如下代码:

    Configure<AbpBundlingOptions>(options =>
    {
        options.ScriptBundles
            .Configure(
                typeof(Volo.Blogging.Pages.Blog.Posts.NewModel).FullName,
                bundleConfig =>
                {
                    bundleConfig.AddContributors(typeof(TuiEditorExtensionScriptContributor));
                })
            .Configure(
                typeof(Volo.Blogging.Pages.Blog.Posts.EditModel).FullName,
                bundleConfig =>
                {
                    bundleConfig.AddContributors(typeof(TuiEditorExtensionScriptContributor));
                });
    });
    
    

    并重写Pages/Blogs/Posts/new.js和Pages/Blogs/Posts/edit.js编辑器初始化代码如下:

    var newPostEditor = new tui.Editor({
            el: $editorContainer.get(0),
            usageStatistics: false,
            initialEditType: 'markdown',
            previewStyle: 'tab',
            height: "auto",
            hooks: {
                addImageBlobHook: function (blob, callback, source) {
                    var imageAltText = blob.name;
    
                    uploadImage(blob,
                        function (fileUrl) {
                            callback(fileUrl, imageAltText);
                        });
                }
            },
            events: {
                load: function () {
                    $editorContainer.find(".loading-cover").remove();
                    $submitButton.prop("disabled", false);
                    $form.data("validator").settings.ignore = '.ignore';
                    $editorContainer.find(':input').addClass('ignore');
                }
            }
        })
    
        $editorContainer.data(editorDataKey);
    

    上传封面图报错问题

    报错是因为没有配置上传文件的保存路径

    在web模块的ConfuguireServices中调用如下方法:

    /// <summary>
    /// 配置Blog文件存储路径
    /// </summary>
    /// <param name="hostingEnvironment"></param>
    private void ConfigureBlogFileOptions(IWebHostEnvironment hostingEnvironment)
    {
         Configure<BlogFileOptions>(options =>
         {
              options.FileUploadLocalFolder = Path.Combine(hostingEnvironment.WebRootPath, "files");
          });
    }
    
  • 相关阅读:
    MySQL视图更新
    JavaScript经典作用域问题
    进程间通信的几种方式
    Vue(MVVM)、React(MVVM)、Angular(MVC)对比
    CDN(Content Delivery Network)技术原理概要
    单点登录实现原理(SSO)
    composer 实现自动加载原理
    PHP 反射的简单使用
    php7安装php-redis扩展
    Git 简单入门(二)
  • 原文地址:https://www.cnblogs.com/ttzhang/p/abp_v2_9_0_Blogging_Problems.html
Copyright © 2011-2022 走看看