Wordpress editor: lock editing part of page - wordpress

My client wants to edit pages content in Wordpress. I had to disable visual editor because it ruins custom html. The problem is my client isn't familiar with HTML.
What I want is to lock part of source code in WP editor for ex. in line
<div class="whatever">Lorem ipsum</div>
I want to allow him to modify only "Lorem ipsum" part.
How can I do that?

well you can provide a textarea for him to enter text and then replace html inside element with class whatever, so basically you control regions of html where modifications can be made instead of whole page, of-course you need to write some code to do so.
I would simply mark the editable regions with some kinda class, and then on page load add some script which will pick all regions with that clas and show a small editable button there, on click of those button a shim with text area would pop up where user can add his text/html and on done, the markup would be injected inside the element. Later on save, the whole page would can be saved, little tricky but can work :)

Related

Adding link with button in drupal

I want to add a button in my drupal website which can redirect me to any specified article/page. Any suggestion will be helpful.
Use the Link module.
It allows you to add a field to your content type that has an href value and a Text value. Then you can change it's display output to output title as link which will output a hyperlink with the text you selected, and once clicked will redirect you to whatever href you set.
If you want to style it to look like a button you can add a CSS class to the Link field you added in your content type under manage fields >> Edit the link field.
I am using Bootstrap subtheme so the button CSS classes are already there for me. i simply add btn btn-default if I want to show a button instead of a hyperlink.
PS: DO NOT CREATE BUTTONS IN A BLOCK. Classes should never go into a block. And if you have clients who are going to use that site, they can mess stuff up pretty fast.
Create Block and put html code for button in block. Enable block on pages where you want.
While putting html code of button into block, please make sure that you have selected "Full Html" filter.

Link jQuery-UI/Kendo-UI to make live changes to elements in page designer

I apologize if the title was not clear enough. I am working on a project where a user can design a page (something like Wix). I am continuing on a project left in-complete by some developer. The sequence of action is.
The user clicks on a link which adds an element on the page (e.g. textElement, picture, slider...)
There is an edit button for each element. Clicking which opens a dialog box.
On the dialog box there are sliders and color picker drawn using Kendo-UI. Using them the user can change the style settings for the element (e.g Font-Color, BG-Color, Font Size...)
What I want now is to apply/show the changes live on that element. I have the id available for each element. I can bind each of the style selectors and apply the changes live to the text element. But that does not seem the right choice as in future we might add another style selector in the dialog box, and that would mean adding the code for binding this new selector.
What I wanted to know was that is there an alternate or preferably easy way to do this?
Regards
Share some code with the basic idea that you follow, cause it's not getting clear what you did. It sounds like you can use the MVVM framework feature to help you for that.

How to get rendered XHTML from a Wicket panel

Users of my Wicket application should be able to edit some of the panels' output (X)HTML. There will be a button or link on each panel that, when clicked, will get the rendered content and use/open an editor such as TinyMCE.
I think I want some sort of getRenderedXTML() method for the panel, but have no clue how to get the rendered output programmatically. How can I do this?
You can likely get the generated html just before it's sent to the browser, but this is a bad approach as reconnecting the edited html back the the generating fragments will be painful if not impossible.
Rather than actually trying to edit the dynamic markup, make the user-editable stuff part of the data. Show it in a Label and use setEscapeModelStrings(false) to allow the label to properly render the html fragment. On click of your link, replace that label with a textarea with tinymce behavior attached.
There is a some tinymce support in wicketstuff-core that can help with this, and this Wicket by Example article shows a bit of how to use it, though it may be a bit out-of-date, and references document locations no longer available.

Asp.net ajax control toolkit html editor content disappears

I am doing a design screen for my customers and i use jquery sortable portlets.
i put the html editor each column.When u write something into the editor then drag drop the portlets the editor's content is disappearing.After droping it,i change the active mode of editor to preview and design,then i see that content is there.How can i solve this problem ?
I play now a little with the jquery sortable portlets and I notice that its not just move the position of each div, but redesign the full struct of the divs on each drag-drop.
This is mean that is probably copy/paste the inside div on every moving action.
Now your editor is initialize what its show, and from the moment that the portless is move the div content to other possition, the initialize from the editor is lost.
To gain it again I suggest to reinitialize the editor after any drag-drop.

How to show content from contentPlaceholder inline

I have a page where in my masterpage have a toolbar with a "Home" button to the far left. This button is not in a contentplaceholder but on the page.
I want to have the opportunity for derived pages to add their own controls or whatever to the toolbar to be whown after the "home" button. But how to do this?
I have tried to put in a contentplaceholder, but it seems that I cannot get it to show inline with the other stuff, it breaks and the content of the contentplaceholder is shown below the button instead.
Does anyone know how to solve this?
Update:
Regarding the comment from #Remy below:
Do you, by chance, have a line break
in the masterpage's markup between the
button and contentplaceholder?
I started looking and because I'm a bit inexperienced at designing with CSS (when aligning text and an image vertically center). I created a table that enclosed each button - forgot that table are block elements, so there was my line break.
You can make the toolbar in the MasterPage available through a public property. Then you can access the master page from the content using Content.Master propery. Then you can add the controls to the toolbar as you add any runtime control.
Also, you need to Typecase the Content.Master to the type of your master file class before accessing its public property.
There are many ways:
from derived page you can get to the master page content over Page.MasterPage, and manipulate by controls located there. So you just need to allocate at master server-div or Panel and locate it by Page.MasterPage.FindControl to populate with particular inline elements
ContentPlaceholder does nothing with HTML layout, so you header can looks like:
<div>
<span> <!-- your Home button declaration goes there --> </span>
<span> <asp:ContentPlaceHolder ... </span>
</div>

Resources