wordpress editor hook and regex to parse content for attribute values

  • Resolved willrad

    (@willrad)


    7 years, 2 months ago

    Anyone have examples of hooks to parse the editor’s contents before tloaded and parse through it for regex’d values to change. I am inserting html content and an inline style. I need to add the already saved css to be loaded as a style in the editor on load.

    menu: [{
	text: 'Orbit Spinner',
	onclick: function() {
	editor.windowManager.open({
	title: 'Insert Orbit Spinner Icon',
	body: [
	{
	type: 'ColorPicker',
	name: 'color',
	label: 'Orbit Spinner Icon Color Picker'
	},
	{
	type: 'listbox',
	name: 'pixel_size',
	label: 'Size',
	'values': [{
	text: '55px',
	value: '55px'
	},
	{
	text: '25px',
	value: '25px'
	},
	{
	text: '100px',
	value: '100px'
	},
	]
	},
	],
	onsubmit: function(e) {
	var random_string_thingy;
	random_string_thingy = Math.random().toString(36).substring(7);
	tinyMCE.activeEditor.dom.addStyle('.orbit-spinner-' + random_string_thingy + ' .orbit:nth-child(-n+3){border-color:' + e.data.color + '!important;}.orbit-spinner-' + random_string_thingy + ' {height:' + e.data.pixel_size + '!important;width:' + e.data.pixel_size + '!important;}');
	editor.insertContent('<div class="orbit-spinner orbit-spinner-' + random_string_thingy + '"><div class="orbit"></div><div class="orbit"></div><div class="orbit"></div></div><style>.orbit-spinner-' + random_string_thingy + ' .orbit:nth-child(-n+3){border-color:' + e.data.color + '!important;}.orbit-spinner-' + random_string_thingy + ' {height:' + e.data.pixel_size + '!important;width:' + e.data.pixel_size + '!important;}</style>');
	}
	});
	}
	},

    I can add the css to the div’s attributes and add it to the list of elements to preserve the data.
    data-es=".orbit-spinner-' + random_string_thingy + ' .orbit:nth-child(-n+3){border-color:' + e.data.color + '!important;}.orbit-spinner-' + random_string_thingy + ' {height:' + e.data.pixel_size + '!important;width:' + e.data.pixel_size + '!important;}"

    Looking for the hook to parse the post content before the editor loads mostly but anything might help.

    • This topic was modified 7 years, 2 months ago by willrad.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    The filter ‘the_editor_content’ manages content before the editor is output to the browser. The other option is to parse the content when it’s submitted to the server. For that, use the ‘wp_insert_post_data’ filter. Here your callback is passed all post data, of which content is one element.

    I have to say though, this scheme strikes me as a bad idea. You are free to do what you like with your own site of course, so feel free to ignore the rest of this post if you are dead set on this scheme. Adding style attributes to HTML elements makes future site maintenance, changes, and upgrades very difficult. It’s often inefficient as well. Nearly all serious web devs would agree that this is generally Doing it Wrong?.

    You can apply external stylesheets to the visual editor tab content. See Editor Style. Stylesheets can always be added with wp_enqueue_style(). If nothing else, place inline styles in the webpage’s head section by hooking the “wp_print_scripts” action. Even this is much preferred over element styles. It can help your webpages load a bit faster.

    You should avoid the !important modifier if at all possible, for the same reasons element styles are discouraged. You generally can avoid the need by using more specific selectors and ensuring your style is loaded after the style you want to override. Hooking “wp_print_scripts” with a large priority argument number and outputting inline style is a good way to give your style the most importance without resorting to !important. Granted, in rare cases, !important may be your best recourse.

    Adding styles through JavaScript should also be a mechanism of last resort. Mainly because it results in a poor user experience. There is often a noticeable delay between the page loading and the styles being applied. It causes your site to appear more sluggish and unresponsive than it really is.

    Thread Starter willrad

    (@willrad)

    @bcworkz
    Thanks for taking the time to read and point me back in the right direction.

    You are right, I am moving back to shortcodes and a modal dialog with visual examples for selection. Fighting inline styles in the editor is definitely messy business. Can’t imagine anyone wants me potentially modifying every post with regular expressions just to use animated css in a post either. Shortcake still looks promising for a rendered shortcode preview in the editor, later version maybe.

    Will

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘wordpress editor hook and regex to parse content for attribute values’ is closed to new replies.