背景1：最近MES的项目做的差不多了，也上线了一段时间，需要一个数据看板放在首页上，就是常见的数据可视化，或者大屏，因为之前没有做过，这里把过程记录分享一下，做为积累；

背景2：对于可视化其实需求很模糊，现场对相关的报表会提出需求，但是是否统计的数据就有用，或者还有哪些数据是挖不到的，这里最好交给有经验的三方公司去干，由于业务的复杂性和数据保密以及成本，只能内部先做一版（就是画原型），这里需要自行去挖掘一些数据，找出一些有用的数据，作为铺垫。




# 背景

背景1：最近MES的项目做的差不多了，也上线了一段时间，需要一个数据看板放在首页上，就是常见的数据可视化，或者大屏，因为之前没有做过，这里把过程记录分享一下，做为积累；

背景2：对于可视化其实需求很模糊，现场对相关的报表会提出需求，但是是否统计的数据就有用，或者还有哪些数据是挖不到的，这里最好交给有经验的三方公司去干，由于业务的复杂性和数据保密以及成本，只能内部先做一版（就是画原型），这里需要自行去挖掘一些数据，找出一些有用的数据，作为铺垫。

# 分析

首先是，对于大屏数据展示的分析，要知道我最终要干什么，略，我会单独总结一次（作为内部资料☺）。

# 步骤

大体分为以下几步，罗列指标和维度（就是提取数据项）- 有效性分析 - 确定图表类型 - 布局排版 和 上色；

## 1. 罗列指标维度

罗列指标和维度，即提取数据项，从业务模块开始，首先将各模块列出来，需要一个思维导图，百度脑图就行，我这里为知笔记自带，对照模块字段(我直接看数据库表设计)，从以下维度寻找可以统计的数据，这里可以不先考虑是否有效，只要有这个字段，就写出来，

### 1.1累计数量

就是表里有多少条数据，或者一列数据的累计，就一个数，N，工令单表就是 累计工单数量 N，出库就是 累计出库 N ；

### 1.2时间维度

从时间维度入手，比如新增时间，更新时间，处理时间，列出，月度，季度，过去一个月，过去七天，同比，环比等 ，这是一组数 []

### 1.3类别

就是可分类字典项维度，比如 单据状态，客户，产品型号，等统计数量，这些数据往往一个表里，以分类码区分，新增单据N 完成单据 N 未完成N 是一组数据 [N] 

### 1.4 交叉数据

多维度数据的组合，时间和类别的组合，或者类别和类别的组合，比如 本月未完成单据，和上月未完成单据，或者这个客户本月新增的单据数量 N

以上的数据内容是作为开发人员或者产品经理可以直观拿到的数据，接下来还要进行干系人头脑风暴，从需求出发查找遗漏；

## 2.有效性分析

即验证指标，做取舍，业务项的数据较多，需要判断出哪些是有意义的，或者哪些是无法统计的，屏幕上显示的数据是有限的，这里可以从需求出发，就是哪些人会看这些数据（对于MES系统 现场情况 和 质量情况 是比较关注的）。需要结合实际业务，比如罗列项里有一条 每日出库量，但是实际上一个星期也只有一个出库单，所以这条就作废了，应该按月统计，在思维导图上（这时思维导图应该是两层，第一层是模块，第二次是数据项 ）第三层标注作废，并写上原因，虽然这些项目前无法统计或没有意义，不代表以后不能统计（保留过程资产！！）。


