如何让TinyMCE的用户改变背景

How to enable user of TinyMCE to change background?

本文关键字：用户 改变 背景 TinyMCE      更新时间：2023-09-26

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

如何让用户在TinyMCE改变网站的背景图像?

下面的代码将在编辑器中设置文档的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将呈现它。

考虑到这一点，根据您如何为最终用户提供选择图像的能力，一种方法是在保存文档并在那里处理它的同时，提供一种将所选图像细节发送回服务器的方法，并应用background-image样式。

除了可以接受的答案之外，还可以稍后使用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

相关文章：