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"
         ]
     };
 }
相关推荐
小信丶2 分钟前
Spring 6 的 @HttpExchange 注解:声明式 HTTP 客户端的现代化利器
java·spring·http
野犬寒鸦2 小时前
多级缓存架构:性能与数据一致性的平衡处理(原理及优势详解+项目实战)
java·服务器·redis·后端·缓存
回忆哆啦没有A梦2 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__3 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生3 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
yi碗汤园3 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
帧栈4 小时前
开发避坑指南(58):Java Stream 按List元素属性分组实战指南
java
Da Da 泓5 小时前
LinkedList模拟实现
java·开发语言·数据结构·学习·算法
海琴烟Sunshine5 小时前
Leetcode 14. 最长公共前缀
java·服务器·leetcode
cxr8285 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能