![](https://shixixiyue.gitee.io//post-images/1700622725222.png)

## 3.确定图表类型

上面的步骤解决了数据可视化的前两个字，接下来解决后三字。首先要对各个图表有个概念，下面这个图随便一搜就能见到；

![](https://shixixiyue.gitee.io//post-images/1700622736495.png)

结合数据，直接数字的 N ，就是标题 + 数字即可，或者仪表盘（有目标的数）；时间维度的，用柱状图 或者 折线图 ；类别维度的 用饼图 堆积图 环形图；交叉数据 就用 面积图 或 柱状图加折线图。

这里不能想像，在有了概念之后需要看一眼图到底合不合适，因为有的数据量会比较少，放上折线图不好看，所以这里我使用了微软的Power BI工具（帆软应该也可以），注册账号可以看[这个](http://www.sc-rh.com/kjjj/20220419/400256324.html) 。直连测试数据库，网上资料不少，花了一下午都巴拉会了，拖拽一下，把罗列的数据项一个一个的都画出来（这里可能还会再出一个分享），先按模块做图表页，把一个模块的数据放一起；一个数据可以多画几个，便于搭配，作为基础组件先随意摆着就行了。

## 4.布局排版 和 上色

我也不是专业设计美工，可以在纸上画画，这里还是从模块开始，在Power BI新建一页，设置画布大小，如果视图上要放5个模块的数据，先拉5个方框，然后摆一摆，填满之后再放元素，这就是一个画草稿推了重新画的过程，注意保留版本即可（如果有看着差不多的可以复制该页面建立副本），基本迭代三四版就差不多了。可以翻一翻百度，找些灵感。

上色的话可以先用纯色，然后再找背景图搭一下，一个大背景，各模块有透明度背景或浅色背景，不要背景色最次来个边框，都是一般做法我也说不出来啥，随缘。

  


到这里，终于就到了写周报的时间（整个步骤花费了一周），高可用的原型画完了：穷举了可用项，创建了一大堆组件，进行了简单布局；接下来就可以进入评审和开发了。

数据可视化页面流程

继上一次分享模板列扩展JS之后，进行了部分优化和新增，现在放出代码；增加了异步列的示例，以及相关代码；

完整代码需要配合以上两个分享；


先看使用示例，再看源码


第一种用法，先显示等待的图标，异步请求后显示结果


![FollMczMASdQZ5P5rYAdwKhAl2d1.png](/static/img/35e2314099b798f916fcbdc43c80ef21.FollMczMASdQZ5P5rYAdwKhAl2d1.webp)

![FqEdZYbKcVl_zrJeAySHMWXl_YR-.png](/static/img/6e7e33e2dcdd664e85b563e8e520ba10.FqEdZYbKcVl_zrJeAySHMWXl_YR-.webp)

![Fs1gB-1XzaWjYKCX3BwMi7SE1yqL.png](/static/img/56d7bc922cf4bea88fffe74828925715.Fs1gB-1XzaWjYKCX3BwMi7SE1yqL.webp)


![Fl5gsEt2dY0_S9GoYA-BclO1hMqs.gif](/static/img/87168668eb3ed927b5f3cb32ac67861c.Fl5gsEt2dY0_S9GoYA-BclO1hMqs.gif)
实际项目中也可能会重置 等待图标，有时候等待图标会放在原始值前面有时候放在后面或不显示，第二个参数可以接收方法 尝试修改默认行为，在实际中这样使用



![FlSLXgOwiFgxcIZGBk7th6a8Uz8O.png](/static/img/b5bb7aaa0cde83aa0a10425d8b83ef4b.FlSLXgOwiFgxcIZGBk7th6a8Uz8O.webp)


![FrFe2rTv8FUjA0hOkr2V0hfRFad3.png](/static/img/5c442ced10b69405bca5d84affbeb0f9.FrFe2rTv8FUjA0hOkr2V0hfRFad3.webp)

![FjyHyXaMcgrgX2JXU4vXJjHrKVqh.gif](/static/img/6b697d5c3e8dd8cd8e16d2106e53a205.FjyHyXaMcgrgX2JXU4vXJjHrKVqh.gif)

JS

```
renderEx = function (fn) {
    //创建模板
    let model = {
        /**
         * 按钮
         * @param {Object} opt {id,text必填;icon图标 拼接 f-;beforRender;click;hidetype[visibility]}
         */
        btn(opt) {
            const _btn = (_opt = opt) => {
                //按钮和text 默认 是value
                if (!_opt.id) {
                    _opt.id = GetGuid();
                }
                let oldid = _opt.id;
                _opt.id = `${_opt.id}_${this.params.rowId.replace("/", "")}_${this.params.columnId}`;
                _opt.text = _opt.text || this.value;

                //绘制按钮
                _opt.el = $(`<a id="${_opt.id}">`).addClass("f-btn f-btn-small f-state-default");
                _opt.el.attr("data-type", oldid);

                //<i class="f-btn-icon f-icon f-icon-pencil" style="display: inline-block;color: #3d80b3;"></i>
                if (_opt.icon) {
                    _opt.el.append(`<i class="f-btn-icon f-icon f-icon-${_opt.icon}" style="display: inline-block;color: #409eff;"></i>`);
                    //如果有图标 btn缩小
                    _opt.el.css("padding-left", '5px');
                }
                //触发绘制前方法
                let b = _opt.beforRender && _opt.beforRender.apply(this, [_opt]);
                _opt.el.append(`<span>${_opt.text}</span>`);

                //注册按钮事件 注意由于还没有绘制所以只能延迟
                (b || F.isEMP(b)) && _opt.click && setTimeout(() => {
                    //可以自己加入其他事件
                    $('#' + _opt.id).on('click', function () {
                        doCallback(_opt.click, [_opt]);
                    })
                }, 0);

                //返回html
                if (b || F.isEMP(b)) {
                    return _opt.el[0].outerHTML;
                } else if (_opt.hidetype && _opt.hidetype == 'visibility') {
                    _opt.el.css("visibility", 'hidden');
                    return _opt.el[0].outerHTML;
                } else { //如果绘制的方法回发fasle就没有html
                    return "";
                }
            }

            //如果不是数组
            if (!F.isARR(opt)) {
                return _btn();
            } else {
                //如果是数组 加入到组里 加个间距的样式
                let btndiv = $('<div class="GridRowBtns">');

                opt.forEach(item => {
                    btndiv.append(_btn(item));
                })
                //返回html
                return btndiv[0].outerHTML;
            }
        },
        //返回是否
        bool() {
            return this.value == 1 ? '是' : '否';
        },
        //性别
        gender() {
            return this.value == 1 ? '男' : '女';
        },
        //a标签
        link(opt) {
            const _link = (_opt = opt) => {
                //按钮和text 默认 是value
                if (!_opt.id) {
                    _opt.id = GetGuid();
                }
                _opt.id = `${_opt.id}_${this.params.rowId}_${this.params.columnId}`;
                _opt.text = _opt.text || this.value;

                //绘制按钮
                _opt.el = $(`<a id="${_opt.id}">`).addClass("grid-row-link").append(`<span>${_opt.text}</span>`);

                //触发绘制前方法
                let b = _opt.beforRender && _opt.beforRender.apply(this, [_opt]);

                //注册按钮事件 注意由于还没有绘制所以只能延迟
                _opt.click && setTimeout(() => {
                    //可以自己加入其他事件
                    $('#' + _opt.id).on('click', function () {
                        doCallback(_opt.click, [_opt]);
                    })
                }, 0);

                //返回html
                if (b || F.isEMP(b)) {
                    return _opt.el[0].outerHTML;
                } else { //如果绘制的方法回发fasle就没有html
                    return "";
                }
            }

            //如果不是数组
            if (!F.isARR(opt)) {
                return _link();
            } else {
                //如果是数组 加入到组里 加个间距的样式
                let btndiv = $('<div class="GridRowBtns">');

                opt.forEach(item => {
                    btndiv.append(_link(item));
                })
                //返回html
                return btndiv[0].outerHTML;
            }
        },
        //异步列标记，先返回一个等待的图标，然后 执行异步方法 
        promise(fun, msg = "") {
            //准备一个等待的图标
            let icon = $(`<i class="f-icon f-icon-refresh loading-iocn f-grid-cell-inner-loading-iocn"></i>`);
            //准备一个ID
            let id = GetGuid();
            //异步方法
            const asyncFun = async () => {
                let res = await fun();
                //方法执行后将ID替换
                res && $(`#${id}`).parent().html(res);
            }
            //执行
            asyncFun();
            //如果不是文本 尝试当方法调用 并返回
            if (!F.isSTR(msg)) {
                try {
                    //可能出现没有加载图标的情况 将ID绑到固定标签上
                    return doCallback(msg, [icon[0].outerHTML, icon]) +
                        `<span id="${id}"></span>`;
                } catch (e) {}
            }
            //非函数 将加载图标附上ID
            icon.attr({
                id
            });
            //直接返回
            return icon[0].outerHTML + msg;
        }
    }
    /*柯里化
     * 最后还是返回一个方法，
     * 这个方法将被正常的RendererFunction执行，
     * 但是扩展了一个参数
     * 懂的都懂
     * */
    return function (value, params) {
        //先给model赋值
        Object.assign(model, {
            value,
            params,
        });

        //再本示例中触发的是renderBtns方法 自己缕一缕，
        return doCallback(fn, [value, params, model, this]);
    }

    //apply的写法
    //doCallback = function (fn, args) {
    //    return fn.apply(this, args);
    //}
}
/**异步绘制方法 */
renderExAsync = function (fun, msg = "") {
    return renderEx((v, p, m, g) => 
        m.promise(() =>
            doCallback(fun, [v, p, m, g]), msg)
    );
}
```

CSS


```
/*加载图标*/
.loading-iocn {
    color: #2c4359;
    animation: spin 2s infinite linear;
}

