Popular blog tags

一、实现的功能说明

tinymce 目前有 3.x 4.x 5.x三大类版本,本文针对 4.x版本

 

Asp .Net Core +tinymce + 插入本地图片并上传到后台+插入代码片段+代码高亮

二、运行环境说明

Asp .Net Core 2.1 + tinymce 4.8.3

三、配置步骤说明

开始逐步实现我们需要的功能:将下面网页中的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/