Integrating tinyMCE in ASP.NET Core-iaspnetcore.com

Integrating tinyMCE in ASP.NET Core

一、实现的功能说明
二、运行环境说明
三、配置步骤说明
- step 1：Include this line of code in the of your HTML page
- step 2：初始化tinyMCE
step 3：开始添加图片插件
How to take heading (h1, h2, h3) directly on toolbar in tinymce 4

一、实现的功能说明

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都是可以的）

<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

tinymce带prism代码高亮实现及中文包实现

获取和设置tinyMCE 4编辑器的内容

富文本框TinyMCE4.8上传本地图片基本配置

TinyMCE 图片和文件上传

TinyMce 官网图像手册

TinyMCE中文文档中文手册

http://tinymce.ax-z.cn/