How to use the tinymce/tinymce.DOM function in tinymce

To help you get started, we’ve selected a few tinymce examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Automattic / wp-calypso / client / components / tinymce / plugins / wpcom-autoresize / plugin.js View on Github external
function resize( e ) {
		let deltaSize, resizeHeight, myHeight;
		const DOM = tinymce.DOM;
		const doc = editor.getDoc();
		const { body, documentElement: docElm } = doc;

		if ( ! doc ) {
			return;
		}

		resizeHeight = settings.autoresize_min_height;

		if ( ! body || ( e && e.type === 'setcontent' && e.initial ) || isFullscreen() ) {
			if ( body && docElm ) {
				body.style.overflowY = 'auto';
				docElm.style.overflowY = 'auto'; // Old IE
			}

			return;
github Automattic / wp-calypso / client / components / tinymce / plugins / wpcom / plugin.js View on Github external
function wpcomPlugin( editor ) {
	var DOM = tinymce.DOM,
		each = tinymce.each,
		style;

	editor.on( 'focus', function() {
		window.wpActiveEditor = editor.id;
	} );

	// Replace Read More/Next Page tags with images and apply wpautop
	editor.on( 'BeforeSetContent', function( event ) {
		var title;

		if ( event.content ) {
			if ( event.content.indexOf( '/g, function( match, moretext ) {
github Automattic / wp-calypso / client / extensions / woocommerce / components / compact-tinymce / index.js View on Github external
height: this.props.height + 'px',
			toolbar1: 'formatselect,bold,italic,bullist,numlist,link,blockquote',
			toolbar2: '',
			toolbar3: '',
			toolbar4: '',
			branding: false,
			add_unload_trigger: false,
			setup: setup,
		} );

		// TODO Investigate if there is a better way to do this in the future.
		// The post editor adds a bunch of CSS rules that affect TinyMCE, in root components.
		// To avoid making changes that affect the post editor at this time, we can load a small set of CSS.
		// This mainly affects the text format drop down which renders outside of any elements that we can target.
		tinymce.DOM.loadCSS( '/calypso/tinymce/skins/woocommerce/editor.css' );
		tinymce.DOM.loadCSS( '//s1.wp.com/wp-includes/css/dashicons.css?v=20150727' );
	}
github Automattic / wp-calypso / client / extensions / woocommerce / components / compact-tinymce / index.js View on Github external
redux_store: store,
			height: this.props.height + 'px',
			toolbar1: 'formatselect,bold,italic,bullist,numlist,link,blockquote',
			toolbar2: '',
			toolbar3: '',
			toolbar4: '',
			branding: false,
			add_unload_trigger: false,
			setup: setup,
		} );

		// TODO Investigate if there is a better way to do this in the future.
		// The post editor adds a bunch of CSS rules that affect TinyMCE, in root components.
		// To avoid making changes that affect the post editor at this time, we can load a small set of CSS.
		// This mainly affects the text format drop down which renders outside of any elements that we can target.
		tinymce.DOM.loadCSS( '/calypso/tinymce/skins/woocommerce/editor.css' );
		tinymce.DOM.loadCSS( '//s1.wp.com/wp-includes/css/dashicons.css?v=20150727' );
	}
github Automattic / wp-calypso / client / components / tinymce / plugins / after-the-deadline / plugin.js View on Github external
reposition() {
			const rootNode = editor.dom.getRoot();
			const pos = tinymce.DOM.getPos( editor.getContentAreaContainer() );
			const targetPos = editor.dom.getPos( this.settings.target );

			// Adjust targetPos for scrolling in the editor
			if ( rootNode.nodeName === 'BODY' ) {
				targetPos.x -= rootNode.ownerDocument.documentElement.scrollLeft || rootNode.scrollLeft;
				targetPos.y -= rootNode.ownerDocument.documentElement.scrollTop || rootNode.scrollTop;
			} else {
				targetPos.x -= rootNode.scrollLeft;
				targetPos.y -= rootNode.scrollTop;
			}

			pos.x += targetPos.x;
			pos.y += targetPos.y;

			this.moveTo( pos.x, pos.y + this.settings.target.offsetHeight );
		},
github Automattic / wp-calypso / client / components / tinymce / plugins / touch-scroll-toolbar / plugin.js View on Github external
throttle( ( { target } ) => {
						let action;
						if ( target.scrollLeft === target.scrollWidth - target.clientWidth ) {
							action = 'add';
						} else if ( tinymce.DOM.hasClass( target, 'is-scrolled-full' ) ) {
							action = 'remove';
						}

						if ( action ) {
							const elements = editor.$( target );
							if ( ! elements.hasClass( 'mce-container-body' ) ) {
								elements.add( tinymce.DOM.getParent( target, '.mce-container-body' ) );
							}

							elements[ action + 'Class' ]( 'is-scrolled-full' );
						}
					}, 200 )
				);
github Automattic / wp-calypso / client / components / tinymce / plugins / advanced / plugin.jsx View on Github external
toolbars.each( function( toolbar, i ) {
			const isToolbarVisible = isSmallViewport || i === 0 || isAdvancedVisible;

			toolbar.visible( isToolbarVisible );

			if ( isToolbarVisible ) {
				if ( isSmallViewport ) {
					containerPadding = Math.max( containerPadding, toolbar.getEl().clientHeight );
				} else {
					containerPadding += toolbar.getEl().clientHeight;
				}
			}
		} );

		tinymce.DOM.setStyles( editor.getContainer(), {
			'padding-top': containerPadding,
		} );

		if ( menuButton ) {
			menuButton.active( isAdvancedVisible );
		}
	}