LOADING

测试富文本编辑器支持度

未分类 1年前 (2021) 戎一人
106 16 0



写在前面:

在2019年APP比比小程序就使用了Parser组件来支持小程序的富文本显示,使用下来除了包大小小巧以外,对多端小程序的支持也很完美。

现在Parser升级改名为mp-html,比比系列小程序基于uni-app继续使用该组件展示富文本,并对Wordpress的新版编辑器的常用模块做了优化适配。

源码:https://github.com/jin-yufeng/mp-html


段落标题

H1标题

H2标题

H3标题

H4标题

H5标题

H6标题




段落描述

这是一段文本介绍,比比小程序支持最新版本的Wordpress富文本编辑器,尽可能全的匹配所有小组件。

引用

这是来自引用的内容

引用副标题


图片

单一图片

测试富文本编辑器支持度

宽屏图片

测试富文本编辑器支持度

图集


视频

常规视频

1:1视频

竖屏视频


音频

支持自定义音频标题、作者和封面


代码高亮

支持高亮常用的markup+css+clike+javascript+json+json5

.mp-nav-tab-wrapper, .wrap h2.mp-nav-tab-wrapper, h1.mp-nav-tab-wrapper {
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding-top: 9px;
    padding-bottom: 0;
    line-height: inherit;
}
.mp-nav-tab-active, .mp-nav-tab-active:focus, .mp-nav-tab-active:focus:active, .mp-nav-tab-active:hover {
	color: #000;
    background: #f1f1f1!important;
	border-bottom: 1px solid #f1f1f1!important;
}
.mp-nav-tab-active {
    margin-bottom: -1px;
    color: #444;
}
.mp-nav-tab-active, .mp-nav-tab:focus:active {
    box-shadow: none;
}
.mp-nav-tab {
    float: left;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-left: .5em;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    background: #e5e5e5;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
}
.mp-nav-tab:hover {
	color: #000;
    background: #f1f1f1!important;
}

/**
 * @file Functionality for the plugin install screens.
 *
 * @output wp-admin/js/plugin-install.js
 */

/* global tb_click, tb_remove, tb_position */

