Question

我已经成功实现了Summernote编辑器contentEditor，我也有一个下拉列表。

我想要的就是选择下拉列表TopicId，隐藏编辑器工具栏中的视频按钮

这是Create.cshtml文件中的代码：

<div class="col-sm-3 col-md-3 col-lg-3 NoPadding">
   <div class="form-group">
       <label for="TopicId">Topic</label>
       <select name="TopicId" id="TopicId" class="form-control>
          <option value="">- Select -</option>
             @foreach (Topic t in ViewBag.TopicId)
               {
                 <option value="@t.Id" @(t.Id == Model.TopicId ? "selected" : "")>@t.Name </option>
               }
        </select>
   </div>

    <div class="form-group" style="margin-bottom: 0px">
                    <label for="contentEditor">Content</label>
                    <div id="contentEditor"></div>
                    <textarea name="content" id="newsContent">@(Model?.Content)</textarea>
    </div>

这是同一文件中的javascript代码：

$(document).ready(function () {
            handleTopicChange();
            $('#TopicId').trigger('change');
        });

function handleTopicChange() {

            $("#TopicId").change(function () {
                var selectedTopicId = $(this).children(":selected").val();
                switch (selectedTopicId) {
                    case '4a0634d8-6597-4ca4-9f07-a4f50e7addeb':
                        $('.contentEditor').summernote({
                            toolbar: [
                                ['fontstyle', ['fontname', 'fontsize', 'color', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'deleteallformat']],
                                ['insert', ['picture', 'link', 'table', 'hr']],
                                ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
                                ['misc', ['undo', 'redo', 'codeview']],
                            ]
                        });
                        break;
                    default:
                        $('.contentEditor').summernote({
                            toolbar: [
                                ['fontstyle', ['fontname', 'fontsize', 'color', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'deleteallformat']],
                                ['insert', ['picture', 'link', 'video'. 'table', 'hr']],
                                ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
                                ['misc', ['undo', 'redo', 'codeview']],
                            ]
                        });
                        break;
                }

            });
        }

它不起作用。

任何帮助将不胜感激！

Answer 1

您可以通过 aria-label 使用 jQuery 效果来显示和隐藏图标。

function handleTopicChange() {

        $("#TopicId").change(function () {
            var selectedTopicId = $(this).children(":selected").val();
            switch (selectedTopicId) {
                case '4a0634d8-6597-4ca4-9f07-a4f50e7addeb':
                    $(".note-insert button[aria-label*='Video']" ).hide();
                    break;
                default:
                    $(".note-insert button[aria-label*='Video']" ).show();
                    break;
            }

        });
    }

隐藏Summernote编辑器工具栏组件

1 个答案: