I am using tinyMCE editor, i need to make some contents radonly (nonEditable).
As per its documentation, if i use class "mceNonEditable" with some elements, it fulfill the requirement, but unfortunately if i select that specific element and press backspace / Enter / Delete button, it removes that content.
All i want is that, user shouldn't be able to make any contact with those elements.
Official example can be seen here.
Any how, I also tried to accomplish this with an overlay div, overlay div needs absolute position, and after applying this style, editor convert this div into drag able form.
Please help, if there is any other solution..
I've found that setting the contentEditable attribute to false on the element does the trick.
Related
I am implementing a guide solution using the introjs.com library
My application has 2 scrollbars, so when I pass the ID of the element I want to highlight, the library uses the larger scrollbar, which makes the highlighted area a part that has nothing to do with the id of the div I entered. Does anyone know how I can select which scrollbar I want to scroll to find the div with the correct content?
I have tried using:
scrollIntoView();
scrollToElement();
I have a form on the webpage, which uses TinyMCE 5 to edit one of the fields. In my configuration, the TinyMCE uses CodeMirror in order to inspect/edit the html-code of the field's content. When the CodeMirror starts, it positions the cursor at the beginning of the code, but I would like to find a way how to set initial cursor position in CodeMirror to the place in html-code, which corresponds to the position of cursor in TinyMCE. In other words, if the cursor is located e.g. inside a table in TinyMCE when I call the CodeMirror (by pressing "code" button on menu panel), I would like the CodeMirror to set its cursor close to or inside the <table> tag in the html-code.
The solution, which comes to my mind, is to get the tag name at the cursor position in TinyMCE, then start CodeMirror, find the line in CodeMirror, which contains that tag, and finally position the cursor to that line. But I don't really understand how to implement this. Should I edit the codemirror/plugin.js or there is another less destructive way?
Any ideas are welcome! Thanks!
After some research I've found the answer to my question. I hope it will be helpful for someone else.
First of all, the functionality described in my question has already been implemented in the CodeMirror. It's controlled by the CodeMirror option saveCursorPosition. If it's set to true, CodeMirror positions cursor to the place in the html-code, which corresponds to the position of the cursor in the TinyMCE editor and vice versa.
But the most funny thing is that all of the above doesn't work :) In order to save the cursor position, the tinymce-codemirror plugin adds the invisible span to the html-code of the TinyMCE content (<span style="display: none;" class="CmCaReT"></span>). Just before the CodeMirror instance is activated, the plugin replaces that span with invisible character (UTF code = 0), otherwise the span tag would be visible in the CodeMirror.
This replacement is performed by the following code (in the source.html file located at the same folder as plugin.js and plugin.min.js): html.replace(/<span\s+style="display: none;"\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr)). The regular expression should find all those span-s, but it doesn't! The reason is that style and class attributes appear to be in opposite order: the class is the first, then follows the style. (I think this is the surprise made by the browser - I use Firefox.)
Now, we have to change the regular expression to /<span\s+(style="display: none;")*\s*(class="CmCaReT")\s+(style="display: none;")*([^>]*)>([^<]*)<\/span>/gm , which catches the span tag regardless of the order of its attributes.
So, now jumping between corresponding positions in TinyMCE and CodeMirror works fine!
I want to make a basic text editor using angularjs (or just pure javascript). The idea is that I will have a div to contain the text, instead of using textarea. I want the user to be able to click anywhere inside the div and have a blinking cursor appear where they click. I really have no idea how to do this. Any suggestions? By the way, I would prefer not to use contentEditable.
Since you prefer not to use contenteditable, Here's a few suggestions you could have a look at to get a blinking cursor, manually:
Overlay the div with a canvas element, get the click's position, and animate a line on the canvas at that position.
Overlay a animated .gif containing the blinking line at the click's position.
Use a animated .gif containing the blinking line as the div's background, and set the background-position, depending on the click's location.
For the above two suggestions, instead of a .gif, you can use a static image, and toggle it.
You'll have to keep in mind that the line will have to snap to the closest character boundary, so you won't have your cursor blinking in the middle of a character. Using a monospaced font would make that a lot easier.
You will still have to write the other features a text field has, though:
Text manipulation.
Selections.
Copy / pasting
You can make the div editable by adding contentEditable="true" attribute to the div element.
<div contentEditable="true"></div>
As you mentioned you wanted to avoid using of contentEditable then you can go for Javascript/Jquery plugin. It will be very easy for you if you use plugin rather developing it on your own. Here is a jquery plugin which can come in handy. http://www.appelsiini.net/projects/jeditable
you could try setting the div to contenteditable
<div contenteditable>
</div>
JSFiddle
Seems you are looking for html5 contenteditable attribute.
http://html5demos.com/contenteditable
I have this text editor plunker example the problem is when I click the bold button or any other button the button doesn't show the state of the editable div, I know that could be fixed if I added a class to the button in the ng-mousedown event's function but that won't fix the problem if I click in an area with bold text that should add a class too to the correct toolbar button, maybe I should use somthing like a watcher but to watch what?
Update
OK, I did some digging, I'm trying to watch the position of the caret so I can apply the correct style to a toolbar buttons of a text editor I thought about $watchers but I never used them.
The example that i'm using is from this StackOverflow post there's a Jsfiddle in the post but I made a plunker example with AngularJS that shows how to get the caret position in the contenteditable div.
Is there a better way of doing this like get the DOM tree of the inner contenteditable div then make a map of elements and positions then use the data binding to control the state of the buttons in the toolbar?
Any help, thanks in advance.
I found the Answer in this SO post:
Rather than do all this by hand, the browser has methods to tell you if the current selection or caret is bold, italic or whatever: document.queryCommandState() (MSDN), for binary commands such as a bold and italic, and document.queryCommandValue() (MSDN) for commands with a value, such as font-related commands.
I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"
How could I write something like that using jQuery?
How to get row and column of cursor?
how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
How to make sure the DIV appears at the start of a word?
Thank you in advance!
Answer: http://jsfiddle.net/morrison/57BR3/
What it does:
Creates div positioned near hyperlink.
Looks like Google docs box.
Ability to change text and url.
Remove is implemented.
What it does not do:
Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.