Question

在设置 - ＆gt;媒体类型“图像”下定义。我正在使用Bootstrap，并且确实希望默认情况下将类class="img-responsive"添加到它。

我查看了该媒体类型的通用属性，但似乎找不到我可以修改类的那个。

现在，在内容页面中添加图片会产生：

<img style="width: 281.25px; height:500px;" src="/media/1004/foo.jpg?width=281.25&amp;height=500" alt="foo.jpg" rel="1087" />

我真正想要的地方：

<img class="img-responsive" src="/media/1004/foo.jpg?width=281.25&amp;height=500" alt="foo.jpg" rel="1087" />

手动添加该类会使一切看起来都很好，所以默认情况下使用它会很好：）

Answer 1

知道了。在我的情况下，我添加了课程：＆＃39; img-responsive＆＃39;在〜/ Umbraco / Js / umbraco.service.js。我使用的是Umbraco7

在这个块中：

/**
        * @ngdoc method
        * @name umbraco.services.tinyMceService#createMediaPicker
        * @methodOf umbraco.services.tinyMceService
        *
        * @description
        * Creates the umbrco insert media tinymce plugin
        *
        * @param {Object} editor the TinyMCE editor instance        
        * @param {Object} $scope the current controller scope
        */
        createMediaPicker: function (editor) {
            editor.addButton('umbmediapicker', {
                icon: 'custom icon-picture',
                tooltip: 'Media Picker',
                onclick: function () {

                    var selectedElm = editor.selection.getNode(),
                        currentTarget;


                    if(selectedElm.nodeName === 'IMG'){
                        var img = $(selectedElm);
                        currentTarget = {
                            altText: img.attr("alt"),
                            url: img.attr("src"),
                            id: img.attr("rel")
                        };
                    }

                    userService.getCurrentUser().then(function(userData) {
                        dialogService.mediaPicker({
                            currentTarget: currentTarget,
                            onlyImages: true,
                            showDetails: true,
                            startNodeId: userData.startMediaId,
                            callback: function (img) {

                                if (img) {

                                    var data = {
                                        alt: img.altText || "",
                                        src: (img.url) ? img.url : "nothing.jpg",
                                        rel: img.id,
                                        id: '__mcenew',
                                        class:'img-responsive' //I Added it here
                                    };

                                    editor.insertContent(editor.dom.createHTML('img', data));

                                    $timeout(function () {
                                        var imgElm = editor.dom.get('__mcenew');
                                        var size = editor.dom.getSize(imgElm);

                                        if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
                                            var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);

                                            var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
                                            editor.dom.setAttrib(imgElm, 'style', s);
                                            editor.dom.setAttrib(imgElm, 'id', null);

                                            if (img.url) {
                                                var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
                                                editor.dom.setAttrib(imgElm, 'data-mce-src', src);
                                            }
                                        }
                                    }, 500);
                                }
                            }
                        });
                    });


                }
            });
        },

Answer 2

我认为为了达到你想要的效果，你需要看看TinyMce配置。

经过快速检查后，我认为这是您需要开始寻找的地方：

〜/ umbraco_client / tinymce3 /插件/ umbracoimg / IMG / image.js

希望有所帮助。

Answer 3

默认情况下你可以在〜/ umbraco_client / tinymce3 / plugins / umbracoimg / img / image.js中添加class属性

    tinymce.extend(args, {
        src: nl.src.value,
        width: nl.width.value,
        height: nl.height.value,
        alt: nl.alt.value,
        title: nl.alt.value,
        class: 'img-responsive',
        rel: nl.orgWidth.value + ',' + nl.orgHeight.value
    });

在Image Media Type中添加一个类？

3 个答案: