How to create in-context editing? - javascript

My company is building a CMS. As a front-end web developer, I am asked to build a 'in-context editing' feature.
You can see an example here http://www.concrete5.org/documentation/general-topics/in-context-editing/
I want to know what kind of program should we know to build this? Can this be achieved with just JavaScript or some front end tools or does it need some server-side language?
Thanks.

For single line edits, here is a simple way to enable inline editing with just CSS (and a little JavaScript for IE7). In your edit-mode page, use a textbox to display the text, whether in edit mode or view mode.
Here's the css to make a form field look like plain text until it is hovered or focused:
.inContextEdit
{
border: solid 1px transparent;
margin: -2px -3px;
padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
border-color: #ccc;
}
Then, some JavaScript for IE7:
function focusInput(el)
{
el.className += " focus";
}
function blurInput(el)
{
el.className = el.className.replace(/ *focus\b/g, "");
}
And here is the markup you would use:
<input name="PageTitleInput"
value="Page title"
class="inContextEdit"
onfocus="focusInput(this);"
onblur="blurInput(this);" />
This trick will work with a <textarea> instead of an <input>, but you'll probably be better off finding an existing control for your multi-line text. The css could be tricky and hiding the scroll bar in view mode will be difficult. There are several existing controls out there with rich text capabilities.

Will need both front end and back end tools.
I assume you are talking about an in place editor.. jquery has quite a few plugins for it.
If you need a rich text editor, try out TinyMCE. I've used it, and liked it too.

Related

No styles being loaded for TipTap in React

I am in the process of finding a rich text editor to add to my application and came across TipTap. It looks great so I followed a tutorial I found on YouTube however no styles are being loaded on my site.
I have been searching for a solution for ages but can't find a replication of this problem.
No styles are being loaded on render so the editor is no more than a line of text indicating the menu buttons and a blank box (which is editable) for the input area.
All of the buttons behave as expected but there are no styles.
I noticed that if I try to render a simple HTML button on another page it also comes without default styling. Is there something obvious I'm missing here? I have been searching for a solution for a few hours now.
This is how my editor looks
This is how it should look
This is a HTML button also showing without a default style I tried to render on another page
<button type="button">Where is the style?</button>
I tried deleting the cache on Chrome however nothing changed
If anyone is in the same boat I have found a solution, each element on the page needs to be defined explicitly within the css file. Default behaviour wasn't working as expected so for the buttons I added to the style sheet:
button {
border: 2px solid black;
padding: 3px;
border-radius: 2px;
}
and styles appeared.
Adding .ProseMirror to each element had no effect on its styling so I had to style elements globally. This affected other components I had made such as a Button component, to overcome this I added editor to the class name of each button in the Editor component
<button
//
className={editor.isActive('underline') ? 'is-active' : 'editor'} //default is '' but 'editor' added
>
This allowed me to style the Editor buttons separately
button.editor {
border: 2px solid black;
padding: 6px;
width: 80x;
border-radius: 8px;
background-color: ##C1BCAC;
}

Possible to update CSS dynamically in Plotly Dash?