.f-grid-cell-inner-loading-iocn {
    min-width: 12px;
    height: 12px;
    font-size: 12px;
    display: inline-flex;
    line-height: 10px;
    justify-content: center;
    align-items: center;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(359deg)
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg)
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg)
    }

    100% {
        -o-transform: rotate(359deg)
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg)
    }

    100% {
        -ms-transform: rotate(359deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(359deg)
    }
}
```

.cs


```
/// <summary>
/// 绘制回调方法 参数为JS名称
/// </summary>
/// <param name="f"></param>
/// <param name="fn"></param>
/// <returns></returns>
public static RenderFieldExtension RendererFunctionEx(this RenderFieldExtension f, string fn)
{
    f.RendererFunction("renderEx(" + fn + ")");
    return f;
}

/// <summary>
/// 绘制异步回调方法 参数为JS名称
/// </summary>
/// <param name="f"></param>
/// <param name="fn">最终执行的js</param>
/// <param name="msg">预占文字</param>
/// <returns></returns>
public static RenderFieldExtension RendererFunctionAsnync(this RenderFieldExtension f, string fn, string msg = "")
{
    f.RendererFunction($"renderExAsync({fn},'{msg}')");
    return f;
}
```

![](/static/img/01b06a13bb02886f850f498a4b352980.å¼æ­¥åå¼2.gif.gif)

:::info{title="相关连接"}
[FineUICore-F.doPostBack的Promise改造](https://blog.shizhuoran.top/post/53)

[FineUI Core Grid按钮模板列-1](https://blog.shizhuoran.top/post/54)

[FineUI Core Grid按钮模板列-2](https://blog.shizhuoran.top/post/55)
:::

FineUI Core Grid按钮模板列-2

在做定时任务模块，将原有的方法，作为定时任务执行，由前台配置定时的时间，这里使用的是特性，就是给方法脑袋上加个[SysTask] ，在系统启动后 读取全部带SysTask特性的方法，这样就可以在前台展示了。
这里需要 遍历当前解决方案所有的程序集的所有方法，得到包括SysTask特性的方法，然后实例化该类，执行方法；



就是一个遍历， 这里直接写出

![](https://shixixiyue.gitee.io/blog2//post-images/1684887612736.png)

```
    public static class AssemblyHelper
    {
        /// <summary>
        /// 返回 指定特性的 方法
        /// </summary>
        /// <typeparam name="T">特性</typeparam>
        /// <returns>
        /// <para>context 当前类</para>
        /// <para>methodInfo 当前方法</para>
        /// <para>attrdata 当前特性</para>
        /// <para>constructorArguments 特性的参数</para>
        /// <para>namedArguments 特性的属性</para>
        /// </returns>
        public static IEnumerable<(
            Type context, MethodInfo methodInfo,
            CustomAttributeData? attrdata,
            IList<CustomAttributeTypedArgument>? constructorArguments,
            IList<CustomAttributeNamedArgument>? namedArguments)>
            GetAttributeMethodInfo<T>()
        {
            var listassembly = GetAllAssembly();
            var listtypes = listassembly.AsParallel()
                .Where(m => m!.FullName!.StartsWith("HD")).Select(m => m.GetTypes()).SelectMany(m => m);
            foreach (var context in listtypes)
            {
                var listmethodInfo = context.GetMethods().AsParallel()
                    .Where(t => t.GetCustomAttributes(typeof(T), false).Length > 0);
                foreach (var methodInfo in listmethodInfo)
                {
                    var attrdata = methodInfo.CustomAttributes.Where(t => t.AttributeType == typeof(T))
                        .FirstOrDefault();

                    yield return (context, methodInfo,
                        attrdata,
                        attrdata?.ConstructorArguments,
                        attrdata?.NamedArguments);
                }
            }
        }

        /// <summary>
        /// 得到所有程序集
        /// </summary>
        /// <returns></returns>
        public static IEnumerable<Assembly> GetAllAssembly()
        {
            var refAssembyNames = Assembly.GetExecutingAssembly().GetReferencedAssemblies();
            foreach (var asslembyNames in refAssembyNames)
            {
                Assembly.Load(asslembyNames);
            }
            return AppDomain.CurrentDomain.GetAssemblies();
        }
    }
