受欢迎的博客标签

nopcommerce 4.5.x tinyMCE configuration

Published

nopcommerce 4.5.x tinyMCE configuration

RichEditor.cshtml

nopCommerce_4.50.0_Source\src\Presentation\Nop.Web\Areas\Admin\Views\Shared\EditorTemplates\RichEditor.cshtml

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

You have to edit the RichEditor.cshtml with the following  settings:

codesample

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'codesample',
  toolbar: 'codesample'
});
  var defaultEditorSettings@(random) = {
            selector: "#@Html.IdForModel()",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
            height: 200,
            width: '100%',
            resize: true,
            min_height: 200,
            max_height: '100%',
            plugins: [
                "advlist autolink autoresize directionality lists link image charmap preview anchor",
                "searchreplace visualblocks code fullscreen codesample",
                "insertdatetime media table paste@(enableFullPage ? " fullpage" : null)"
            ],
            toolbar: "ltr rtl | insertfile undo redo | styleselect | code codesample | fontselect | fontsizeselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            relative_urls: false,
            suffix: '.min',
            base_url: '@Url.Content("~/lib_npm/tinymce")',

Step 1:Add Plugin

codesample 

Step 2:Add 

| codesample |

 

blockquote

 //工具框,r设置工具栏指定显示插件,这里我展示了三个工具栏,也可自己随意配置
        toolbar: 'undo redo |  code codesample blockquote |toc link image | paste | bold |  formatselect | forecolor backcolor emoticons  | table',
        toc_depth: 6, //https://www.tiny.cloud/docs-4x/plugins/toc/#toc_depth

autosave_interval: '3s',

        toolbar: 'undo redo |  code codesample blockquote |toc link image | paste | bold |  formatselect | forecolor backcolor emoticons  | table',
        toc_depth: 6, //https://www.tiny.cloud/docs-4x/plugins/toc/#toc_depth
        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
        autosave_interval: '3s',
        image_advtab: true,//开启图片上传的高级选项功能
        paste_as_text: true,

height: 500

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

 

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