我正在使用TinyMCE 4.7.9，当我通过TinyMCE弹出窗口插入图像时，它会插入<img src="myimage" />的HTML等等。我知道我可以使用外观部分添加一个类图片弹出窗口，但是有没有办法让class="img-responsive"（或者每个插入的图片总是有style="width:100%; height:auto;"）
我看过不同的地方但似乎无法解决这个问题。
我已尝试过以下建议的条目，但没有奏效。我正在为我的项目使用一个自定义的plugin.js文件 - 但自定义图像的plugin.js中的JS我真的不明白 - 我想要做的是，在高级选项卡中总是默认它在样式框中的值为宽度：100％;高度：汽车;
这是JS可以知道微小的mce的人告诉我怎么做 - 我看到有一段代码叫做e。设置。 image_advtab但是我不知道如何在那里做 - 有人帮忙吗？
tinymce.PluginManager.add("image", function(e) {
function openmanager() {
var win, data, dom = e.dom,
imgElm = e.selection.getNode();
var width, height, imageListCtrl;
win = e.windowManager.open({
title: 'Image Manager',
data: data,
classes: 'tinyfilemanager.net',
file: tfm_path + '/dialog.aspx?type=1&editor=' + e.id + '&lang=' + tinymce.settings.language,
filetype: 'image',
width: 900,
height: 600,
inline: 1
//,
//buttons: [{
// text: 'Close',
// id: 'btnclosefilemanager',
// onclick: 'close',
// classes: 'mcebuttonleft mcebtncancel'
//}]
})
}
function t() {
function t() {
var t = [{
text: "None",
value: ""
}];
return tinymce.each(e.settings.image_list, function(e) {
t.push({
text: e.text || e.title,
value: e.value || e.url,
menu: e.menu
})
}), t
}
function n(e) {
var t, n, r, i;
t = a.find("#width")[0], n = a.find("#height")[0], r = t.value(), i = n.value(), a.find("#constrain")[0].checked() && l && c && r && i && (e.control == t ? (i = Math.round(r / l * i), n.value(i)) : (r = Math.round(i / c * r), t.value(r))), l = r, c = i
}
function r() {
function t(t) {
t.onload = t.onerror = function() {
t.onload = t.onerror = null, e.selection.select(t), e.nodeChanged()
}
}
var n = a.toJSON();
"" === n.width && (n.width = null), "" === n.height && (n.height = null), "" === n.style && (n.style = null), n = {
src: n.src,
alt: n.alt,
width: n.width,
height: n.height,
style: n.style
}, f ? d.setAttribs(f, n) : (n.id = "__mcenew", e.insertContent(d.createHTML("img", n)), f = d.get("__mcenew"), d.setAttrib(f, "id", null)), t(f)
}
function i(e) {
return e && (e = e.replace(/px$/, "")), e
}
function o() {
function e(e) {
return e.length > 0 && /^[0-9]+$/.test(e) && (e += "px"), e
}
var t = a.toJSON(),
n = d.parseStyle(t.style);
delete n.margin, n["margin-top"] = n["margin-bottom"] = e(t.vspace), n["margin-left"] = n["margin-right"] = e(t.hspace), n["border-width"] = e(t.border), a.find("#style").value(d.serializeStyle(d.parseStyle(d.serializeStyle(n))))
}
var a, s, l, c, u, d = e.dom,
f = e.selection.getNode();
l = d.getAttrib(f, "width"), c = d.getAttrib(f, "height"), "IMG" != f.nodeName || f.getAttribute("data-mce-object") ? f = null : s = {
src: d.getAttrib(f, "src"),
alt: d.getAttrib(f, "alt"),
width: l,
height: c
}, e.settings.image_list && (u = {
name: "target",
type: "listbox",
label: "Image list",
values: t(),
onselect: function(e) {
var t = a.find("#alt");
(!t.value() || e.lastControl && t.value() == e.lastControl.text()) && t.value(e.control.text()), a.find("#src").value(e.control.value())
}
});
var p = [{
type: 'container',
layout: 'flex',
classes: 'combobox has-open',
label: 'Source',
direction: 'row',
items: [{
name: 'src',
type: 'textbox',
filetype: 'image',
size: 35,
classes: 'img_' + e.id,
autofocus: true
}, {
name: 'upl_img',
type: 'button',
classes: 'btn open',
icon: 'browse',
onclick: openmanager,
tooltip: 'Upload image'
}]
}, u, {
name: "alt",
type: "textbox",
label: "Image description"
}, {
type: "container",
label: "Dimensions",
layout: "flex",
direction: "row",
align: "center",
spacing: 5,
items: [{
name: "width",
type: "textbox",
maxLength: 3,
size: 3,
onchange: n
}, {
type: "label",
text: "x"
}, {
name: "height",
type: "textbox",
maxLength: 3,
size: 3,
onchange: n
}, {
name: "constrain",
type: "checkbox",
checked: !0,
text: "Constrain proportions"
}]
}];
e.settings.image_advtab ? (f && (s.hspace = i(f.style.marginLeft || f.style.marginRight), s.vspace = i(f.style.marginTop || f.style.marginBottom), s.border = i(f.style.borderWidth), s.style = e.dom.serializeStyle(e.dom.parseStyle(e.dom.getAttrib(f, "style")))), a = e.windowManager.open({
title: "Edit image",
data: s,
bodyType: "tabpanel",
body: [{
title: "General",
type: "form",
items: p
}, {
title: "Advanced",
type: "form",
pack: "start",
items: [{
label: "Style",
name: "style",
type: "textbox"
}, {
type: "form",
layout: "grid",
packV: "start",
columns: 2,
padding: 0,
alignH: ["left", "right"],
defaults: {
type: "textbox",
maxWidth: 50,
onchange: o
},
items: [{
label: "Vertical space",
name: "vspace"
}, {
label: "Horizontal space",
name: "hspace"
}, {
label: "Border",
name: "border"
}]
}]
}],
onSubmit: r
})) : a = e.windowManager.open({
title: "Edit image",
data: s,
body: p,
onSubmit: r
})
}
e.addButton("image", {
icon: "image",
tooltip: "Insert/edit image",
onclick: t,
stateSelector: "img:not([data-mce-object])"
}), e.addMenuItem("image", {
icon: "image",
text: "Insert image",
onclick: t,
context: "insert",
prependToContext: !0
})
});
答案 0 :(得分：1)
您需要编辑TinyMCE初始化器：
image_class_list: [
{title: 'img-responsive', value: 'img-responsive'},
]
点击此处的文档：https://docs.scipy.org/doc/scipy/reference/optimize.nonlin.html