Popular blog tags

Integrating Table of Contents plugin with TinyMCE in ASP.NET Core

Published

The toc plugin will generate basic Table of Contents and insert it into the editor at the current cursor position. Items for the table will be taken from the headers found in the content.

 

 

Step 1: Old code as follow

\src\Presentation\Nop.Web\Themes\RootTheme\Views\Shared\EditorTemplates\RichEditor.cshtml

@using Nop.Core
@using Microsoft.AspNetCore.Http
@using Microsoft.Net.Http.Headers
@inject IHttpContextAccessor _httpContextAccessor
@{
    var allowJbimages = false;
    var random = CommonHelper.GenerateRandomInteger();

    var scheme = _httpContextAccessor.HttpContext.Request.Scheme;
    var host = _httpContextAccessor.HttpContext.Request.Headers[HeaderNames.Host];
    var domainUrl = scheme + "://" + host;
}


@section header
    {
    <style>

        pre {
            color: red;
            display: block;
            font-size: 87.5%;
            color: #212529;
        }

        .hljs {
            display: block;
            color: #f5f5f5 !important;
            padding: 0.5em;
            background: #303030 !important;
            color: #839496;
        }
    </style>
}



@*<script type="text/javascript" src="~/Content/tinymce/tinymce.min.js"></script>*@
@*<script type="text/javascript" src="~/Content/tinymce/langs/zh_CN.js"></script>*@
@*<script src="http://cdn.bootcss.com/tinymce/4.6.3/tinymce.min.js"></script>*@
@*<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>*@


@*<script type="text/javascript" src="~/Content/tinymce/tinymce.min.js"></script>*@
@*<script type="text/javascript" src="~/Content/tinymce/langs/zh_CN.js"></script>*@
@*<script src="http://cdn.bootcss.com/tinymce/4.6.3/tinymce.min.js"></script>*@
<script type="text/javascript" src="~/lib/tinymce_5.1.6/js/tinymce/tinymce.min.js"></script>

@*<script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script> tinymce 4.x*@
@*<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>*@ @* tinymce 5.x*@




<script>
    tinymce.init({
        selector: 'textarea.rte',//"textarea"根据你的选择器来指定,可以是textarea,可以绑定id(#···)或class(.····)
        height: 500,
        plugins: [ //配置插件:填写要使用的插件名称,可自己随意选择,但如果是上传本地图片image和imagetools是必要的
            'link media image codesample code paste textcolor'

        ],
        //工具框,r设置工具栏指定显示插件,这里我展示了三个工具栏,也可自己随意配置
        toolbar: 'undo redo |  code codesample | link image | paste | bold |  formatselect | forecolor backcolor emoticons',
        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
        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,
        relative_urls: false,
        remove_script_host: false,
        document_base_url: "@domainUrl",
        image_title: false, // 是否开启图片标题设置的选择,这里设置否
        automatic_uploads: true,//开启点击图片上传时,自动进行远程上传操作

        // 图片异步上传处理函数, without images_upload_url set, Upload tab won't show up
        images_upload_handler: (blobInfo, success, failure) => { // 图片异步上传处理函数
            var xhr, formData;

            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', '/RoxyFileman/UploadFilesAsync');//第一个参数是请求方式,第二个参数是请求地址,我这里配置的是struts的action,如果是其他(PHP等)的可这样配置:xxx.php

            xhr.onload = function () {
                var json;
                if (xhr.status !== 200) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);

                console.log(json);

                if (!json || typeof json.location !== 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                success(json.location);
            };

            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
            xhr.send(formData);
        }

    });
</script>

@Html.TextArea(string.Empty, new { @class = "rte" })


 

\src\Presentation\Nop.Web\Themes\RootTheme\Views\Blog\Create.cshtml

<div class="form-group">
        @Html.LabelFor(m => m.Body)

       
        <span asp-validation-for="Body" class="text-danger"></span>


        @Html.EditorFor(m => m.Body, "RichEditor", new { @class = "form-control" })




    </div>

Step 2:Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'toc',
  toolbar: 'toc',
  menubar: 'insert'
});

Step 3: Add toc to tinymce init

new

       plugins: [ //配置插件:填写要使用的插件名称,可自己随意选择,但如果是上传本地图片image和imagetools是必要的
            'link media image codesample code paste textcolor toc'

        ],
        //工具框,r设置工具栏指定显示插件,这里我展示了三个工具栏,也可自己随意配置
        toolbar: 'undo redo |  code codesample |toc link image | paste | bold |  formatselect | forecolor backcolor emoticons',

setting toc_depth to any number in 1-9 range

<script>
    tinymce.init({
        selector: 'textarea.rte',//"textarea"根据你的选择器来指定,可以是textarea,可以绑定id(#···)或class(.····)
        height: 500,
        plugins: [ //配置插件:填写要使用的插件名称,可自己随意选择,但如果是上传本地图片image和imagetools是必要的
            'link media image codesample code paste textcolor toc'

        ],
        //工具框,r设置工具栏指定显示插件,这里我展示了三个工具栏,也可自己随意配置
        toolbar: 'undo redo |  code codesample |toc link image | paste | bold |  formatselect | forecolor backcolor emoticons',
        toc_depth: 6, //add code here, see:https://www.tiny.cloud/docs-4x/plugins/toc/#toc_depth
        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",

 

Useful links

https://www.tiny.cloud/docs-4x/plugins/toc/

How To Create A Table Of Contents Shortcode