```

使用遍历

```
/// <summary>
/// 得到所有的任务
/// </summary>
public static void GetAllTasks()
{
    AssemblyHelper.GetAttributeMethodInfo<SysTaskAttribute>()
        .ToList().ForEach(res =>
    {
        var context = res.context;//类
        var methodInfo = res.methodInfo;//方法
        var args = res.constructorArguments;//特性传的参数
    });
}
```


可以注意一下最后两个参数 ，一个是 ConstructorArguments，一个是 NamedArguments

如果特性是这么写的
```
 [SysTask(taskGUID, "更新数据源")]
 public static void Update(string SourceKey)
 {
 }
```
就是普通的重载，那么使用 ConstructorArguments 就可以拿到了，是一个集合 0,1,2,3 这么拿，

如果你的特性这么写
```
[AttributeUsage(AttributeTargets.Method)]
public class SysTaskAttribute : Attribute
{
   public string key { get; set; }
}
```
没有重载，AttributeTargets.Method 是属性可以当参数的意思
那么特性可以这样用
```
 [SysTask(key = taskGUID)]
 public static void Update(string SourceKey)
 {
 }
 ```
没有重载时 ConstructorArguments 就拿不到了，要用 最后一个参数就是 NamedArguments

---分割线---

![](https://blog.shizhuoran.top/static/img/bc7da5bb1ad30ca915d79dc59fc4d5e0.FlLvZFvoN-OKI-_yYqotvoJf3qwu.webp)
那么如何实例化方法调用，并且传参呢，先下班，想起来补；

代码分享-得到指定特性的方法

我不会.Net core 只会用FineUICore
吃了药的大聪明都知道 FineUICore.PageContext.Current 存的是当前的上下文，是一个HttpContext对象，在里面可以拿到Session、请求参数、纳皮尔常数等信息，今天我就来讲一下熘肉片的诀窍是什么。



# 1. 一切要从依赖注入说起
我也不老懂的，自己查资料吧

# 2. 一切要从Startup开始
知道了依赖注入后，我们扭过大跨再来看下 Startup.cs ，下有一个 Configure ，Configure 里有代码 app.UseFineUI();
```
// FineUI 中间件（确保 UseFineUI 位于 UseEndpoints 的前面）
app.UseFineUI();
```
FineUICore就是从这里 拿到了依赖，这里的 app是IApplicationBuilder

百度和我们还知道 有一个接口可以找到所有的注入实例就是 IServiceProvider，其中有一个方法 GetRequiredService 和 GetService （两者的区别是 GetRequiredService 如果拿不到实例会抛出异常）可以得到指定类型的注入，详见这篇文章。

app 中的 ApplicationServices 就是 IServiceProvider


上下文 HttpContext 就在 实现 IHttpContextAccessor 的Service中，所以有:
```
var Current = app.ApplicationServices?.GetService<IHttpContextAccessor>()?.HttpContext;
```
FineUICore.PageContext 也有 GetService 方法，那其实 PageContext 中就是有一个 IServiceProvider 静态变量
HttpContext 中还有一个获取容器的参数 HttpContext.RequestServices 也是一个 IServiceProvider 

:::warning{title="注意"}
Task.Run(() =>{}) 可能会导致上下文丢失
:::


# 3. 后记
虽然FineUICore提供了一些方法很方便很贴心，但是对于一些底层方法还是要自己实现，引用FineUI就大材小用了，我发现项目中中间层的类库一定程度上依赖FineUI，这为将来升级带来隐患，要将这部分代码剥离替换。

不仅要学会使用，还应该懂得拆解学习，让FineUI成为自己的，这才能让别人的代码更有意义。所以诀窍就是热锅冷油，翻炒到泡泡变少。

# 4. 参考代码

```
/// <summary>
/// 当有多个实现类，根据类名得到 具体那个
/// </summary>
/// <param name="type"></param>
/// <exception cref="NotImplementedException"></exception>
public static T GetServerByStr<T>(string type = "")
	where T : class
{
	T server = default;
	try
	{
		if (string.IsNullOrEmpty(type))
		{
			try
			{
				server = _ServiceProvider!.GetService<T>();
			}
			catch { }
			if (server == null)
			{
				server = _ServiceProvider!.CreateScope().ServiceProvider.GetRequiredService<T>();
			}
			return server;
		}
		try
		{
			var servers = _ServiceProvider!.GetServices<T>().ToList();
			server = servers.FirstOrDefault(m => m.GetType().ToString().Contains(type));
		}
		catch
		{
			var servers = Current?.RequestServices.GetServices<T>().ToList();
			server = servers!.FirstOrDefault(m => m.GetType().ToString().Contains(type));
		}
	}
	catch { }
	return server!;
}

