天设计发送邮件，需要设计邮件模板，将动态的字段放入模板里，使用了TinyMCE今天来分享一下；

测试环境：

FineUICore 8.1 （前端的应该不区别FineUI版本）

TinyMCE版本 5.10.0 （下面会写升级方法）

先上图

升级TinyMCE

FineUI自带的好像是4.X，升级我之前发过帖子，需要下载最新的包，覆盖就行了（\wwwroot\res\third-party\tinymce\）

不升级的话会有BUG，插入的字段会跑偏；

升级之后的话会有BUG，高度不会自适应，需要指定高度，这个倒是无所谓，等我修复了再放出来；

TinyMCE的参数

TinyMCE的参数通过 .Options( 去设置，参考 http://tinymce.ax-z.cn/ 就可以了，

比如设置中文

F.OptionItem().Key("language").Value("zh_CN").PersistOriginal(false),

PersistOriginal 表示是否原样输出，如果为false会当作字符串，比如输出 false ，就为true就好了，

完整配置和注释如下

.Options(

//语言

F.OptionItem().Key("language").Value("zh_CN").PersistOriginal(false),

//自定义css路径

F.OptionItem().Key("content_css").Value(Url.Content("~/res/css/FineUIOvereide.css")).PersistOriginal(false),

//不要上面的菜单

F.OptionItem().Key("menubar").Value("false").PersistOriginal(true),

//最小高度

F.OptionItem().Key("min_height").Value("500").PersistOriginal(true),

//插件选择

F.OptionItem().Key("plugins").Value("['link','code','textcolor colorpicker ','noneditable importcss autoresize']").PersistOriginal(true),

//工具条

F.OptionItem().Key("toolbar1").Value("bold italic underline strikethrough | numlist bullist | alignleft aligncenter alignright | link unlink | code"),

//作为标签的class类

F.OptionItem().Key("noneditable_noneditable_class").Value("tag").PersistOriginal(false)

)

TinyMCE的插件

要实现标签功能，需要用到 两个插件 [noneditable不可编辑插件](http://tinymce.ax-z.cn/plugins/noneditable.php) 和 [importcss引用css插件](http://tinymce.ax-z.cn/plugins/importcss.php)，放到plugins 最后就行了；这里我设置了 noneditable_noneditable_class ，就是这个css 将作为 不可编辑的标记；

如果没升级 TinyMCE 出现以下情况

插入焦点会很奇怪；

核心实现 当然是JS

直接上代码，看注释

//一个字段的合集 [{id,value},{id,value}]
const fields=@Html.Raw(ViewBag.myFields);

F.ready(function () {
    fields.forEach(item=> {
        //Label 
        let tag=new F.Label({
            cls: "tag",
            hideLabel: true,
            value: item.value,
            renderTo: F.ui.field.bodyEl,
        });
        //点击事件
        tag.el.on("click", ()=> {
            //拼一个标签 把值塞进去
            let span=`<span class="tag" id="${item.id}" style="height:20px;line-height:20px;margin:0px 5px;">${item.value}</span>`;
            //注意获取编辑控件的用法
            F.ui.HtmlEditor1.getEditorInstance().insertContent(span);
        });
    })
});

tag 是我自己写的样式，不放出来了，30RMB

到这就能插入了；

后台

后台需要保存，发送邮件时需要替换标签，这里用的正则替换，也放出来

myFields.ForEach(item=>
{
    var v="";
    //如果有数据
    if (data.ContainsKey(item.id))
    {
        v=data[item.id].ToString();
    }
    //正则替换模板
    var regEx_style=$"<span[^>]*id=\"{item.id}\"[^>]*?>[\\s\\S]*?<\\/span>";
    temp=Regex.Replace(temp, regEx_style, v);
});

这里的span 要和前台的 span标签一致，否则找不到，属于约定，也可以用一个参数控制；

源码

6.1 前台代码

@{
    ViewBag.Title="没想好";
    var F=Html.F();
}

@section head {
}

@section body {
    @(
    F.Panel().NoBorderAndHeader().Layout(LayoutType.HBox).IsViewPort(true)
    .Items(
        F.Panel().ID("field").BoxFlex(1).Title("字段").Toolbars(F.Toolbar().Items(
            F.Button().Text("测试").OnClick(Url.Action("test"), new Parameter("temp", "F.ui.HtmlEditor1.getValue()"))
            )),
        F.HtmlEditor().BoxFlex(3).ID("HtmlEditor1").Editor(Editor.TinyMCE).LabelAlign(LabelAlign.Top)
                .BasePath(Url.Content("~/res/third-party/tinymce/")).ToolbarSet(EditorToolbarSet.Full)
                //.Height(600)
                .Options(
                    F.OptionItem().Key("language").Value("zh_CN").PersistOriginal(false),
                    F.OptionItem().Key("content_css").Value(Url.Content("~/res/css/FineUIOvereide.css")).PersistOriginal(false),
                    F.OptionItem().Key("menubar").Value("false").PersistOriginal(true),
                    F.OptionItem().Key("min_height").Value("500").PersistOriginal(true),
                    F.OptionItem().Key("plugins").Value("['link','code','textcolor colorpicker ','noneditable importcss autoresize']").PersistOriginal(true),
                    F.OptionItem().Key("toolbar1").Value("bold italic underline strikethrough | numlist bullist | alignleft aligncenter alignright | link unlink | code"),
                    F.OptionItem().Key("noneditable_noneditable_class").Value("tag").PersistOriginal(false)
                )
        )
  )
}

@section script {
    <script>
        const fields=@Html.Raw(ViewBag.myFields);
        F.ready(function () {
            fields.forEach(item=> {
                let tag=new F.Label({
                    cls: "tag",
                    hideLabel: true,
                    value: item.value,
                    renderTo: F.ui.field.bodyEl,
                });
                
                tag.el.on("click", ()=> {
                    let span=`<span class="tag" id="${item.id}" style="height:20px;line-height:20px;margin:0px 5px;">${item.value}</span>`;
                    F.ui.HtmlEditor1.getEditorInstance().insertContent(span);
                });
            })
        });
    </script>
}

6.2 后台代码

using FineUICore.EmptyProject.Controllers;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;

namespace FineUICoreEx.Demo.Areas.Other.Controllers
{
    [Area("Other")]
    public class TinyMCETestController : BaseController
    {
        public IActionResult Index()
        {
            List<myField> myFields=GetmyFields();
            ViewBag.myFields=JArray.FromObject(myFields).ToString(Formatting.None);
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> test(string temp)
        {
            JObject data=new JObject();
            GetData().ForEach(item=>
            {
                data.Add(item.id, item.value);
            });
            List<myField> myFields=GetmyFields();
            myFields.ForEach(item=>
            {
                var v="";
                if (data.ContainsKey(item.id))
                {
                    v=data[item.id].ToString();
                }
                var regEx_style=$"<span[^>]*id=\"{item.id}\"[^>]*?>[\\s\\S]*?<\\/span>";
                temp=Regex.Replace(temp, regEx_style, v);
            });

            ShowAlert(temp);
            return FineUICore.UIHelper.Result();
        }

        private List<myField> GetData()
        {
            return new List<myField>() {
                new myField() { id="date",value=DateTime.Now.ToString("yyyy-MM-dd") },
                new myField() { id="name",value="我不是标题" },
                new myField() { id="content",value="内容22223423<br/>内容22223423" },
            };
        }

        public dynamic GetmyFields()
        {
            return new List<myField>() {
                new myField() { id="date",value="日期" },
                new myField() { id="name",value="姓名" },
                new myField() { id="title",value="标题" },
                new myField() { id="content",value="内容" },
            };
        }
    }

    public class myField
    {
        public string id { get; set; }
        public string value { get; set; }
    }
}

效果图

---

后记和问题

问题1

目前遇到的问题是

F.ui.HtmlEditor2.getEditorInstance() 页面初始时会获取不到，需要延迟

问题2

另外页面初始时回发，会有一个

n.beforeAjax(function () {
    t.oIlO0.initialized && t.oIlO0.save()
})

这个会报错，不要回发或者延迟回发就好了 `绝对是BUG`

代码断

帆软fineReport为例，它本质上是一个Web项目，自然少不了相关的servlet，filter等相关概念。

第一步：一个要求登录的请求当没有登录时，如果重定向到登录请求的。

帆软报表里的每个请求都会进入到com.fr.third.springframework.web.servlet.DispatcherServlet的doDispatch中。

protected void doDispatch(HttpServletRequest request, HttpServletResponse response) throws Exception {
        HttpServletRequest processedRequest=request;
        HandlerExecutionChain mappedHandler=null;
        boolean multipartRequestParsed=false;
        WebAsyncManager asyncManager=WebAsyncUtils.getAsyncManager(request);

        try {
            try {
                ModelAndView mv=null;
                Exception dispatchException=null;

                try {
                    processedRequest=this.checkMultipart(request);
                    multipartRequestParsed=processedRequest !=request;
                    mappedHandler=this.getHandler(processedRequest);
                    if (mappedHandler==null || mappedHandler.getHandler()==null) {
                        this.noHandlerFound(processedRequest, response);
                        return;
                    }

                    HandlerAdapter ha=this.getHandlerAdapter(mappedHandler.getHandler());
                    String method=request.getMethod();
                    boolean isGet="GET".equals(method);
                    if (isGet || "HEAD".equals(method)) {
                        long lastModified=ha.getLastModified(request, mappedHandler.getHandler());
                        if (this.logger.isDebugEnabled()) {
                            this.logger.debug("Last-Modified value for [" + getRequestUri(request) + "] is: " + lastModified);
                        }

                        if ((new ServletWebRequest(request, response)).checkNotModified(lastModified) && isGet) {
                            return;
                        }
                    }

                    if (!mappedHandler.applyPreHandle(processedRequest, response)) {
                        return;
                    }

                    try {
                        mv=ha.handle(processedRequest, response, mappedHandler.getHandler());
                    } finally {
                        if (asyncManager.isConcurrentHandlingStarted()) {
                            return;
                        }

                    }

                    this.applyDefaultViewName(request, mv);
                    mappedHandler.applyPostHandle(processedRequest, response, mv);
                } catch (Exception var27) {
                    dispatchException=var27;
                }

                this.processDispatchResult(processedRequest, response, mappedHandler, mv, dispatchException);
            } catch (Exception var28) {
                this.triggerAfterCompletion(processedRequest, response, mappedHandler, var28);
            } catch (Error var29) {
                this.triggerAfterCompletionWithError(processedRequest, response, mappedHandler, var29);
            }

        } finally {
            if (asyncManager.isConcurrentHandlingStarted()) {
                mappedHandler.applyAfterConcurrentHandlingStarted(processedRequest, response);
                return;
            } else {
                if (multipartRequestParsed) {
                    this.cleanupMultipart(processedRequest);
                }

            }
        }
    }

1 if (!mappedHandler.applyPreHandle(processedRequest, response)) 这里 会进入到com.fr.decision.webservice.interceptor.preHandle方法，如果没通过后面就不走下去了。

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        EventDispatcher.fire(RequestBeginEndEvent.REQUEST_BEGIN, new RequestBeginEndEventInfo(request, response));
        HandlerMethod handlerMethod=(HandlerMethod)handler;
        RequestChecker checker=PreHandlerFactory.getInstance().getRequestChecker(request, handlerMethod);
        return checker.checkRequest(request, response, handlerMethod);
    }

PreHandlerFactory.getInstance().getRequestChecker(request, handlerMethod); 默认会返回com.fr.decision.webservice.interceptor.handler.DecisionRequestChecker对象，如果我们想要改变DecisionRequestChecker的逻辑，可以使用 PreHandlerFactory.getInstance().registerRequestCheckers添加我们自己的RequestChecker，

看看DecisionRequestChecker的checkRequest方法：

public boolean checkRequest(HttpServletRequest request, HttpServletResponse response, HandlerMethod handlerMethod) throws Exception {
        LoginStatusValidator loginStatusValidator=this.getLoginStatusValidator(handlerMethod);
        if (!loginStatusValidator.isNeedCheck()) {
            return true;
        } else if (!SystemService.getInstance().checkSystemInit()) {
            PreHandlerFactory.getInstance().getRequestInterceptorAction(request).dealServerInitStatus(response);
            return false;
        } else {
            LoginClientBean loginClientBean=this.checkLogin(request, response, handlerMethod, loginStatusValidator);
            if (loginClientBean==null) {
                return false;
            } else {
                this.detectVisit(handlerMethod, loginClientBean.getUserId());
                this.checkFunctionSupport(handlerMethod);
                this.checkWebAppName(request);
                return true;
            }
        }
    }

1 this.getLoginStatusValidator(handlerMethod) 这里是检查我们当前访问的请求方法或者方法所在的类上是不是加了LoginStatusChecker注解，比如，在Controller上加上：

    @LoginStatusChecker(
       required=false
    )

表示该controller上的方法丢不需要登录验证。

2 检查系统是否初始化完成，如果没有，返回false

3 检查登录状态，如果没有登录，返回false，如果登录了，检查visit状态，visit是检查我们的方法是否添加了VisitRefer注解，这个注解是对登录用户的userid来做判断。看是否该用户可以访问这个请求

下面看看this.checkLogin(request, response, handlerMethod, loginStatusValidator);

 LoginClientBean checkLogin(HttpServletRequest request, HttpServletResponse response, HandlerMethod handlerMethod, LoginStatusValidator loginStatusValidator) throws Exception {
        try {
            TerminalHandler terminal=TerminalHandler.getTerminal(request, NetworkHelper.getDevice(request));
            return LoginService.getInstance().loginStatusValid(loginStatusValidator.getTokenResource().getToken(request), terminal);
        } catch (Exception var8) {
            JSONPResponseBody jsonpResponseBody=(JSONPResponseBody)handlerMethod.getMethod().getAnnotation(JSONPResponseBody.class);
            if (jsonpResponseBody !=null) {
                JSONPMethodProcessor jsonpMethodProcessor=new JSONPMethodProcessor();
                jsonpMethodProcessor.handleJsonpRequest(this.getErrorMap(var8), request, response);
            } else {
                PreHandlerFactory.getInstance().getRequestInterceptorAction(request).dealLoginInvalidStatus(request, response, var8);
            }

            return null;
        }
    }

1如果没有登录，就会进入异常，如果该方法没有JSONResponseBody注解，就会进入到PreHandlerFactory.getInstance().getRequestInterceptorAction(request).dealLoginInvalidStatus(request, response, var8);

2 PreHandlerFactory.getInstance().getRequestInterceptorAction(request)默认返回com.fr.decision.webservice.interceptor.handler.redirect.RedirectAction,我们也可以PreHandlerFactory.getInstance().registerRequestInterceptorActions来注册自己的action。

下面来看RedirectAction的dealLoginInvalidStatus：

public void dealLoginInvalidStatus(HttpServletRequest request, HttpServletResponse response, Exception ex) throws Exception {
        FineLoggerFactory.getLogger().info(ex.getMessage());
        OriginUrlResponseBean originUrlResponseBean=getOriginalRedirectedUrl(request);
        String originUrlKey=UUIDUtil.generate();
        DecisionStatusService.originUrlStatusService().put(originUrlKey, originUrlResponseBean, (int)FSConfig.getInstance().getLoginConfig().getLoginTimeout());
        String urlWithOrigin=HttpToolbox.appendQuery("${fineServletURL}/login", "origin", originUrlKey);
        response.sendRedirect(TemplateUtils.render(urlWithOrigin));
    }

这里就会将我们的请求重定向到login请求上。

第二步，重定向到登录后会发生什么？

当请求/login时，会进入到com.fr.web.controller.decision.api.auth.LoginResource的page方法上，该类加了如下注解：

@LoginStatusChecker(
    required=false
)
public class LoginResource {

所以它里面定义的方法都不需要验证登录情况。所以直接就能进入login请求方法，该方法为：

@RequestMapping(
        value={"/login"},
        method={RequestMethod.GET},
        produces={"text/html"}
    )
    @ResponseBody
    public String page(HttpServletRequest req, HttpServletResponse res) throws Exception {
        if (LoginService.getInstance().isLogged(req) && FSConfig.getInstance().getLoginConfig().isForceRedirectAfterLogin()) {
            res.sendRedirect(TemplateUtils.render("${fineServletURL}"));
            return "";
        } else if (AppearanceConfig.getInstance().getLoginType()==LoginAppearanceType.LOGIN_URL.toInteger()) {
            String url=this.dealWithLoginUrl(AppearanceConfig.getInstance().getLoginUrl());
            String origin=req.getParameter("origin");
            if (origin !=null) {
                url=HttpToolbox.appendQuery(url, "origin", origin);
            }

            res.sendRedirect(url);
            return "";
        } else {
            Map<String, Object> param=new HashMap();
            ObjectMapper mapper=new ObjectMapper();
            param.put("title", AppearanceConfig.getInstance().getPlatformTitle());
            param.put("loginConfig", mapper.writeValueAsString(ConfigService.getInstance().getLoginAppearanceConfig()));
            param.put("charset", ServerConfig.getInstance().getServerCharset());
            PathGroup group=AtomBuilder.create().buildAssembleFilePath(Browser.resolve(req), LoginComponent.KEY);
            param.put("styleTag", AtomBuilder.create().toHtmlTag(group.toStylePathGroup()));
            param.put("scriptTag", AtomBuilder.create().toHtmlTag(group.toScriptPathGroup()));
            Map<String, Object> system=new HashMap();
            system.put("frontSeed", SecurityConfig.getInstance().getFrontSeed());
            system.put("transmissionEncryption", SystemEncryptionManager.getInstance().getTransmissionEncryption().getType());
            system.put("frontSM4Key", SM4TransmissionEncryption.getInstance().getTransmissionKey());
            system.put("cloudEnabled", CloudCenterConfig.getInstance().isOnline());
            system.put("urlIP", CloudCenter.getInstance().acquireConf("decision.queryip", ""));
            if (AppearanceConfig.getInstance().isCopyrightInfoDisplay()) {
                system.putAll(LoginService.getInstance().getCopyrightInfo(req));
            }

            param.put("system", mapper.writeValueAsString(system));
            return WebServiceUtils.parseWebPageResourceSafe("/com/fr/web/controller/decision/entrance/resources/login.html", param);
        }
}

1：判断是否已经登录了，如果登录了并且isForceRedirectAfterLogin为true，则直接重定向到主页面下。

2：判断loginType与loginUrl，如果满足直接重定向到loginUrl，这里我们可以做自己的登录界面。定制。

3：跳转到系统默认的登录界面/com/fr/web/controller/decision/entrance/resources/login.html。并且会为前端界面设置一些参数，以及样式，js脚本渲染到login.html

第三步：当渲染到前端界面/com/fr/web/controller/decision/entrance/resources/login.html，login.html大致如下：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>数据决策系统</title>
        <!--css文件-->
        <link rel="stylesheet" type="text/css" href="/webroot/decision/file?path=/com/fr/web/ui/fineui.min.css&type=plain&parser=plain"/>

    <link rel="stylesheet" type="text/css" href="/webroot/decision/file?path=/com/fr/web/ui/materials.min.css&type=plain&parser=plain"/>
    <link rel="stylesheet" type="text/css" href="/webroot/decision/file?path=/com/fr/web/resources/dist/login.min.css&type=plain&parser=dynamic"/>

    </head>
    <body>
    <div id="wrapper"></div>

    <script type="text/javascript">
        window.Dec=window.Dec || {};
        window.Dec.injection=window.Dec.injection || {};
    </script>

    <script type="text/javascript">
        Dec.fineServletURL="/webroot/decision";
        Dec.loginConfig=JSON.parse('{\"loginImg\":false,
        \"loginImgId\":\"\",
        \"loginLogoImgId\":\"\",
        \"loginLogoImgName\":\"\",
        \"loginUrl\":\"\",
        \"loginType\":0,
        \"loginTitle\":\"数据决策系统\",
        \"loginColor\":\"#3685F2\",
        \"loginPages\":[],
        \"loginPageId\":\"\",
        \"cookiePath\":\"\/\",
        \"copyrightInfoDisplay\":true
        }');
        Dec.system=JSON.parse('{
        \"urlIP\":\"https:\/\/cloud.fanruan.com\/api\/query\/ip?timeout=10000\",
        \"loginCopyright\":\"Powered by 帆软\",
        \"transmissionEncryption\":2,
        \"frontSM4Key\":\"46910b85bcb2caf4db5a5dbabec3ccfa\",
        \"frontSeed\":\"FGljWYEQgXJGEhTP\",
        \"cloudEnabled\":true,
        \"url\":\"http:\/\/www.fanruan.com\/?utm_source=frexe&utm_medium=trial&utm_campaign=platform\",
        \"templateCopyright\":\"上BI选帆软，专注BI十五年。 Powered by 帆软\"
        }');
        }
    </script>
    <script type="text/javascript" src="/webroot/decision/file?path=/com/fr/web/ui/fineui.min.js&type=plain&parser=plain"></script> //UI框架
    <script type="text/javascript" src="/webroot/decision/file?path=com.fr.decision.web.i18n.I18nTextGenerator&type=class&parser=plain"></script>
    <script type="text/javascript" src="/webroot/decision/file?path=com.fr.decision.web.constant.ConstantGenerator&type=class&parser=plain"></script>
    <script type="text/javascript" src="/webroot/decision/file?path=/com/fr/web/ui/materials.min.js&type=plain&parser=plain"></script>
    <script type="text/javascript" src="/webroot/decision/file?path=/com/fr/web/resources/dist/login.min.js&type=plain&parser=plain"></script> //登录界面构建

    <script>
        Dec.start();
    </script>
    </body>

    </html>

这个界面是通过帆软的 fineUI框架来构建页面的。当点击登录按钮时，会调用POST的/login请求来登录，当登录成功后会将返回的token写入cookie，界面定位到返回得originUrlResponse.originUrl上。