make sure to load rte-content.css
This commit is contained in:
Jacob Overgaard
@@ -1,29 +0,0 @@
|
||||
.umb-embed-holder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.umb-embed-holder>* {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.umb-embed-holder[data-mce-selected] {
|
||||
outline: 2px solid var(--uui-palette-spanish-pink-light);
|
||||
}
|
||||
|
||||
.umb-embed-holder::before {
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.umb-embed-holder[data-mce-selected]::before {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
|
||||
*[data-mce-selected='inline-boundary'] {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
outline: 2px solid var(--uui-palette-spanish-pink-light);
|
||||
}
|
||||
49
src/Umbraco.Web.UI.Client/src/css/rte-content.css
Normal file
49
src/Umbraco.Web.UI.Client/src/css/rte-content.css
Normal file
@@ -0,0 +1,49 @@
|
||||
.umb-macro-holder {
|
||||
border: 3px dotted red;
|
||||
padding: 7px;
|
||||
margin: 3px;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.umb-macro-holder::after {
|
||||
content: 'Macros are no longer supported. Please use the block picker instead.';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.umb-embed-holder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.umb-embed-holder > * {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.umb-embed-holder[data-mce-selected] {
|
||||
outline: 2px solid var(--uui-palette-spanish-pink-light);
|
||||
}
|
||||
|
||||
.umb-embed-holder::before {
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.umb-embed-holder[data-mce-selected]::before {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
|
||||
*[data-mce-selected='inline-boundary'] {
|
||||
background: rgba(0, 0, 0, 0.025);
|
||||
outline: 2px solid var(--uui-palette-spanish-pink-light);
|
||||
}
|
||||
@@ -762,7 +762,7 @@ export const data: Array<UmbMockDataTypeModel> = [
|
||||
'+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-s[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,video[*],audio[*],picture[*],source[*],canvas[*]',
|
||||
},
|
||||
{ alias: 'invalidElements', value: 'font' },
|
||||
// { alias: 'stylesheets', value: ['/css/rte-content.css'] },
|
||||
{ alias: 'stylesheets', value: [] },
|
||||
{
|
||||
alias: 'toolbar',
|
||||
value: [
|
||||
|
||||
@@ -40,6 +40,9 @@ export const data: Array<DocumentResponseModel> = [
|
||||
Some value for the RTE with an <a href="https://google.com">external link</a> and an <a href="/{localLink:umb://document/c05da24d7740447b9cdcbd8ce2172e38}">internal link</a> foo foo
|
||||
</p>
|
||||
<div class="umb-macro-holder TestMacro umb-macro-mce_1 mceNonEditable"><!-- <?UMBRACO_MACRO macroAlias="TestMacro" /> --><ins>Macro alias: <strong>TestMacro</strong></ins></div>
|
||||
<p>The following tests the embed plugin:</p>
|
||||
<div class="mceNonEditable umb-embed-holder" data-embed-height="240" data-embed-width="360" data-embed-constrain="false"><iframe width="360" height="240" src="https://www.youtube.com/embed/QRIWz9SotY4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" title="Sleep Token - The Summoning"></iframe></div>
|
||||
<p>End of test content</p>
|
||||
`,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -16,6 +16,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/
|
||||
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
|
||||
import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet';
|
||||
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
|
||||
import rteContentUrl from './css/rte_content.css?url';
|
||||
|
||||
@customElement('umb-input-tiny-mce')
|
||||
export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
|
||||
@@ -179,6 +180,8 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
|
||||
(stylesheetPath: string) => `${this.#serverUrl}/css/${stylesheetPath.replace(/\\/g, '/')}`,
|
||||
) ?? [];
|
||||
|
||||
stylesheets.push('/umbraco/backoffice/css/rte-content.css');
|
||||
|
||||
// create an object by merging the configuration onto the fallback config
|
||||
const configurationOptions: RawEditorOptions = {
|
||||
...defaultFallbackConfig,
|
||||
@@ -218,7 +221,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) {
|
||||
autoresize_bottom_margin: 10,
|
||||
body_class: 'umb-rte',
|
||||
contextMenu: false,
|
||||
inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder',
|
||||
inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder,.umb-macro-holder',
|
||||
menubar: false,
|
||||
paste_remove_styles_if_webkit: true,
|
||||
paste_preprocess: pastePreProcessHandler,
|
||||
|
||||
Reference in New Issue
Block a user