当前位置：首页 > 建站教程 >

TinyMCE 编辑邮件模板 FineUICore(无插件使用SMTP发送邮件)

GG网络技术分享 2025-03-18 16:12 0

TinyMCE 编辑邮件模板 FineUICore

测试环境：

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 = #34;<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 = #34;<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`

代码断

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")

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)//字体

)

无插件使用SMTP发送邮件

使用SMTP发送邮件的理由有：

1. 很多虚拟主机禁用了mail函数，根本发不了邮件。

2. 服务器默认的发件地址又很大几率会被拦截。

3. 使用企业邮箱发邮件更高大上。

但是对于很多和我一样不喜欢使用插件的人来说，很多SMTP插件不好用，而且有的还报错。

所以无插件使用SMTP发送邮件的方法，将下列代码修改一下加入到functions.php文件即可：

//使用smtp发邮件
function mail_smtp( $phpmailer ) {
$phpmailer->IsSMTP();
$phpmailer->SMTPAuth = true;//启用SMTPAuth服务
$phpmailer->Port = 465;//MTP邮件发送端口，这个和下面的对应，如果这里填写25，则下面为空白
$phpmailer->SMTPSecure =\"ssl\";//是否验证 ssl，这个和上面的对应，如果不填写，则上面的端口须为25
$phpmailer->Host = \"smtp.exmail.qq.com\";//邮箱的SMTP服务器地址，如果是QQ的则为：smtp.exmail.qq.com
$phpmailer->Username = \"admin@ashuwp.com\";//你的邮箱地址
$phpmailer->Password =\"********\";//你的邮箱登陆密码
}
add_action(\'phpmailer_init\', \'mail_smtp\');
//下面这个很重要，得将发件地址改成和上面smtp邮箱一致才行。
function ashuwp_wp_mail_from( $original_email_address ) {
return \'admin@ashuwp.com\';
}
add_filter( \'wp_mail_from\', \'ashuwp_wp_mail_from\' );

标签：

建站教程

TinyMCE 编辑邮件模板 FineUICore(无插件使用SMTP发送邮件)