I have an empty span and I would like to set cursor position on it. My codes works in Edge, Chrome, FireFox but not for IE.
I have tried set cursor on empty tag but the solution is not applicable for me.
This is the sample empty span:
<span id="ABC"></span>
My codes to set cursor position:
ed.on("focus", function (e) {
ed.focus();
var node= ed.dom.select("span#ABC");
ed.selection.setCursorLocation(node[0], 0);
});
The technique we use in the editor is adding a zero-width character ("\uFFEF" in JS) into the span and selecting that. It's a fairly reliable cross-browser way to put the cursor in places the browser doesn't normally support.
These characters are stripped when the content is serialised so there's no impact on the output HTML.
Related
I've been using TinyMCE (v4 at the moment, but this question is valid for v5 as well) as an editor for content that is eventually turned into Word documents.
Pressing shift + enter on TinyMCE inserts a line break <br /> rather than a return (i.e., creating a new <p>). Is there any way to make shift + enter behave just as enter? In other words, is there any way to disable shift + enter?
If anyone's interested as to why I'm asking:
To make it as similar to editing text on Word as possible, I made it so that <p> elements have no margins at all. This way, the document looks the same on the editor and on Word. Line breaks look the same on the editor, but when converted to Word, their behaviour is different when the text orientation is set to justified. Lines ending with a line break get stretched to the full width of the document; lines ending with a return don't get stretched at all. That's the behaviour I'd like to have.
TinyMCE has APIs you can use to be notified when a key is pressed and you can look at that event to see if Shift + Enter has been pressed. The code to do this can go in your configuration:
setup: function(editor) {
editor.on('keydown', function (event) {
if (event.keyCode == 13 && event.shiftKey) {
console.log(event);
event.preventDefault();
event.stopPropagation();
return false;
}
});
}
Here is a complete TinyMCE Fiddle: http://fiddle.tinymce.com/LQgaab
I have a big text and like to highlight words that are trademarks. So within this big CDATA node I need to grab for multiple words like "ACME Soda Chips" and make them red.
currently I do something like this in a TinyMCE plugin:
// almost ...
var foo = editor.getContent();
foo.replace('ACME Soda Chips', '<span class="douh">ACME Soda Chips</span>');
editor.setContent(foo);
My problem now is, that such HTML is displayed in Text-Mode (where you see the content as plain HTML) and also submitted therefor stored to the database.
But what I like to have is:
Highlight a word in the visual mode
Do not store my surrounding span somehow
Optional: Do not show that I used a span and CSS-class to highlight things.
Hint:
I may completely do this wrong - please help.
I read some other plugins and honestly I don't understand what they do.
Imagine the whole text as one single big CDATA part but I like to highlight a specific set out of it.
My PHP generates a Word document, but it will not render carriage returns. My CKEditor translates a carriage return into either,
<br>, or <div>asdf</div>
When the Word document is created, it will display those HTML tags, so I strip them out. What replacement code, character, ascii, or tag can I use so that when the page is rendered, it shows the text like it did in the Editor?
Current example - if you have the text "Don't jump off the" [then hit Enter, so that the next word is below it]...
"cliff." Instead, currently, that gets saved into SQL as:
Don't jump off the <br>cliff.
Don't jump off the <div>cliff</div>.
...depending on which browser is used. In the msWord output, any tags left in the content [exceptions to strip_tags function] get displayed literally in msWord. Or, if I replace the tags with ASCII
it displays that literally, too. Not sure if this helps, but this is defined at the top of my php report_generator.php file:
require_once '/var/www/PhpWord/src/PhpWord/Autoloader.php';
\PhpOffice\PhpWord\Autoloader::register();
include "/var/www/ncpcphp/NCPC_PHP_Functions.php";
DEFINE("WRITEtoFDOCS", "NO");
DEFINE("FDOCSDIRECTORY", "Contract Attachments");
DEFINE("MIMETYPE","application/vnd.openxmlformats-officedocument.wordprocessingml.document" );
Help - what can I use to cause the output to show the carriage return?
Thank you, Cindy. Your answer is a piece of the solution. My CKEditor saves carriage returns as either
<br>, <br />, or <div></div>
depending on which browser is used Chrome[div] or Firefox[br] - that goes into my msSQL. Yet, if my editor has turned-on an "Enter filter" [keycode-13] in order to prevent someone from enter-editing a [[Placeholder]] (ckeditor read-onlyplugin) then saved editor text strips out the Enter. So, I did this: kept in the enter filter because it is necessary, then after the text carriage returns are saved as br's or div's, when I run my report generator, I replace
<br>, <br />, and <div></div>
with "\n" like you said. Then I explode the text variable like this:
$show_cad = explode("\n", $show_cad);
foreach($show_cad as $line) {
$section->addText(htmlspecialchars($line));
}
The code in the editor needed to filter out the Enters only when Enter is pressed in the [[Placeholder]] plug in is more complex, and I got largely from CKEditor themselves. They request that I do not post their full solutions, but if you like I could show you pieces of it. Basically, I had to register the Placeholder widget. Then when Enter is pressed, it checks if the context is with Placeholder. If so, filter the Enter [then it disappears from the saved editor text], but if Enter is pressed elsewhere, it gets saved and used properly.
Thank you for your help!
I have insert a line break within TinyMCE
tinyMCE.execCommand('mceInsertContent',false, "<br/>");
However the cursor currently stays where it was before.. which makes sense, however I would like code which moves the cursor the end of the html I just inserted?
Adding a space after the <br/> will reposition the cursor:
So change:
tinyMCE.execCommand('mceInsertContent',false, "<br/>");
to
tinyMCE.execCommand('mceInsertContent',false, "<br/> ");
Example: http://codepen.io/anon/pen/PbKQpJ (demo links above editor)
We have a SAPUI5 timeline control, where we are showing the comments coming from server.
The issue is, if the comments contain a newline \n, then the Timeline control is not able to display the text in newline. Instead, it introduces space wherever \n is present.
We have tried formatting \n to unicode character also but that also didn't worked. Timeline control aggregates TimelineItem.
The control we are using is: https://ui5.sap.com/#/api/sap.suite.ui.commons.TimelineItem
Code snippet can be found at:
https://jsbin.com/kuluyehilu/edit?html,output
I inspected your example and came up with the following solution.
Since the text is embedded in a <span>, all unnecessary whitespace will be trimmed. What you can do is telling the span (via CSS) that it should display the whitespace anyway.
If you don't have a CSS file in your project yet, create one. Then add the following lines
div.sapSuiteUiCommonsTimelineItemShellBody>span {
white-space: pre;
}
This should do the trick.
JSBin: https://jsbin.com/feladeneso/1/edit?html,output
If you inspect the rendered element, you will see it actually put in the break:
<span id="__item0-realtext">x
y</span>
...but did not convert it to a <br/> tag. You cannot add the tag yourself since it will be escaped, either. Maybe you can try to override the renderer, and convert any line breaks to html breaks