CKEditor5 Get Plain Text - javascript

I know how to get data using CKEditor5 API as it's mentioned in documentation and on another SO post.
However, how could I get the Plain Text? I tried following but it returns nothing.
alert($(editorObj.element).val());
Interesting Note: Even following code returns nothing if TextArea is bind with CKEditor
alert( $("#editor").val());
But if I don't bind TextArea with CKEditor then it works fine.
Any solution or feedback would be highly appreciated.

CKEditor 5 does not expose such a method but you can use one of the utils of the #ckeditor/ckeditor5-clipboard package – viewToPlainText().
It's used by the clipboard feature to set the text/plain flavour in the clipboard when the user copies some content from the editor.
To use it you'll need to use CKEditor 5 from source (because this function is not exposed publicly). You can read about that in the CKEditor 5 Framework's Quick start guide.
You can use this method to stringify the entire editor's view:
import viewToPlainText from '#ckeditor/ckeditor5-clipboard/src/utils/viewtoplaintext';
import ClassicEditorBuild from '#ckeditor/ckeditor5-build-classic/src/ckeditor';
ClassicEditorBuild
.create( element )
.then( editor => {
// Will get the stringified content.
console.log( viewToPlainText( editor.editing.view.getRoot() ) );
} )
.catch( error => {
console.error( error.stack );
} )

Ok, I found a workaround:
var plainText = $(editorObj.getData()).text();
Until we get a proper solution or a method exposed by library, I hope this workaround will work.

Related

pdftron copy wrong text

I want to use pdftron and all things work perfect but when i copy text from pdf some characters convert to blank square and question mark, any idea?
here is my pdf.
As you can see below:
I wrote this code:
WebViewer({
path: '/assets/plugins/pdftron',
initialDoc: '/practical.pdf',
fullAPI: true,
disableLogs: true
}, document.getElementById('pdf')).then((instance) => {
// PDFNet is only available with full API enabled
const { PDFNet, docViewer } = instance;
let Feature = instance.Feature;
instance.disableFeatures([Feature.NotesPanel]);
docViewer.on('documentLoaded', () => {
// call methods relating to the loaded document
});
instance.textPopup.add({
type: 'actionButton',
img: '/language.svg',
onClick: () => {
const quads = docViewer.getSelectedTextQuads(docViewer.getCurrentPage());
const text = docViewer.getSelectedText();
$("#out-pdf").html(text);
console.log(quads);
},
});
});
Document does seem to cause incorrect extraction. Extraction is not defined by PDF specification so every viewer handles cases little differently. I your case there is a probably a malformed or incomplete font or unicode map included in the document. We've added multiple fixes to our core components and with those fixes extraction happens correctly. Unfortunately current release of WebViewer does not include these fixes yet. We cannot give exact time schedule when fixes will be land to the WebViewer, but should be at least part of our next major release. For now I would try to see if you can recreate the document and see if that helps. Most of the documents we see and test have no problem with extraction.
Could you create ticket through our support https://www.pdftron.com/form/request/ and attach the document that this happens to the ticket, so I can take a closer look on and get issue resolved faster.

How can I clear a Codemirror editor field from Cypress

I already tried something like this from another SO answer How to type using cypress .type() inside the codemirror editor?
If it helps this is the site I am working on Cypress with https://testing-playground.com/
// CodeMirror's editor doesn't let us clear it from the
// textarea, but we can read the Window object and then
// invoke `setValue` on the editor global
cy.window().then(win => {
win.editor.setValue("")
})
The issue I am running into is when I try to implement this I am getting undefined for the editor. I tried digging into the Window object more and couldn't find anything resembling the Codemirror editor. Running .clear({force: true}) on any of the other Codemirror elements yields no results, just .type({force: true}) on the textfield adding the new content with the old.
The solution I ended up using looked something similar to code block in the question with a few changes.
I am not getting the window object from Cypress; CodeMirror editor wasn't there.
I used the idea Evan Plaice gave me related to the Editor instance being on the DOM and then searched the CodeMirror DOM hierarchy manually to find it.
The resulting code will clear a spefic editor, there are two so the [0] is necessary for that.
cy.get('.CodeMirror')
.first()
.then((editor) => {
editor[0].CodeMirror.setValue('');
});
Very unintuitive but you can update the contents by swapping in a new CodeMirror document instance
editor.swapDoc(CodeMirror.Doc([contents],[language]));
That's how I handle content updates on wc-codemirror

Drupal - OpenLayers - Alter popup behavior

