Umbraco 是否将类添加到图像媒体类型？

在设置->媒体类型“图像”下定义。我使用的是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" />

---

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

我认为为了实现您想要的，您需要查看TinyMce配置

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

~/umbraco\u client/tinymce3/plugins/umbracoimg/img/image.js

    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
    });

---

希望有帮助。

您可以在~/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
    });

---

明白了。在我的例子中，我在~/Umbraco/Js/Umbraco.service.Js中添加了类：'img-responsive'。我用的是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);
                                }
                            }
                        });
                    });


                }
            });
        },

---

嗨@Jason94，你是怎么做到的？您在~/umbraco_client/tinymce3/plugins/umbracoimg/Js/image.Js中做了哪些更改。我已经在tinymce.extend中添加了类：“img responsive”，但当我在富文本框编辑器中添加图像时，它仍然没有显示。我在tinymce.extend中添加了类：“img responsive”，但当我在富文本框编辑器中添加图像时，它仍然没有显示。我应该在~/umbraco_client/tinymce3/plugins/umbracoimg/Js/image.Js中做任何其他更改吗？谢谢你回收了你的申请？是的，我回收了Richard。我更改了客户端依赖项版本并重新保存了web.config