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"
         ]
     };
 }
相关推荐
sinat_2622921116 分钟前
Java面试实战:音视频场景下的微服务架构与缓存技术剖析
java·spring boot·redis·微服务·kafka·分布式系统·面试技巧
mask哥20 分钟前
详解springcloudalibaba采用prometheus+grafana实现服务监控
java·nacos·springboot·grafana·prometheus·springcloud·微服务监控
振鹏Dong22 分钟前
Java基础&集合 面试经典八股总结 [连载ing]
java
不当菜虚困4 小时前
JAVA设计模式——(二)组合模式
java·设计模式·组合模式
来自星星的坤5 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
jack_xu5 小时前
经典大厂面试题——缓存穿透、缓存击穿、缓存雪崩
java·redis·后端
vvilkim6 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim6 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js
CHQIUU6 小时前
Java 设计模式心法之第4篇 - 单例 (Singleton) 的正确打开方式与避坑指南
java·单例模式·设计模式
Bayi·6 小时前
前端面试场景题
开发语言·前端·javascript