I have modified the popup behavior js file: openlayers_behavior_popup.js directly in the module located at openlayers/plugins/behaviors.
It's working fine per my expected but I do not want to put my own modification in the original module, I want to add it attach to my existing module but I don't know how to do this.
I want the site not to take the behavior at openlayers/plugins/behaviors but follow with my popup behavior code from my own module.
Drupal.openlayers.addBehavior('openlayers_behavior_popup', function (data, options) {
// normal
var popupSelect = new OpenLayers.Control.SelectFeature(layers,
{
// my change here!!
},
onUnselect: function(feature) {
// normal
}
}
);
});
How can I alter the behavior code of openlayers?
I have solved my issue on this topic by load the modification javascript file in my custom module as following:
function mycustom_openlayers_init() {
// you might want to load only at some specific page
// if you want so, please have a look to function arg() of drupal
// place condition before loading the js file below
drupal_add_js ( drupal_get_path ( 'module', 'mycustom_openlayers' ) . '/js/openlayers_behavior_popup.js', array(
'weight' => '9999',
) );
}
By specifying the setting of weight bigger, my javascript is loaded after loading the original openlayers popup file and then it overrides the behavior of the original to take mine instead.
I don't know if it is the right thing to do but it works for me.
Please let me know if other people could give me a programmatic solution on that and better than above.

How can I rename a jsTree node

I am not talking about $("#demo1").jstree("rename",node) which makes the node editable for the user. I am talking about the name being changed within the code. For example my nodes are all prefixed with a 2 digit number "[01]" so before I call $("#demo1").jstree("rename",node) I want to strip out the prefix, and put it back in once the user has finished editing. I have tried selecting "#nodeid a" but inside the hyperlink there is an ins tag and this gets replaced if i replace the URL contents. The documentation hasn't been helpful and I havent had much luck looking through the libraries code, can any help me? Chris
The recommended method is to use rename_node
$("#demo1").jstree('rename_node', node , text );
Please keep in mind that by default all modifications to the tree are
prevented (create, rename, move, delete). To enable them set
core.check_callback to true
$('#demo1').jstree({
'core': {
'check_callback': true,
/// rest of the options...
}
});
Rename your node (alternative, not recommended)
$("#demo1").jstree('set_text', node , text );
Debugging
If you still encounter trouble, you can use this method to get the last error.
$('#demo1').jstree(true).last_error()
For older versions (v1.*)
$("#demo1").jstree('rename_node', [node , text] );
$("#demo1").jstree('set_text', [node , text] );
See also:
this jsfiddle for the comparison and example of both methods.
Interaction with jsTree (how to call API methods)
API documentation of rename_node
API documentation of set_text
I believe there is an syntax error with respect to the square braces "[" in the above answer. I use jsTree 3.0.4 and this is the correct syntax -
right - $("#demo1").jstree('set_text',node,text);
wrong - $("#demo1").jstree('rename_node', [node , text] );
Example -
$("#tree_3").jstree('set_text',"#idSelectorForNode" ,"NewName");
You should turn on the switch to allow the rename operation, such as:
$('#container').jstree({
'core' : {
'check_callback' : function (operation, node, node_parent, node_position, more) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
// in case of 'rename_node' node_position is filled with the new node name
return operation === 'rename_node' ? true : false;
}
});
You can use this for updating node text with jstree refresh:
$("#demo1").jstree(true).rename_node(node , "Renamed_Text");

OSX Dashboard widget command line access problem

I'm trying to access command line from a simple Dashboard Widget on Snow Leopard. My intention is to fill the contents of the widget from a command-line script I call. This should be possible.
I'm calling the script every time the widget is shown using it's onshow callback:
if (window.widget) {
widget.onshow = onshow;
}
function onshow() {
document.getElementById("mydynamicarea").innerHTML = widget.system("/usr/bin/id -un", null).outputString;
}
Above I'm trying to use just a simple command showing my username to test the command-line access. This doesn't work, the widget shows just the static text which I have on the HTML:
<div id="mydynamicarea">No data available</div>
The same Javascript works if I use a static string instead of the widget.system call:
if (window.widget) {
widget.onshow = onshow;
}
function onshow() {
document.getElementById("mydynamicarea").innerHTML = "This text is actually shown on widget";
}
When I look at the Console, I can see this error-message:
TypeError: Result of expression 'widget.system' [undefined] is not a function.
I have configured the command-line access in info.plist:
<key>AllowSystem</key>
<true/>
Any idea what I'm doing wrong?
killall DashboardClient
helped for me
There seems to be some bug in Dashboard. I managed to make the Widget work by renaming it. The widget worked just fine in Dashcode before renaming (thanks, Till Theis) and when I installed it from there with another name it worked. That inspired me to just trying to rename it and that worked as well.

Categories

Resources