Fairly new to CKEditor here. I'm aware that you need to call the updateElement() method for CKEditor to send the current editor content to the related textarea element. From there, you can call the getData() function to get the content. (Although I don't understand why there are two steps to get the editor content, instead of one.)
However, I want to get the current content directly from the editor, without changing the related textarea content. Is there a CKEditor method to achieve that, or is it a case of using jQuery to find the editor content?
The getData method will return the raw HTML from the editor.
Related
How can I show documents created with Ckeditor in read only so that they as much as possible like in the editing mode but without having to create the editor for each message?
In my project users can send messages to each other among many other things and they create the messages using Ckeditor. I would to render message threads in readonly mode without having to create the Ckeditor for each message. Doing that would be slow and would consume a lot of vertical space. Another problem with that approach is that removing the toolbar removes formatting. I would like to just have the messages in div tags and add a class to them and then include Ckeditor css file. Or also acceptable would be to have one element with certain class whose children would get the Ckeditor styles. Before putting the messages in the html response I do whitelisting on the server so the docs are safe to put inside for example a div tag.
I solved this by wrapping the message in an iframe element and added dynamically a style element that links to the Ckeditor style sheet. Now the message gets Ckeditor styles and I don't need to create the editor at all in the read only state and the rest of my page unaffected by the Ckeditor styles.
I'm modifying a website, built with AngularJS, and in one page I have a WYSIWYG editor.
The whole widget that includes the editor, is a div that has 'ng-controller="TextsController"'.
In this div I have a button, clicking on it displays the editor. And the initializing of the editor happens in a directive - "richTextEditor".
So - I'm making a popup in this editor, that has to show some images from the server. I put the code for pulling the images in the controller ... and there I set
$http.get('/url/to/files').success(function(data) {
$scope.imagesFromServer = data;
});
and in the view I have
'ng-repeat="image in imagesFromServer"'
And the problem is that the ngRepeat doesn't see any items.
I have two ideas:
The view, containing the ngRepeat (the HTML for the editor, and the popup with the images as well) loads with AJAX, and at that very moment the scope variable is not set.
I'm initializing the scope variable in the wrong place. (Eventually has to be in the directive instead of the controller? ... but all examples I've seen and done so far - pull every data in the controller, and the view sees it directly.)
Hope I've described the situation clearly.
Thanks in advance.
I am using the kendo editor. If I write any html data like : <img src=x onerror=alert(0) > as an input. The script is getting executed. Means the kendo editor is not secure. How I can encode the value on client side ?
Thanks in advance.
I don't think the problem here is so much that the Kendo editor is insecure, more that the javascript fragment has made it onto the page in the first place.
On initialization the Kendo editor merely copies the input value verbatim and uses it within the iFrame that is contained within the editor, hence the script executes.
Typically you would encode/sanitize user content server-side before it's displayed. It's your website that generates the HTML page so you have full control over the output and need to ensure that a potentially dangerous value doesn't get added to the input's value in the first place.
It might be worth looking into Microsoft's AntiXSS offering.
tinyMCE supports dragging images from a website (not local file browser) to the rich text editor field. They get converted to and <img src=''>...</img> tag and are immediately displayed as images.
I would like to change the src url of the image tag when it is inserted that way. I tried using the urlconverter_callback handler and the paste_preprocess handler from the paste plugin but neither of them get triggered when I drop the image to the editor field.
Which callback can I use to react on an image drag&drop to the editor? Or is there another way to change the image src when it's dropped?
(urlconverter_callback works when I add the image with the 'Insert Image' button but that's not what I'm looking for.)
The key relies on what's already told: Drag-n-Drop events belong to the browser domain, so TinyMCE knows nothing about them unless we bind them, which in this case it's not necessary.
It's also important to have in mind the way Drag-n-Drop interactions share information between the different events: reading and writting the dataTransfer property via getData and setData functions.
That said, this is my aproach (note I'm using jquery for selection and event binding):
Bind the dragstart event to the image, so it fires when we start the interaction. Make the string replacement and store the result on dataTransfer.
https://gist.github.com/3040473
Useful links:
http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
In a view (master view) another view is called with $this->load->view(‘sub_view’);
In the sub_view i have a textarea to use with tinymce.
If I combine the views in one single view and call it from my controller my js works fine and the textarea converts to tinymce editor.
If i use the master - sub scenario and my js targets elements in the sub_view although the same html is returned to the browser js doesn’t fire up correctly and instead of my textarea the whole div that is contained in the sub_view is converted to tinymce. It's like if the contents are loaded afterwards or something.
By the way if i setup just an onclick=alert"()" in the subview it fires up.
Edit: You can grab an example from codeigniter.com/forums/viewthread/179792
Figured it all out.
It had nothing to do with either codeigniter or tinymce
It was markup error
in the main view there was a and the textarea id was also content.
I don't know why it worked correct in full_view
In the init it was 'textarea.tinymce' and textarea had class='tinymce' while the div had the same id too but was not a textarea.
but in the sub_view the wrong markup caused errors.
Changing ids fixed it
Thanks anyone for taking time to review the problem.