Integrating tinyMCE in ASP.NET Core
Table of Contents
一、实现的功能说明
tinymce 目前有 3.x 4.x 5.x三大类版本，本文针对 4.x版本
Asp .Net Core +tinymce + 插入本地图片并上传到后台+插入代码片段+代码高亮
二、运行环境说明
Asp .Net Core 2.1 + tinymce 4.8.3
三、配置步骤说明
我们需要使用tinymce.init()来进行初始化；
tinymce.init()内的初始化对象包含众多参数，但都是可省略的，唯一必须的参数就是selector
（允许通过css选择器指定tinymce要绑定的内容容器，div和textarea都是可以的）
id
<div id = "tinydemo"></div>
<script >
tinymce.init({
selector: '#tinydemo'
});
</script>
class
<textarea class="rte" data-val="true" data-val-required="请输入内容." id="Body" name="Body" aria-hidden="true" style="display: none;">
<script>
tinymce.init({
selector: 'textarea.rte',
textarea
<textarea id="template">
</textarea>
tinymce.init({
selector: 'textarea', // change this value according to your HTML
});
textarea
<div>
<textarea id="tiny"></textarea>
</div>
<script>
tinymce.init({
selector: 'textarea#tiny'
});
</script>textarea通过表单提交
textarea可通过表单提交
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
开始逐步实现我们需要的功能：将下面网页中的id="AspNetCoretextarea"的文本框变为富文本编辑器。
<!DOCTYPE html>
<html>
<head>
<title>微信公众号AspNetCore提供的Tinymce演示</title>
</head>
<body>
<h1>author:www.iaspnetcore.com</h1>
<form method="post">
<textarea id="AspNetCoretextarea">Hello, World!</textarea>
</form>
</body>
</html>step 1：Include this line of code in the <head> of your HTML page
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>step 2：初始化tinyMCE
<!DOCTYPE html>
<html>
<head>
<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#AspNetCoretextarea'
});
</script>
</head>然后就长成了这个样子
step 3：开始添加图片插件
How to make tinymce paste in plain text by default
tinymce.init({
plugins: "paste",
paste_as_text: true
});
配置的上传图片的路由
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_prepend_url: "https://www.tinymce.com/images/" ////配置的上传图片的路由
});
4.add Blod
toolbar: 'undo redo | code codesample | link image | paste | bold ',
添加功能步骤说明
How to take heading (h1, h2, h3) directly on toolbar in tinymce 4
step 1：First, you have to create the plugin:
Nop.Web\Themes\RootTheme\Views\Shared\EditorTemplates\RichEditor.cshtml
script>
tinymce.init({
selector: 'textarea.rte',//"textarea"根据你的选择器来指定，可以是textarea，可以绑定id（#···）或class（.····）
height: 500,
plugins: [ //配置插件：填写要使用的插件名称，可自己随意选择，但如果是上传本地图片image和imagetools是必要的
'link image codesample code paste'
],
//工具框，r设置工具栏指定显示插件，这里我展示了三个工具栏，也可自己随意配置
toolbar: 'undo redo | code codesample | link image | paste | bold | formatselect ',
autosave_interval: '20s',
image_advtab: true,//开启图片上传的高级选项功能
paste_as_text: true,
table_default_styles: {
width: '100%',
borderCollapse: 'collapse'
},
//"relative_urls" required by jbimages plugin to be set to "false"
relative_urls: false,
image_title: false, // 是否开启图片标题设置的选择，这里设置否
automatic_uploads: true,//开启点击图片上传时，自动进行远程上传操作
1. selector ：指定网页中的某个id，tinymce 将初始化这个id
2.plugins: 如果要添加某项功能，则指定对应的插件，tinymce会在初始化时加载这些插件。
3. toolbar: 添加对应的功能，则在工具条显示对应功能，用|分组
step 2：And then add "| formatselect" in your toolbar:
old
toolbar: 'undo redo | code codesample | link image | paste | bold ',new
toolbar: 'undo redo | code codesample | link image | paste | bold | formatselect ',result
old
new
├── jquery.tinymce.js
├── jquery.tinymce.min.js
├── plugins
│ ├── advlist
│ │ ├── index.js
│ │ ├── plugin.js
│ │ └── plugin.min.js
│ ├── anchor
│ │ ├── index.js
│ │ ├── plugin.js
│ │ └── plugin.min.js
│ ├── autolink
│ │ ├── index.js
│ │ ├── plugin.js
│ │ └── plugin.min.js
├── skins
│ ├── content
│ │ ├── default
│ │ │ ├── content.css
│ │ │ └── content.min.css
│ │ ├── document
│ │ │ ├── content.css
│ │ │ └── content.min.css
│ │ └── writer
│ │ ├── content.css
│ │ └── content.min.css
│ └── ui
│ ├── oxide
│ │ ├── content.css
│ │ ├── content.inline.css
│ │ ├── content.inline.min.css
│ │ ├── content.min.css
│ │ ├── content.mobile.css
│ │ ├── content.mobile.min.css
│ │ ├── fonts
│ │ │ └── tinymce-mobile.woff
│ │ ├── skin.css
│ │ ├── skin.min.css
│ │ ├── skin.mobile.css
│ │ └── skin.mobile.min.css
│ └── oxide-dark
│ ├── content.css
│ ├── content.inline.css
│ ├── content.inline.min.css
│ ├── content.min.css
│ ├── content.mobile.css
│ ├── content.mobile.min.css
│ ├── fonts
│ │ └── tinymce-mobile.woff
│ ├── skin.css
│ ├── skin.min.css
│ ├── skin.mobile.css
│ └── skin.mobile.min.css
├── themes
│ ├── mobile
│ │ ├── index.js
│ │ ├── theme.js
│ │ └── theme.min.js
│ └── silver
│ ├── index.js
│ ├── theme.js
│ └── theme.min.js
├── tinymce.js
└── tinymce.min.js
tinymce 4.x官方操作文档
https://www.tiny.cloud/docs-4x/demo/basic-example/
TinyMCE中文文档中文手册
http://tinymce.ax-z.cn/