asp.net blazor集成TinyMCE.Blazor

asp.net blazor项目添加TinyMCE.Blazor nuget包

在blazor页面中添加,可以通过ScriptSrc参数配置自定义TinyMCE.Blazor js

XML 复制代码
            <EditForm class="mb-3" Model="Model" OnValidSubmit="@HandleValidSubmit">
                <div class="form-group">
                    <label class="control-label">内容</label>
                    <TinyMCE.Blazor.Editor Field="() => Model.Content"
                                           @bind-Value="Model.Content"
                                           ScriptSrc="https://zeus-site-www.oss-cn-beijing.aliyuncs.com/tinymce_6.0.2/tinymce/js/tinymce/tinymce.min.js"
                                           JsConfSrc="tinymceConf" />
                </div>
                <div class="form-group">
                    <input type="submit" value="创建" class="btn btn-primary" />
                    <input type="button" value="返回" class="btn btn-secondary" @onclick="(()=> ClickToBack())" />
                </div>
            </EditForm>
javascript 复制代码
 var BuildTinymceConf = (imgUploadUrl) => {
     window.tinymceConf = {
         //selector: 'textarea#tinymce_edit',  // change this value according to your HTML
         theme: 'silver',
         language: 'zh_CN',
         language_url: 'https://zeus-site-www.oss-cn-beijing.aliyuncs.com/tinymce4x_languages/langs/zh_CN.js',
         height: "480",
         images_upload_url: imgUploadUrl,
         images_upload_credentials: true,
         plugins: "code codesample preview searchreplace autolink directionality visualblocks visualchars fullscreen link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help image emoticons",
         toolbar: "codesample | formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat image emoticons",
         codesample_languages: [
             { text: 'HTML/XML', value: 'markup' },
             { text: 'JavaScript', value: 'javascript' },
             { text: 'TypeScript', value: 'typescript' },
             { text: 'Python', value: 'python' },
             { text: 'PowerShell', value: 'powershell' },
             { text: 'SQL', value: 'sql' },
             { text: 'Git', value: 'git' },
             { text: 'CSS', value: 'css' },
             { text: 'Bash', value: 'bash' },
             { text: 'CSS', value: 'css' },
             { text: 'PHP', value: 'php' },
             { text: 'Ruby', value: 'ruby' },
             { text: 'Python', value: 'python' },
             { text: 'Java', value: 'java' },
             { text: 'C', value: 'c' },
             { text: 'C#', value: 'csharp' },
             { text: 'C++', value: 'cpp' }
         ],
         textcolor_map: [
             "000000", "Black",
             "993300", "Burnt orange",
             "333300", "Dark olive",
             "003300", "Dark green",
             "003366", "Dark azure",
             "000080", "Navy Blue",
             "333399", "Indigo",
             "333333", "Very dark gray",
             "800000", "Maroon",
             "FF6600", "Orange",
             "808000", "Olive",
             "008000", "Green",
             "008080", "Teal",
             "0000FF", "Blue",
             "666699", "Grayish blue",
             "808080", "Gray",
             "FF0000", "Red",
             "FF9900", "Amber",
             "99CC00", "Yellow green",
             "339966", "Sea green",
             "33CCCC", "Turquoise",
             "3366FF", "Royal blue",
             "800080", "Purple",
             "999999", "Medium gray",
             "FF00FF", "Magenta",
             "FFCC00", "Gold",
             "FFFF00", "Yellow",
             "00FF00", "Lime",
             "00FFFF", "Aqua",
             "00CCFF", "Sky blue",
             "993366", "Red violet",
             "FFFFFF", "White",
             "FF99CC", "Pink",
             "FFCC99", "Peach",
             "FFFF99", "Light yellow",
             "CCFFCC", "Pale green",
             "CCFFFF", "Pale cyan",
             "99CCFF", "Light sky blue",
             "CC99FF", "Plum"
         ]
     };
 }
相关推荐
月亮不月亮10 分钟前
月亮商场购物打折Java
java·eclipse
guozhetao20 分钟前
【ST表、倍增】P7167 [eJOI 2020] Fountain (Day1)
java·c++·python·算法·leetcode·深度优先·图论
技术思考者20 分钟前
基础很薄弱如何规划考研
java·经验分享·考研
前端小巷子20 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑23 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了24 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆30 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆36 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan39 分钟前
Web开发系列-第0章 Web介绍
前端
●VON43 分钟前
重生之我在暑假学习微服务第二天《MybatisPlus-下篇》
java·学习·微服务·架构·mybatis-plus