First of all, this is not about the tinyMCE.triggerSave();
Sometimes when editing content, I switch to the textarea mode with the following
$('#id').tinymce().hide(); // from the official example
which temporarily hides the rich editor from view so I can see the HTML codes.
But if I submit the form right after editing without switching back to rich editor [ using .show() ], the content will not be updated.
My question is how can I save the content of textarea to iframe?
Please do not offer me the "use the code window" option, I have a customized show/hide button outside of TinyMCE.
Switching by mceAddControl/mceRemoveControl will solve the problem. But when submitting, the content inside the textarea will not be formatted.
Well, I just figured out a way to update content
$('#id').blur(function() {
$('#id').html(document.getElementById('id').value);
});
UPDATE
this might be even better, for all instances
$('textarea.tinymce').blur(function() {
var this_id = $(this).attr('id');
$('#' + this_id).html(document.getElementById(this_id).value);
});
Any other solutions are really appreciated.
Related
I am designing an HTML editor for Windows Forms. I use Geckofx 60.64 and TinyMCE 5.2.0 for this. When everything runs smoothly, this will be a usercontrol.
Here is the screenshot:
And I don't want anything that pops up as a popup in this usercontrol. However, TinyMCE's code plugin opens as a popup.
As in the TinyMCE editor in Wordpress, I want the contents of the HTML code to be displayed in the editor when you click on the code icon and return it when you click the code icon again. But I have no idea how I can do it.
In order to better explain what I want, I also designed a simple image in Photoshop.
The code view in WordPress is not actually using the TinyMCE code view plugin. Rather it extracts the editor contents, loads it into a textarea, allows you to edit, and then it re-invokes TinyMCE and reloads the updated HTML.
If you want a similar experience to WordPress you will have to create the code view behavior yourself.
If you want to use the code viewer that TinyMCE provides it works as a dialog.
I had a similar request (displaying html source in editor) and achieved a pretty simple and (for me) sufficient solution by modifying the initial (open source) code plugin:
var e = tinymce.util.Tools.resolve("tinymce.PluginManager"),
p = tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),
o = function (o) {
var e = o.getContent({source_view: !0});
var b = o.getBody();
if (b.getAttribute("code") === "true") {
b.setAttribute("code", "false");
b.style.backgroundColor = "white";
b.style.color = "black";
b.style.fontFamily = "Helvetica";
o.setContent(p.DOM.decode(e));
} else {
b.setAttribute("code", "true");
b.style.backgroundColor = "black";
b.style.color = "white";
b.style.fontFamily = "Monaco";
o.setContent(p.DOM.encode(e));
}
};
Instead of opening a new window, it just changes the css of the editor (background, color, font) and sets a data-attribute (enables toggling between the initial view and the code view). The p.DOM.encode(e) then allows to display the html tags.
I'm not very experienced in javascript, but it works good so far. Anyway, feel free to correct / improve things.
This question already has an answer here:
SAPUI5 Open link on Button press
(1 answer)
Closed 1 year ago.
I am relatively new to UI5. My search for "[sapui5] icon link" brought no useful results. So here is my question.
I have the following sap.m.Link
<Link id="myLink" href="http://stackoverflow.com/" text="Stackoverflow" />
which displays the text "Stackoverflow" on the UI, and when I click on it, I will navigate to stackoverflow.com. That's the effect I want.
But how can I replace the text with an icon, for example "sap-icon://download"? According to the Link-API, it doesn't have an attribute icon. So is there a way to get the same effect using sap.m.Button that does have this attribute:
<Button icon="sap-icon://download" press=".onDataExport" />
What would the handler onDataExport look like? My idea is to use a (somehow) hidden sap.m.Link and a sap.m.Button containing the icon. The press-handler of the Button would then somehow trigger a 'link clicked' (not sure if that is possible).
My answer comes a bit late, but I hope that it will help others, as I searched for a ready-to-use Link including an Icon (although this does not seem to be the real need of StoneCrusher).
Button which triggers link navigation:
If you want a sap.m.Button to act like a classical link, then you can attach a press event and use window.open in that event, like:
myButton.attachPress(function () {
window.open(url,target);
});
Link with UI5 icon:
If you want to display a sap-icon in a sap.m.Link, then you have to extend the link, include an aggregation which contains the icon and then render the icon before you render the text of the link.
renderer : function(oRm, oControl) {
[...]
oRm.write("<a");
oRm.writeControlData(oControl);
oRm.addClass("sapMLnk sapMLnkMaxWidth touconLink");
oRm.writeClasses();
oRm.write("href=\"javascript:void(0);\" ");
oRm.write(">");
//Render icon
if (icon!="") {
oControl.getAggregation("_icon").setIcon(icon);
oRm.renderControl(oControl.getAggregation("_icon"));
}
oRm.writeEscaped(text);
oRm.write("</a>");
}
I was in need of both and published these and other custom UI5 convenience controls here: www.toucon.fr
Use the below code in your onDataExport function in controller:
sap.m.URLHelper.redirect("https://stackoverflow.com/", true);
Refer to the below link for info: ui5.sap.com/#/sample/sap.m.sample.Link/preview
sorry only got reply in JSON style, but you see what is missing in your code:
jQuery.sap.require("sap.ui.core.IconPool");
var sBack = sap.ui.core.IconPool.getIconURI("nav-back");
var button = new sap.ui.commons.Button({
icon : sBack,
});
I have a page with several TinyMCE (v4) editors, which all work great ... until I try and add:
inline: true
to their configuration. When I do that the inline-ing part works great (the toolbar is gone, then appears when I focus the editor), but for some strange reason the editor stops working at that point. Inside the editor I see:
<br data-mce-bogus="1">
but I can't edit that text, or add new text, or do anything at all really with the editor.
I can make the editor work again if I remove inline: true, but I really want the inline effect. Does anyone have any idea how I can get inline without breaking my editors?
Actually, the "bogus" br tags appear for inline divs, too. They are added whenever the input field is empty. There appears to be no easy way to get rid of them. I use a CSS rule during the preview phase:
br[data-mce-bogus="1"] {
display:none;
}
And then strip them out if they make it to the server when the user tries to save.
I recently had this problem, inline: true would not work with a textarea. I change mine to a div and it now works as expected.
Are you using the tinymce jQuery package? The same thing was happening to me until I tried using the normal tinymce package instead.
<script>
$(document).ready(function () {
$("#comment").ready(function () {
$("#comment").val("")
})
})
</script>
I add this jquery script in html to solve this bug.
Add this snippet to your CSS file. That would prevent video bogus.
[data-mce-bogus="all"] {
display:none;
}
I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.
I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.
When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.
$('#cke_229_textInput').val('help');
Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.
This happens in both Chrome 30 and FF 24.
My call to create the editor:
var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
fullPage: true,
removePlugins: 'newpage,forms,templates',
extraPlugins: 'abbr',
allowedContent: true
});
Thanks for any tips or hints!
Update #1
Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...
Update #2
This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.
Final Update
So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.
Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.
The modal html attribute tabindex='-1' is what seems to be causing the issues for me.
The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Note: Include this file after both jQuery and bootstrap are loaded.
OMG I have been googling this for hours and finally fond some code that works!!
Stick this in your dialog page that will have a ckeditor in it:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
I found the fix here:
https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog
Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.
<script>
$(function(){
// APPLY THE EDITOR TO THE TEXTAREA
$(".wysiwyg").ckeditor();
// FIXING THE MODAL/CKEDITOR ISSUE
$(".modal").removeAttr("tabindex");
});
</script>
I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.
$('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
var ckeOptions = {
entities: false,
htmlEncodeOutput: false,
htmlDecodeOutput: true
}
CKEDITOR.replace('message', ckeOptions);
CKEDITOR.config.extraPlugins = 'justify';
I also faced this issue when I updated the CKEditor into 4.14
I found the fix in here - http://jsfiddle.net/kamelkev/HU8Qt/3/
In this case,
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function (event) {
return !!$(event.target).closest(".cke").length || this._super(event);
}
});
It will return false, so the textbox gets disabled/ unfocused (losing focus)
As a solution, we need to return true or need to modify the class .cke in the return statement into .cke_dialog
return !!$(event.target).closest(".cke").length || this._super(event);
I tried to upload images to server from CK Editor[without CKFinder] and on positive side i am able to do. whenever we are trying to create some dialog, they are creating one div on the fly which will hold your dialog box. Better you check the CSS property for your text box using chrome and change it. Hope this will help you.
I'm trying to figure out how to validate a form opened using nyroModal.
The page is being opened as below on click of a button:
$(function() {
$('.btnedit').click(function() {
$.nmManual('form_page.php);
});
});
On the form that opens up, I have a few fields that are mandatory and a cancel & submit button.
<a class="nyroModalClose button" href="#" id="btn_submit">Submit</a>
On clicking of the submit button, I want to make sure the mandatory fields have value. If no, an error message should be displayed & the modal window should not close.
I'm trying to use the jquery validation plugin, but without success. The modal window always closes irrespective of the validation scripts.
I haven't found much info regarding form validation in a modal window. Is this not a preferred approach?
Thanks in advance.
I'm not able to help you about the jquery validation plugin in a modal window, but I know that using the instruction $.nmManual in that way, the form will not be placed inside the iframe tag, and if I remember correctly the content of new page will be added without header and body tags, so in a word incorrectly. I guess this can produce no validation.
To successfully open an iframe you need to use filters as described here:
Open iframe manually in nyroModal?
I hope this can help you.