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

发布于 2024-12-19 23:13:18 字数 183 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巷雨优美回忆 2024-12-26 23:13:18

以下代码将在编辑器中设置文档的背景图像样式（其中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()< 检索内容时，它仍然不会返回应用了样式的文档。 /em>。

如果您使用已经定义了背景图像样式的文档加载 TinyMCE，则 TinyMCE 将渲染它。

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

The following code will set the background-image style of the document within the editor (where ed is a reference to the current TinyMCE instance)

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

Note, I've only tested this on Safari and Firefox on Mac.

The only problem is, even if you are editing the entire HTML document using the fullpage plugin it still won't return the document with the style applied when you retrieve the content using getContent().

If you load TinyMCE with a document that has the background-image style already defined, then TinyMCE will render it.

With this in mind, depending on how you provide the end-user the ability to select the image, one approach would be to provide a way to send the selected image details back to your server at the same time as you save the document and process it there, applying the background-image style.

回复收藏 0 原文

还给你自由 2024-12-26 23:13:18

对已接受答案的补充是，您稍后可以使用 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;

确保在标记之后调用它，否则 document.body 将是未定义的。

我希望这可以帮助其他人寻找一个无需导入 jQuery 的简单抓取解决方案。

Just an addition to the accepted answer is that you can later retrieve the value you set in a similar fashion using getStyle(). Very useful to have the background image show up in a preview easily.

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;

For a popup displaying a preview just use:

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

Make sure this is called after the <body> tag or else document.body will be undefined.

I hope this helps anyone else looking for a simple grab solution without importing jQuery.

回复收藏 0 原文

~没有更多了~