jQuery( document ).ready( function( $ ) {

	var tbWindow,
		$iframeBody,
		$tabbables,
		$firstTabbable,
		$lastTabbable,
		$focusedBefore = $(),
		// $uploadViewToggle = $( '.upload-view-toggle' ),
		$wrap = $ ( '.wrap' ),
		$body = $( document.body );

	window.tb_position = function() {
		var width = $( window ).width(),
			H = $( window ).height() - ( ( 792 < width ) ? 60 : 20 ),
			W = ( 792 < width ) ? 772 : width - 20;

		tbWindow = $( '#TB_window' );

		if ( tbWindow.length ) {
			tbWindow.width( W ).height( H );
			$( '#TB_iframeContent' ).width( W ).height( H );
			tbWindow.css({
				'margin-left': '-' + parseInt( ( W / 2 ), 10 ) + 'px'
			});
			if ( typeof document.body.style.maxWidth !== 'undefined' ) {
				tbWindow.css({
					'top': '30px',
					'margin-top': '0'
				});
			}
		}

		return $( 'a.thickbox' ).each( function() {
			var href = $( this ).attr( 'href' );
			if ( ! href ) {
				return;
			}
			href = href.replace( /&width=[0-9]+/g, '' );
			href = href.replace( /&height=[0-9]+/g, '' );
			$(this).attr( 'href', href + '&width=' + W + '&height=' + ( H ) );
		});
	};

	$( window ).on( 'resize', function() {
		tb_position();
	});

	/*
	 * Custom events: when a Thickbox iframe has loaded and when the Thickbox
	 * modal gets removed from the DOM.
	 */
	$body
		.on( 'thickbox:iframe:loaded', tbWindow, function() {
			/*
			 * Return if it's not the modal with the plugin details iframe. Other
			 * thickbox instances might want to load an iframe with content from
			 * an external domain. Avoid to access the iframe contents when we're
			 * not sure the iframe loads from the same domain.
			 */
			if ( ! tbWindow.hasClass( 'plugin-details-modal' ) ) {
				return;
			}

			iframeLoaded();
		})
		.on( 'thickbox:removed', function() {
			// Set focus back to the element that opened the modal dialog.
			// Note: IE 8 would need this wrapped in a fake setTimeout `0`.
			$focusedBefore.trigger( 'focus' );
		});

	function iframeLoaded() {
		var $iframe = tbWindow.find( '#TB_iframeContent' );

		// Get the iframe body.
		$iframeBody = $iframe.contents().find( 'body' );

		// Get the tabbable elements and handle the keydown event on first load.
		handleTabbables();

		// Set initial focus on the "Close" button.
		$firstTabbable.trigger( 'focus' );

		/*
		 * When the "Install" button is disabled (e.g. the Plugin is already installed)
		 * then we can't predict where the last focusable element is. We need to get
		 * the tabbable elements and handle the keydown event again and again,
		 * each time the active tab panel changes.
		 */
		$( '#plugin-information-tabs a', $iframeBody ).on( 'click', function() {
			handleTabbables();
		});

		// Close the modal when pressing Escape.
		$iframeBody.on( 'keydown', function( event ) {
			if ( 27 !== event.which ) {
				return;
			}
			tb_remove();
		});
	}

	/*
	 * Get the tabbable elements and detach/attach the keydown event.
	 * Called after the iframe has fully loaded so we have all the elements we need.
	 * Called again each time a Tab gets clicked.
	 * @todo Consider to implement a WordPress general utility for this and don't use jQuery UI.
	 */
	function handleTabbables() {
		var $firstAndLast;
		// Get all the tabbable elements.
		$tabbables = $( ':tabbable', $iframeBody );
		// Our first tabbable element is always the "Close" button.
		$firstTabbable = tbWindow.find( '#TB_closeWindowButton' );
		// Get the last tabbable element.
		$lastTabbable = $tabbables.last();
		// Make a jQuery collection.
		$firstAndLast = $firstTabbable.add( $lastTabbable );
		// Detach any previously attached keydown event.
		$firstAndLast.off( 'keydown.wp-plugin-details' );
		// Attach again the keydown event on the first and last focusable elements.
		$firstAndLast.on( 'keydown.wp-plugin-details', function( event ) {
			constrainTabbing( event );
		});
	}

	// Constrain tabbing within the plugin modal dialog.
	function constrainTabbing( event ) {
		if ( 9 !== event.which ) {
			return;
		}

		if ( $lastTabbable[0] === event.target && ! event.shiftKey ) {
			event.preventDefault();
			$firstTabbable.trigger( 'focus' );
		} else if ( $firstTabbable[0] === event.target && event.shiftKey ) {
			event.preventDefault();
			$lastTabbable.trigger( 'focus' );
		}
	}

	/*
	 * Open the Plugin details modal. The event is delegated to get also the links
	 * in the plugins search tab, after the Ajax search rebuilds the HTML. It's
	 * delegated on the closest ancestor and not on the body to avoid conflicts
	 * with other handlers, see Trac ticket #43082.
	 */
	$( '.wrap' ).on( 'click', '.thickbox.open-plugin-details-modal-new', function( e ) {
		// The `data-title` attribute is used only in the Plugin screens.
		var title = $( this ).data( 'title' ) ?
			wp.i18n.sprintf(
				// translators: %s: Plugin name.
				wp.i18n.__( 'Plugin: %s' ),
				$( this ).data( 'title' )
			) :
			wp.i18n.__( 'Plugin details' );

		e.preventDefault();
		e.stopPropagation();

		// Store the element that has focus before opening the modal dialog, i.e. the control which opens it.
		$focusedBefore = $( this );

		tb_click.call(this);

		// Set ARIA role, ARIA label, and add a CSS class.
		tbWindow
			// .attr({
			// 	'role': 'dialog',
			// 	'aria-label': wp.i18n.__( 'Plugin details' )
			// })
			.addClass( 'plugin-details-modal' );

		// Set title attribute on the iframe.
		tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );
	});

	/* Plugin install related JS */
	$( '#plugin-information-tabs a' ).on( 'click', function( event ) {
		var tab = $( this ).attr( 'name' );
		event.preventDefault();

		// Flip the tab.
		$( '#plugin-information-tabs a.current' ).removeClass( 'current' );
		$( this ).addClass( 'current' );

		// Only show the fyi box in the description section, on smaller screen,
		// where it's otherwise always displayed at the top.
		if ( 'description' !== tab && $( window ).width() < 772 ) {
			$( '#plugin-information-content' ).find( '.fyi' ).hide();
		} else {
			$( '#plugin-information-content' ).find( '.fyi' ).show();
		}

		// Flip the content.
		$( '#section-holder div.section' ).hide(); // Hide 'em all.
		$( '#section-' + tab ).show();
	});

	// /*
	//  * When a user presses the "Upload Plugin" button, show the upload form in place
	//  * rather than sending them to the devoted upload plugin page.
	//  * The `?tab=upload` page still exists for no-js support and for plugins that
	//  * might access it directly. When we're in this page, let the link behave
	//  * like a link. Otherwise we're in the normal plugin installer pages and the
	//  * link should behave like a toggle button.
	//  */
	// // if ( ! $wrap.hasClass( 'plugin-install-tab-upload' ) ) {
	// // 	$uploadViewToggle
	// // 		.attr({
	// // 			role: 'button',
	// // 			'aria-expanded': 'false'
	// // 		})
	// // 		.on( 'click', function( event ) {
	// // 			event.preventDefault();
	// // 			$body.toggleClass( 'show-upload-view' );
	// // 			$uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
	// // 		});
	// // }
});


链接

复制链接

https://www.appbeebee.com/

复制文本

点击复制APP比比

跳转小程序链接

跳转到微信读书小程序

跳转其他页面

跳转到单页面

跳转到首页

跳转锚点-段落描述

跳转锚点-写在前面


按钮

单个按钮

按钮组


列表

有序列表

  1. 列表内容1
  2. 列表内容2
  3. 列表内容3

无序列表

  • 列表内容1
  • 列表内容2
  • 列表内容3

表格

定义宽度可横向滑动的表格

标题 1 标题 2 标题 3 标题 4
内容 1 内容 1-1 内容 1-2 内容 1-3
内容 2 内容 2-1 内容 2-2 内容 2-3
内容 3 内容 3-1 内容 3-2 内容 3-3
内容 4 内容 4-1 内容 4-2 内容 4-3

默认100%宽度的表格

标题 1 标题 2 标题 3 标题 4
内容 1 内容 1-1 内容 1-2 内容 1-3
内容 2 内容 2-1 内容 2-2 内容 2-3
内容 3 内容 3-1 内容 3-2 内容 3-3
内容 4 内容 4-1 内容 4-2 内容 4-3

版权声明:戎一人 发表于 2021年6月13日 下午7:15。
转载请注明:测试富文本编辑器支持度 | 至荐

相关文章

没有相关内容!