Basically, I have two Plotly Dash dropdowns. I loaded custom CSS upon page load like this. Each child of my select keywords dropdown selected has a designated color in my custom CSS. Now, I have another dropdown that I want to color dependent on the colors of the first dropdown. For example:
11797656 asset has the Agedwip keyword. So, I would like it to be red like the keyword Agedwip element. This is hard to achieve because the CSS I have been using is from a static file which is loaded only upon page load. So even if I know the color 11797656 should be, I cannot actually alter the CSS and make it that color as far as I know, since it would not read the file and update the CSS in the browser.
I figured using custom javascript would make this possible, if I could directly alter the browser's CSS as opposed to just the static file that I loaded as a stylesheet. The way I am thinking about this now is...create a javascript function that will alter the color of a specific element, find a library with a javascript interpreter that has Python bindings, call the javascript function from within Python and pass it the necessary values which should update my browser's CSS.
Example:
javascript function( child_index_num, color )
alter asset css with child_index_num to give it color I want
Here is the code I currently use, to define the keyword static CSS upon page load. There are many more elements, this is just the first 3 for sake of understanding how I do this:
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(1) {
background-color: rgb(228,26,28);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(2) {
background-color: rgb(55,126,184);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(3) {
background-color: rgb(77,175,74);
border-color: "grey";
color: #fff;
}
Essentially just a color for each spot that could possibly exist. Can someone validate my idea for coloring select assets prior to me trying it, or provide a better alternative? Or is this just not possible to do/would it slow down my website drastically to implement? I am a novice with Javascript, so this solution was a bit out of my comfort zone. Feedback would be appreciated, thank you!

How to make CKEditor strikethrough functionality accessible?

Default strikethrough functionality of CKEditor works well and do what is logic, adding an "s" tag surrounding the text that has strikethrough (also I can make the editor use html5's "del" tag), the problem however, is that assistive reading technologies such as NVDA or JAWS do not read this kind of content in any way different from normal text without special settings. What I'm trying to do is to add a span tag at the beginning and at the end of strikethrough text indicating this fact to the user:
<p>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">Start strikethrough. </span>
<s>Text with strikethrough</s>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">End strikethrough. </span>
</p>
As you can see in this code the span is not visible in the page but the reader will follow dom order so the user will be alerted of the strikethrough.
I know you can build a plugin to insert any html but I have to make this work in the same way basic styles buttons work, with toggle feature:
The easy part: if there is a selection in the content and the button is pressed we have to strikethrough the content. This one is easier as we can get the selected html and surround it with what I want.
The harder part: if there is no selection and the button is pressed then every text written next must have the strikethrough.
After lot of researching and analysing how the "real" plugin was made I came to something like this:
CKEDITOR.plugins.add( 'customStrike', {
icons: 'customStrike',
init: function( editor ) {
var style = new CKEDITOR.style( { element: 's' } );
editor.attachStyleStateChange( style, function (state) {
!editor.readOnly && editor.getCommand( 'customStrike').setState(state);
} );
editor.addCommand( 'customStrike', new CKEDITOR.styleCommand( style ) );
if ( editor.ui.addButton ) {
editor.ui.addButton( 'CustomStrike', {
label: 'Strike Through',
command: 'customStrike',
toolbar: 'custom'
} );
}
}
});
This works exactly as the real plugin, I tried to work around this code but the element property in the style defintion only accepts one tag as far as I know, I would need a way to nest tags using the element property to accomplish this.
Is there any way to solve this?
Any help would be appreciated.
For me it looks like you're trying to fix the wrong end of the problem. It's readers' problem that they don't read the content differently. Clobbering the content may help for a while (although it will break the editing), but will be a problem when the readers are updated and start reading the content properly.
Anyway, if you insist on having some solution right now, then I have two advices:
There may be some ARIA role or other attribute that you could set on the s/del tag which will somehow affect the readers.
Do not clobber the content inside the editor, because you will break it. You could for example process the content before sending it to the end user, if that's the part that you want to fix.

Prevent element from being manipulated with CSS

I'm currently building a small ad network, mainly intended to be used at our own websites.
The ads are loaded by including a script on the site, like...
<script src="http://someurl.com/somejs.js"></script>
Anywhere I place the script line, it's gets replaced with the ad content, inside a with inline styling.
Must ads will be HTML, and that's what troubles me...
For example, lets pretend that the ad content is something like
<div style="height: 150px; width: 90px; overflow: hidden; display: inline-block;"><p>Buy cheap buttons</p><p><img src="deliciousButtons.png" /></p></div>
And then lets pretend that the content is loaded into a webpage, where someone has the following in his stylesheet:
img { border: 1px solid red; }
Now the image in the ad gets a red border - bummer.
My only solution would be to use iframes... However, I've never really liked iframes.
Is there a html-element, where you can place HTML inside and everything placed inside is not susceptible to any stylesheet preferences - only inline styling?
... If no. Any suggestions on how to do it? With no iframes :)
You can override the inherited styles, but for it to work properly, you will need to everride every possible CSS option and probably mark such overrides as !important, really, iframes is the best way to accomplish that, another possibility is to use static images or flash, but i guess this is also out of the possible options.
You can do something like the following.
Add a class which you don't want the style.
<img src="deliciousButtons.png" class="no-border"/>
Then on your css.
img:not(.no-border) {
border: 1px solid red;
}
demo

Tumblr: How to control CSS with post tagging (UPDATE: Working Method without JQuery!)

Seen this done before, am curious as to how it is done. Example can be found over at http://wordographic.info/
For example, if I tag a post blue, the bg-color of the post turns blue, etc.
Anyone know how this is done?
Thanks.
Found a way to do this with only HTML/CSS. Pretty simple, just add the {Tag} block to any div class wrapping the post area but make sure it's between {block:Posts} and {block:Text} etc. Now whatever you tag a post now becomes a new class.
{block:Posts}
{block:Text}
<div class="post {block:HasTags}{block:Tags}{Tag} {/block:Tags}{/block:HasTags}">
{block:Title}<h2>{Title}</h2>{/block:Title}
<p>{Body}</p>
</div>
{/block:Text}
{/block:Posts}
Pay attention to the third line down. it is important to add a space after {Tag} otherwise they won't be seperated in the HTML.
The CSS would look like this:
.post { /* default style */
background: #ccc;
float: left;
margin: 10px;
position: relative;
}
.blue { /* when tagged blue, use this style */
background: blue !important;
}
Works! Pretty simple, no jquery required!
Thanks Blender, wouldn't have thought of this for some reason if I didn't read your jquery method :)
With jQuery, anything's possible! This isn't going to work right away, so tweak it for your theme:
$('.post-class .tag-container .tag').each(function() {
$(this).closest('.post-class').addClass($(this).text());
});
It is nothing to do with JS, such things are done on server-side. Depends on tags some properties are set to posts and then they are taken into consideration while rendering them to HTML.
You want to get the post's tags as class names so you can style posts with CSS, and there is a variable you can use for this purpose. In your template simply use {TagsAsClasses}. This will render HTML friendly class names.
An HTML class-attribute friendly list of the post's tags.
Example: "humor office new_york_city"
For detailed explanation see Post chapter in Tumblr docs.

Categories

Resources