The plugin that makes the editor keep it's text-selection when switching between WYSIWYG and Source mode, and scrolls the selection into the viewport.
License: MIT License
I'd like to use this plugin for CKEditor 5, but see there's no released version supporting 5. Will this plugin be compatible with CKEditor5? Are there API changes that need to be implemented that currently prevent this plugin from being compatible with CKEditor 5?
Now, after last path #6, undo action are lost while we are going from source to standard edit. Is there any way to fix it again ?
When you switch back to WYSIWYG, the cursor will move to the top of the document, rather than selecting the widget. And when you go back into the source mode, there will be unremoved bookmarks on either side of the widget.
I ran into this issue with a custom widget, but I confirmed that it also affects any image2 or simplebox widget.
It only happens when you have the entire widget HTML selected in the source view. If you just have part of it, or a particular editable field of the widget selected, it works fine.
With this plugin enabled, the undo plugin gets messed up. Undoing will go back to when you viewed the source and no more undo history is added after viewing the source. So a lot of data can be lost when using undo after viewing the source.
This seems to occur only in the latest version. I tested the older version and did not run into this issue.
Hi,
This version is still limited to config.fullPage = false, isn't it? Is it expected to be complatible with the fullPage = true configuration?
Thanks!
Hi, In source mode, How to autoscroll the selection?
I try to add code editor.getSelection().scrollIntoView(); after line 123, but I failure.
Hi!
Recently one of our editors found an issue where a piece of content is out when 'undo' is clicked after switching from WYSIWYG to SOURCE and back to WYSIWYG.
The full reproduction path is as follows:
Expected: the last action would be undone, i.e. making a few characters bold.
Observed: all changes that were made after switching back to are lost.
I think this issue is caused because the function 'createBookmark' is called twice when switching from
I found a workaround which is to simply call editor.undoManager.unlock() in the last line of createBookmark, but that might not play well with previous fixes done in this area?
The textselection plugin adds empty paragraphs when switching from normal view to source view.
First reproduction path:
Expected: the source is empty
Actual: the source is
<p> </p>
The issue is more prominent when using the new 'codesnippet' plugin. Reproduction path:
Expected: the source is:
<pre>
<code>foo</code></pre>
Actual: the source is:
<p> </p>
<pre>
<code>foo</code></pre>
<p> </p>
<p> </p>
It should be easy to force a scroll into view on the caret / selection position.
Where would I have to add that function ?
Even with the latest version, the bookmark spans do not get removed from the HTML in source view.
Tracing it out, the content = editor._.previousModeData; sets the content without the bookmarks, but the source view still contains them.
It's always the startNode bookmark ID that is left behind.
add the samples folder from
https://github.com/sirtet/ckeditor-dev/tree/master/plugins/textselection
to follow the style of other plugins and to make it more accessible for interested users
I'm using CKEditor 4.3.1 with the latest CodeMirror and TextSelection. There's a problem if you put an iframe in the HTML and then switch back and forth. It will add some extra text there, rendering the HTML unusable. This is kind of a big deal - it means we can't use the plugin. Can you fix ASAP?
A demo page, like for CodeMirror would be nice...
Hello! Why it doesn't work from
https://ckeditor.com/cke4/addon/textselection
with [CodeMirror (Source) Syntax Highlighting] (https://ckeditor.com/cke4/addon/codemirror)
Please fix the much needed plugin.
In IE10 and IE11, selected text is removed instead of highlighted.
Steps to reproduce:
Expected: the selected text is selected
Actual: the selected text is deleted
The textselection plugin adds empty paragraphs when switching from normal view to source view after a code snippet has been added. The fix for #5 only fixed the case when the editing area is empty.
Reproduction path:
Expected: the source is:
<pre>
<code>foo</code></pre>
Actual: the source is:
<p> </p>
<pre>
<code>foo</code></pre>
<p> </p>
<p> </p>
I have CKeditor Version 4.4.4, CodeMirror version 1.11, and TextSelection version 1.03.
(note, you have to add: config.allowedContent = true, to allow script and style tags in ckeditor)
If you have are in source mode, and you have a style tag like so:
or a script tag like so:
<script> some javascript; </script>If you place your cursor anywhere in the tag (say, between some and css in the style example) when you turn source mode off, then go back to source mode, you get two comments like so:
These get put where your cursor was.
This is problematic because when you have your cursor on something like: padding: 20(cursor here)px;
it puts the comments there and breaks the css/javascript.
I will be submitting a pull request shortly with a fix for this.
In current version CKSource there is on old one version incompatibile with current CKEditor. Please update.
If you have a CKEditor document set to fullPage: true, and place your cursor within the section of the HTML document, it will add extra HTML comments tags.
Example:
This has occurred for all versions of CKEditor. The test configuration of the editor includes these plugins:
about,a11yhelp,basicstyles,blockquote,clipboard,contextmenu,resize,toolbar,elementspath,enterkey,entities,filebrowser,floatingspace,format,horizontalrule,htmlwriter,wysiwygarea,image,indentlist,link,list,magicline,maximize,pastetext,pastefromword,removeformat,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,tabletools,undo,wsc,dialog,dialogui,fakeobjects,floatpanel,indent,listblock,menu,menubutton,popup,panel,richcombo,button,font,find,selectall,justify,colorbutton,showblocks,indentblock,colordialog,div,forms,iframe,iframedialog,autogrow,tableresize,stylesheetparser,bidi,dialogadvtab,panelbutton,print,docprops
I get a 'TypeError: editor is undefined' error on line 374 when installing version 1.04 manually in version 4.4.6 of CKEditor. The error occurs when trying to leave source mode and go back into wysiwyg mode.
The error appears to be with the code below in the createBookmark method to override the textRange prototype.
if (editor.undoManager) {
editor.undoManager.lock();
}
The editor variable is undefined. I looked at the calls to createBookmark in the plugin and they pass the editor variable so I am not sure what causes the issue and I don't seem to have the problem with the moveToBookmark method which also gets editor passed in. As a quick fix for now, I just commented out the above code but doing that adds steps to the undo stack which is what I believe the above code is trying to prevent.
the following sample (source) causes decodeURIComponent failure.
<style type="text/css">.rule {
width: 50%;
}
.r2{
width: 50%;
}
</style>
<div>content</div>
seems like the source dialogue needs special treating.
This sounds like #4 (comment) but I don't think it's related to CodeMirror, as it happens even when I disable the CodeMirror plugin.
I am not experiencing this on the demo page, but I am when I enable this extension inside our Drupal setup.
Steps to demo (in Drupal):
In the WYSIWYG, create 2 paragraphs.
Position the cursor at the end of the 2nd paragraph. Switch to source view, and the cursor remains at the end of the 2nd one. Switch back to WYSIWYG, and the cursor moves to the end of the first one.
Position the cursor anywhere in the first paragraph. Switch back and forth from source view, and the cursor remains at the correct position.
In WYSIWYG, make a word in the first paragraph bold. Position the cursor at the end of the 2nd paragraph. Switch to source view, and the cursor remains in the correct position. Switch back to WYSIWYG, and the cursor moves to the end of the bold word from the first paragraph.
Hello,
<p>Some text... </p>
<figure class="widget-name">
<img .. some attrs />
<figcaption>edit me...</figcaption>
</figure>
<p>Some other text.</p>Empty paragraphs are inserted before and after the widget:
<p>Some text... </p>
<p> </p>
<figure class="widget-name">
<img .. some attrs />
<figcaption>edit me...</figcaption>
</figure>
<p> </p>
<p>Some other text.</p>fillEmptyBlocks or enterMode settings. I tried to make <p>a root widget element (replacing figcaption with span) - the result was the same, empty paragraphs. Whether there is an seems irrelevant.After some debugging I found out that it's the createBookmark() method called here that adds <span data-cke-bookmark="1" id="cke_bm_699S" style="display: none;"> </span> before the widget (and after the p with Some text... ) and a similar one after it. Which are later enclosed in paragraphs, then removed, but the paragraphs remain.
Thanks!
The code of the widget:
CKEDITOR.plugins.add('img-figure', {
requires: 'widget',
icons: 'img-figure',
init: function (editor) {
editor.widgets.add('img-figure', {
button: 'Create a img-figure',
template:
'<figure class="Picture">' +
'<image class="Picture-img" src="http://docs.ckeditor.com/resources/images/class-m.png">' +
'<figcaption class="Picture-imgCaption"></figcaption>' +
'</figure>',
editables: {
caption: {
selector: '.Picture-imgCaption',
allowedContent: 'strong em'
}
},
allowedContent:
'figure(Picture),img(Picture-img),figcaption(Picture-imgCaption)',
requiredContent: 'figure(Picture)',
upcast: function (element) {
return element.name === 'figure' &&
element.hasClass('Picture');
},
init: function () { },
});
},
});Hi there,
Found a bug where placing the cursor inside a <table> tag in Source view, and then switching to WYSIWYG and back to Source, duplicates content.
I tried this at the demo page: http://w8tcha.github.io/CKEditor-TextSelection-Plugin/demoCodeMirror.html
Enter the following in Source view:
<table><tr><td>Hi</td></tr></table>
Place the mouse inside the 'table' tag somewhere, go to WYSIWYG, and then back to Source, you'll see it has added another row.
Recreated on Linux Chrome 59 and Mac Chrome;
Please let me know if you need additional info.
Thanks!
-Tom
This is a handy little plugin.
As i can't think of a use-case, where one would not want to use this, i propose it should be integrated into the core Source Editing Area plugin (http://ckeditor.com/addon/sourcearea), which it extends.
Are there any reasons why not to integrate this?
The only thing i see is that it could be integrated not only into the Source Editing Area, but also the Source Dialog (http://ckeditor.com/addon/sourcedialog) plugin, which is currently not supported, see #2.
Assuming an integration into Source Dialog would be largely the same code, it would probably make more sense to keep the TextSelection-Plugin as a separate module and try to get this into the core of CKEditor.
Suggested Path:
To better propose this to the CKEditor people, it would be good to have a demo online. that's already requested in #10.
I have CKeditor Version 4.5.6, CodeMirror version 1.13, and TextSelection version 1.05 and we can reproduce that cke_bookmark is added to source code. See example:
<p>Um ein Statusnetz aufzubauen und einen Workflow einzurichten wird das Modul <a href="https://www.drupal.org/project/wor{C}**<!--cke_bookmark_76S-->{C}<!--cke_bookmark_76E-->**kbench">Workbench</a> verwendet.</p>
It is reproducable if following is done:
I checked the closed issues and found similar issues resolved with version 1.05, but I use the current version.
Any idea?
Love the plugin when it works, but found a couple issues when implementing this on our Drupal site.
The HTML string wasn't always loaded into browser local storage and when switching from WYSIWYG mode to Source, it would error out and disable Source view mode. This happened sporadically and could not discern a pattern.
I removed the code that deals with local storage and it worked more consistently; however, it had more issues. It sporadically discards any changes made in either WYSIWYG or Source mode when switching between the two.
If one sets:
fullPage: true
In the ckeditor creation, the textselection plugin will fail to highlight the selection when "Source" is pressed.
Hey again!
Encountering the plugin resetting text selection in certain cases. Specifically, if the selection start or end corresponds to the start or the end of an HTML element and the selection does not expand beyond that element; or if the selection wrapps several elements contents entirely. It happens if we either select text in wysiwyg then switch to source then back to wysiwyg, or if we select something in source and go to wysiwyg. For example (selections are marked with []):
<p>This [is tex]t.</p> - not dropped.<p>This [is text.]</p> - dropped.<p>[This ]is text.</p> - dropped.<p>Me is king-[kong.</p><p>This ]is text.</p> - not dropped.<p>[Me is king-kong.</p><p>This ]is text.</p> - not dropped.<p>[Me is king-kong.</p><p>This is text.]</p> - dropped.<p>[Me is king-kong.</p><p>This is <i>text.</i>]</p> - dropped.Here is a screencast:
Hi again,
Just tried the code from the master tree, and it seems with the plugin removes the contend entered in the wysiwyg mode.
On top of that, it doesn't seem to update between page reloads. Seem like some problem with caching to localStorage.
Tried in CKEditor 4.7.3 with a custom setup, and the latest 4.9.2 (clean setup, full bundle). This screencast has been made with the latter one on the sample page (it also has the utility span elements kept).
Can this be me doing something wrong?
Thanks!
Could the same technique be used with a similar source code plugin that uses something other than CodeMirror? For example, the following plugin replaces the default source editor with Ace editor (it's still under development):
When this plugin is added to CKEditor 4.4.1 and a user switches to 'Source' mode, the following error is logged:
Uncaught TypeError: Cannot read property 'unlock' of undefined plugin.js:313
CKEDITOR.dom.textRange.moveToBookmark plugin.js:313
(anonymous function) plugin.js:90
listenerFirer event.js:144
CKEDITOR.event.fire event.js:289
CKEDITOR.editor.fire editor_basic.js:24
CKEDITOR.editor.setMode plugin.js:215
CKEDITOR.plugins.sourcearea.commands.source.exec plugin.js:974
exec command.js:52
CKEDITOR.tools.extend.execCommand editor.js:825
CKEDITOR.tools.extend.click plugin.js:80
instance.execute plugin.js:136
(anonymous function) plugin.js:169
(anonymous function) tools.js:678
CKEDITOR.tools.callFunction tools.js:706
onclick
It seems editor.undoManager no longer exists in CKEditor 4.4.x.
TextSelection & Codemirror. Go to source, select some text, go back to standard edit then "undo" is active. Go back to source and we can find empty span like id="cke_bm_291C".
w8tcha/CKEditor-CodeMirror-Plugin#43
Long time I thought it's problem with Codemirror, now I see I was wrong. Without text selection plugin everything is working.
Last build (git) + last codemirror (git) + CKE 4.4.1.
and example: http://youtu.be/fiu3V3VEq14
hi
i tried out your marvelous plugin. Works like a charm on your demo site.
I implemented it in my project and realized, that the cursor is misplaced changing from source code to WYSIWYG view.
I replaced the version 1.04 with the source of 1.03 (grabbing it from your demo project).
--- no more misplacing.
What would be the benefit of version 1.04?
Thank you anyway for your work
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.