/// <summary>
///
/// </summary>
/// <typeparam name="T"></typeparam>
/// <returns></returns>
public static T? GetServerByApp<T>()
{
	if (PageContext._ApplicationBuilder == null && _ServiceProvider != null)
	{
		return _ServiceProvider!.GetService<T>() ?? _ServiceProvider!.CreateScope().ServiceProvider.GetService<T>();
	};
	var serviceScope = PageContext._ApplicationBuilder?.ApplicationServices.CreateScope();
	return serviceScope!.ServiceProvider.GetService<T>();
}

/// <summary>
/// 从上下文获取服务
/// </summary>
/// <typeparam name="T"></typeparam>
/// <returns></returns>
public static dynamic GetServerByApp(Type T)
{
	if (PageContext._ApplicationBuilder == null)
	{
		return _ServiceProvider!.GetService(T) ?? _ServiceProvider!.CreateScope().ServiceProvider.GetService(T);
	};
	var serviceScope = PageContext._ApplicationBuilder?.ApplicationServices.CreateScope();
	return serviceScope!.ServiceProvider.GetService(T);
}
```

FineUICore中的上下文

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

测试环境：
FineUICore 8.1 （前端的应该不区别FineUI版本）
TinyMCE版本 5.10.0 （下面会写升级方法）



先上图

![插入](https://shixixiyue.gitee.io/blog2//post-images/1684483828622.gif)

## 1. 升级TinyMCE 

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

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

## 2. 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)
)
```
## 3. 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 出现以下情况 

