Question

我的网站上有一个TinyMCE编辑器。我添加了iBrowser，以便人们可以上传图片。没关系。我也试过让他们改变他们正在编辑的网站的背景但没有成功：如果我在背景中添加带有图像的HTML div并返回编辑器并按回车键，它会将我移动到图像下方而不是另一条线。

如何让用户在TinyMCE中更改网站的背景图片？

Answer 1

以下代码将在编辑器中设置文档的 background-image 样式（其中 ed 是对当前TinyMCE实例的引用）

var edObj = ed.dom.getRoot();

//Set the Style "background-image" to the button's color value.
ed.dom.setStyle(edObj, 'background-image', "url(some_background_image.jpg)");

注意，我只在Mac上的Safari和Firefox上测试了这个。

唯一的问题是，即使您使用 fullpage 插件编辑整个HTML文档，当您使用 getContent检索内容时，它仍然不会返回应用了样式的文档（）

如果您使用已定义 background-image 样式的文档加载TinyMCE，则TinyMCE将呈现它。

考虑到这一点，根据您为最终用户提供选择图像的方式，一种方法是提供一种方法，将您选择的图像详细信息发送回服务器，同时保存在那里记录并处理它，应用背景图像样式。

Answer 2

只是对接受的答案的补充是，您可以稍后使用getStyle()以类似的方式检索您设置的值。将背景图像轻松显示在预览中非常有用。

var edObj = ed.dom.getRoot();
//gets the value that looks like "url(/someImage.jpg)"
//notice getStyle() instead of setStyle
//The boolean at the end is if you want the computed style
var background = ed.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

对于显示预览的弹出窗口，请使用：

var edObj = tinyMCEPopup.editor.dom.getRoot();
var background = tinyMCEPopup.editor.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

确保在<body>标记后调用此标记，否则document.body将被取消定义。

我希望这可以帮助其他人在不导入jQuery的情况下寻找简单的抓取解决方案。

如何让TinyMCE的用户改变背景？

2 个答案: