天天看點
傳回

TinyMCE 編輯郵件模闆 FineUICore

作者：瘋exe
昨天設計發送郵件，需要設計郵件模闆，将動态的字段放入模闆裡，使用了TinyMCE今天來分享一下；

測試環境：

FineUICore 8.1 （前端的應該不差別FineUI版本）

TinyMCE版本 5.10.0 （下面會寫更新方法）

先上圖

TinyMCE 編輯郵件模闆 FineUICore

更新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 出現以下情況

TinyMCE 編輯郵件模闆 FineUICore

插入焦點會很奇怪；

核心實作 當然是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; }
    }
}

效果圖

TinyMCE 編輯郵件模闆 FineUICore

---

後記和問題

問題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)//字型
    )
郵件模闆 tinymce Tiny Core
上一篇: 不敢看短信，因為知道是餘額的提醒。短信資訊不僅是給我一個所剩不多的數字，也在提醒我：省着點花吧，否則又要吃土了。其實衣服
下一篇: 新聞軟文服務商京客網-分享企業3種常見的新聞稿類型助品牌更新

繼續閱讀