![插入](https://shixixiyue.gitee.io/blog2//post-images/1684483838739.gif)

插入焦点会很奇怪；


## 4. 核心实现 当然是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 

到这就能插入了；

## 5. 后台 

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

```
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. 源码

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; }
    }
}

```

引用图

![实际图](https://shixixiyue.gitee.io/blog2//post-images/1684483854701.png)

---

## 后记和问题

* 问题1

 目前遇到的问题是
F.ui.HtmlEditor2.getEditorInstance() 页面初始时会获取不到，需要延迟

* 问题2

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

```
n.beforeAjax(function () {
    t.oIlO0.initialized && t.oIlO0.save()
})
```
这个会报错，不要回发或者延迟回发就好了 `绝对是BUG`

* 代码断
```
let Editor = F.ui.HtmlEditor1.getEditorInstance();
Editor.on('focus', function () {
    ...
});
Editor.on('change', ...);
```

```
F.HtmlEditor().ID("HtmlEditor1").Editor(Editor.TinyMCE)
 .Label("标题")
 .LabelAlign(LabelAlign.Top)
 .BasePath(Url.Content("~/res/third-party/tinymce/"))
 .ToolbarSet(EditorToolbarSet.Full)//好像影响menubar:false
 .Options(
    F.OptionItem().Key("language").Value("zh_CN").PersistOriginal(false),
    F.OptionItem().Key("toolbar").Value("false").PersistOriginal(true),//没工具条
    F.OptionItem().Key("menubar").Value("false").PersistOriginal(true),//没菜单
    F.OptionItem().Key("statusbar").Value("false").PersistOriginal(true),//没状态栏
    F.OptionItem().Key("height").Value("58").PersistOriginal(true),
    F.OptionItem().Key("content_css").Value(Url.Content("~/res/css/FineUIOvereide.css")).PersistOriginal(false), 
    F.OptionItem().Key("plugins")
    .Value("['noneditable importcss']").PersistOriginal(true),
    F.OptionItem().Key("noneditable_noneditable_class").Value("tag").PersistOriginal(false)
    ),
F.HtmlEditor().ID("HtmlEditor2").Editor(Editor.TinyMCE)
 .Label("内容")
 .LabelAlign(LabelAlign.Top)
 .BasePath(Url.Content("~/res/third-party/tinymce/"))
 .Options(
    F.OptionItem().Key("language").Value("zh_CN").PersistOriginal(false),
    F.OptionItem().Key("plugins")
    .Value("['link','code','textcolor colorpicker ','noneditable importcss  autoresize preview']").PersistOriginal(true),//插件
    F.OptionItem().Key("min_height").Value("350").PersistOriginal(true),//最小高度
    F.OptionItem().Key("toolbar1")
      .Value("fontselect fontsizeselect | bold italic underline strikethrough | numlist bullist | alignleft aligncenter alignright | link unlink | code preview wordcount"),//工具栏
    F.OptionItem().Key("noneditable_noneditable_class").Value("tag").PersistOriginal(false),
    F.OptionItem().Key("content_css").Value(Url.Content("~/res/css/FineUIOvereide.css")).PersistOriginal(false),//引用css
    F.OptionItem().Key("menubar").Value("false").PersistOriginal(true),//没有菜单
    F.OptionItem().Key("branding").Value("false").PersistOriginal(true),//没有logo
    F.OptionItem().Key("font_formats").Value("微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif").PersistOriginal(false)//字体
    )
```