tinymce, automatically add style attribute to content - javascript

I'm working on a project that uses tinymce as RTF editor where users insert formatted content that will be saved as text as is. With all HTML tags becouse the content will be used in varous parts as HTML.
I'd like that all generated HTML elements have a default style attribute, something like:
<p style="margin: 0 10px; line-height: 1">
Hello World
</p>
<h1 style="margin: 0 10px; line-height: 1">
Hello World Again
</h1>
I've tried to add content_style: "* { margin: 0 10px, line-height: 1 }" to tinymceOptions but it doesn't works

TinyMCE has no built in way to force all block elements to have a pre-defined set of styles. TinyMCE does fire a variety of events when things happen in the editor (e.g. inserting content, a new block is created, a key is pressed) and you could use those to try to identify any time a new block is being placed in the editor and add your styles.
https://www.tinymce.com/docs/advanced/events/
Here is a TinyMCE Fiddle that shows some events in action:
http://fiddle.tinymce.com/2fgaab
The hard part here is that there are lots of ways to modify what is in the editor and to get this 100% right you need to catch all those events/activities.
The alternative is to do this when the content is submitted to the server and iterate over the block elements at that time.

Related

Text obstructing a textarea

In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.
However, the text inside the div obstructs and makes the user unable to select text inside the textarea.
<div class="centerc">
<div class="copyc">
<textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
<div id="copyadd" class="copyadd"></div>
<!--THIS IS THE DIV FOR FORMATTING ^ -->
</div>
</div>
-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.
How would I stop the div from making the user unable to select text from the textarea (if this is possible)?
If not, are there any alternatives to the method I use?
Edit: I should have made it clear from the start I wanted multiple types of formatting.
You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.
See this question: editable div
In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...
<div id='divTextEditable' contenteditable></div>
That's not "the magic wand", and it has its downside, but it's a good starting point.
Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.
.dark-text {
font-weight: bold;
font-color: black;
}
You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:
.copyc:hover txtarea {
z-index: 2;
}

Changing Line color on focus inside input or textarea

I've come across a lot of online editors (for ex. dillinger), where, when the user clicks inside the textarea, the line which has focus changes color. I'm curious to know how stuff works here. Not just the line color but any styling which is possible in an editor's editing portion, I'm completely unaware of it. I came across the concept of zebra striping while googling about it, but I don't think it has anything to do with editable portions where a single line has to be focused dynamically.
It seems achievable though, but how?
PS: Please don't provide any existing tool/utility to achieve this. I prefer reinventing the wheel. If it is not an easy road, at least provide the best to your knowledge.
Thanks in advance.
This is a textarea, but it has many divs underneath it (i.e. a lower z-index) to style it in a particular way. More specifically this is an Ace editor so they may detail some of their effects in the documentation.
For example, if you inspect the source of that page you will find the class ace_active-line which you can see is a div that is located underneath the textarea. The textarea has a transparent background which is why you're able to see the div underneath.
Most simply put this is achieved through the utilization of CSS selectors, in specific :focus.
Even with layered divs and other accompanying elements, you can style these divs when the topmost div is in focus, for instance:
input div.inner-input {
border: 1px black;
}
input:focus div.inner-input {
border: 1px orange;
}
This can also be further achieved through jQuery to edit another div's class or attributes when an input comes into focus.
input.onFocus() {
$('.under-div').addClass('active-line');
}
Well, if you want to reinvent the wheel, you'll need to build the roads to use the wheels on too.
In this case you cannot be working in a textarea (as mentioned in the tags). Instead, the rendering of the editor will be all yours.
One of the approaches would be:
Create a <div> container for the area where the text will entered.
Create another <div> inside the first one. This will be our overlay. Make sure that it has a low z-index. Let's say it's z-index: 1.
Create a third <div> container under the first one. This will be the actual text editor. It has to have transparent background and a higher z-index.
Put a <div> inside the container #2. It's going to be our row highlighter.
For every line in the editor you'll need to render its own <div>, with a <span> inside of it for text. Yup, a lot of custom code: you'll need to write proper functions to push new <div> when user hits Enter to start a new line and so on and so forth.
You'll also need to make sure that the height of these row-div's is fixed to a certain minimum value (up to you to figure out the value and the formula behind the calculation, probably something based on the window height, maybe user preferences or font size). It can grow though, for example when user has word wrapping enabled.
When all of it is done the real magic can begin: highlighting. Let's imagine we have a three-line document loaded. It will look like this:
<div id="textContainer">
<div id="overlay" style="z-index: 1">
<div id="highlighter" style="background: yellow; display: block;">
</div>
</div>
<div id="textEditor" style="background: transparent; z-index: 100;">
<div>
<span>Line 1</span>
</div>
<div>
<span>Line 2</span>
</div>
<div>
<span>Line 2</span>
</div>
</div>
</div>
Now you can determine the exact position and width of the textContainer on the screen: it's required to easily (and with little performance overhead) handle different screen/window sizes.
When user focuses on a certain row you'll need to run some JavaScript which grabs the current top and height values of the row (<div>) the user focused on and sets the <div id="highlighter"> location and height to be the same.
Use css focus function to change the outline color when focus on input box.
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
Working fiddle : https://jsfiddle.net/gwLgckvf/

How do I unbold text beside javascript?

I've created a website: www.mvscaccounting.com and at the bottom of the website I have a search engine made from javascript. Beside it, I wanted to write all rights reserved. However whenever I write anything beside the search engine in dreamweaver, it turns bold!
Problem: I can't get it to unbold! it's not bold in dreamweaver, but on website it is
I tested it out, and the unintentional bold text starts when the javascript form is made. If you go to my website, and view page source you can see all the surrounding code.
**** UPDATE: THE PROBLEM HAS BEEN SOLVED, IT WAS A MISPLACED H3 TAG ****
It's bold because it is inside an <h3> element, which is rendered with bold text as defined by the default stylesheet for HTML.
Here's a snapshot of the document in Chrome:
There are several ways to override this. Try adding this to your stylesheet:
.red { font-weight: normal; }
This will cause all elements that are marked with class="red" to use the normal font-weight, even though they're embedded in an element that should be rendered in bold (like <h3>).
You could try adding this rule to the "red" class.
font-weight: initial;

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.

HTML Conteneditable - join paragraphs without inline styles being applied

In a WYSIWYG editor (based on a contenteditable div), I have code to make sure that no inline styles are inserted into the HTML while copy-pasting, normal typing, etc. But now browsers seem to want to screw with me even more. Say I have 2 paragraphs of this sort in my HTML
<p>This is the first paragraph |(cursor)</p>
<p>This is the second paragraph</p>
There are no inline styles present. But if I now join the two paragraphs by pressing "Delete/Backspace", Chrome decides to do this
<p>This is the first paragraph |(cursor)
<!-- Note the horrible inline styles -->
<span style="font-size: 13px; line-height: 19.53px;">
This is the second paragraph
</span>
</p>
Does anyone have any idea as to how I might prevent/detect when this happens?
This is a Webkit's issue. It also influences CKEditor (http://dev.ckeditor.com/ticket/9998). I reported these tickets:
http://code.google.com/p/chromium/issues/detail?id=226941
https://bugs.webkit.org/show_bug.cgi?id=114791
But there was no response.
You could not replicate this on jsfiddle because styles need to be applied to those paragraphs. E.g.:
p { line-height: 1.5em; font-size: 12px; }
Check this one: http://jsfiddle.net/HHHak/2/
So currently there are two possible solutions:
avoid any styling :| (but that won't solve other issues I described in mentioned bug reports),
implement your own backspace/delete support (really tricky... you can find an algorithm in a spec draft, but I'm not certain that it is complete).

Categories

Resources