Im trying to build a front-end page to allow my users to build smarty templates with ckeditor wysiwyg editor.
Im using the insertHtml function to add a button with special attributes (needed to parse it into an smarty variable in the back-end):
// initialize ckeditor
$('textarea.editor').ckeditor({
contentsCss: '/css/test.css'
});
// get ckeditor instance
ckeditorInstance = $('textarea.editor').ckeditorGet();
// Use some elements (outside the textarea) to add buttons/tokens
// to wysiwyg textarea
$("a.tinymce.tinymce-insert-var").click(function(){
ckeditorInstance.insertHtml(
'<input type="button" readonly="readonly" var="{$user->name}" '
+ 'class="placeholder" value="User Name" />'
);
});
This works fine on Firefox, IE8 and opera, but with Chrome/Chromium/Safari the button is inserted between a <p> element.
Is there a way to avoid this, or a callback that i can use to remove the paragraph?
I had this problem as well. This is how I did it...
var editor = $('textarea[name=content]').ckeditorGet();
var element = CKEDITOR.dom.element.createFromHtml( '<p>I am a new paragraph</p>' );
editor.insertElement( element );
Looks like you're using jQuery also... why don't you force the inclusion of the p tag within CKEditor's .insertHtml function, then follow it up with jQuery's .unwrap to always remove the p tags?
in the main ckeditor config-file there is an option to disable automatic <p> inserts.
try to change the value of CKConfig.EnterMode and CKConfig.ShiftEnterMode for example to 'br'.
Felix
Related
I am writing my first app in Vue3 and I use composition-api with script setup.
Using v-for, I create components that are inputs (CrosswordTile) that make up the crossword grid.
A problem appeared during the implementation of the field containing a clue to the password.
Since the text doesn't allow text to wrap, I wanted to dynamically change the tag to after a click.
Function in parent component where I handle logic after click that change tile type works fine, but I need to change tag of "target" to and set maxLength to a different value.
If it would help here is whole code on github: https://github.com/shadowas-py/lang-cross/tree/question-tile, inside CrosswordGrid.vue.
function handleTileTypeChange(target: HTMLInputElement) {
if (target && !target.classList.contains('question-field')) {
addStyle(target, ['question-field']);
iterateCrosswordTiles(getNextTile.value(target), removeStyle, ['selected-to-word-search', 'direction-marking-tile']);
} else if (target) {
removeStyle(target, ['question-field']);
if (getPrevTile.value(target)?.classList.contains('direction-marking-tile')) {
iterateCrosswordTiles(
target,
addStyle,
['selected-to-word-search', 'direction-marking-tile'],
);
}
}
TEMPLATE of ParentComponent
<div
class="csw-grid"
#input="handleKeyboardEvent($event as any)"
#mousedown.left.stop="handleClickEvent($event)"
#click.stop="">
<div v-for="row in 10" :key="row" class="csw-row" :id="`csw-row-${row}`">
<CrosswordTile
v-for="col in 8"
:key="`${col}-${row}`"
#click.right.prevent='handleTileTypeChange($event.target)'
/>
</div>
</div>
I tried to use v-if inside CrosswordTile, but it creates a new element, but I just need to modify the original one (to add/remove HTML classes from it basing on logic inside CrosswordGrid component).
How can I get access to the current component instance properties when using the composition API in script setup or how to replace the tag dynamically?
:is and is doesn't work at all.
I am new using Office UI Fabric JS, and I have just imported a SearchBox by following the steps here.
But how do I obtain the query and perform the search when the user hits enter? I have a search function already written in javascript, but I do not know where to call it. Is there some onSearch like property for the SearchBox?
Also, what exactly is happening within the <script>...</script> tags? I am not able to figure out what the following line means from the above link.
Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all SearchBox components on the page
Okay so here is what I did.
First you add an id element in the HTML for the input field.
<input class="ms-SearchBox-field" type="text" value="", id="searchText">
Then in my JS file, I added the following:
$('#searchText').on("keypress", function (e) {
if (e.which == 13) { // 13 is for enter
// call search function here
}
});
I was using JQuery already so it helped.
I have a Laravel blade template (.blade.php) which contains plain JavaScript as a section that will be later inserted into a generic wrapper. So the example would be:
<div>Some HTML content</div>
#section('js')
var a = "b";
someCall();
#endsection
Now PhpStorm would recognize the JavaScript if it was in <script> tag, which it can't be. So I've tried this which I would expect to work like a section highlighter hint:
#section('js')
// #lang JavaScript
var a = "b";
someCall();
// #endlang
#endsection
and this
#section('js')
// language=JavaScript
var a = "b";
someCall();
#endsection
But nothing worked (clickable language injection breaks other highlighting).
What am I doing wrong? How can I programmatically/commentarily set a section to be highlighted as a language I specify?
It's not yet implemented for Blade (although exists for Smarty and Twig templates).
https://youtrack.jetbrains.com/issue/WI-29254 -- watch this ticket (star/vote/comment) to get notified on any progress.
I need to open Google's latest reCAPTCHA widget in a popup (modal) dialog, a Dojo Dialog in my case, and I've got that working fine, but I just realized that the user cannot keyboard navigate to it.
When the reCAPTCHA widget is displayed in the main view, not a modal dialog, then of course the user can easily keyboard navigate to it.
Has anyone found a way to set focus on the reCAPTCHA widget so that the user can access it without a mouse when the reCAPTCHA is in a Dojo Dialog?
I did see that reCAPTCHA is generated within an <iframe>. Is that part of the hurdle - that keyboard navigation can't reach content within an iframe? I've even tried to call document.getElementById("recaptcha-anchor") since I saw that that's the id of the <span> that holds the "checkbox" - but that is returning null. How to reach an element within an iframe?
I have a jsfiddle example available for demonstration at
https://jsfiddle.net/gregorco/xqs8w5pm/5/
<script>
var onloadCaptchaCallback = function() {
console.log("jsfiddle: rendering captcha");
globalRecaptchaWidgetId = grecaptcha.render('captchaDiv', {
'sitekey' : '6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG',
'callback' : verifyCaptchaCallback,
'tabindex' : 2
});
grecaptcha.reset();
}
var verifyCaptchaCallback = function(g_recaptcha_response) {
console.log("Response validated. Not a robot.");
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit' async defer></script>
<div id="testDiv">
<button type="dojo/form/Button" onClick="captchaPopup.show();">Open reCAPTCHA</button>
</div>
<div data-dojo-type="dijit/Dialog" data-dojo-id="captchaPopup" title="Human Verification" style="width:350px;">
Cannot keyboard navigate to the checkbox!
<table>
<tr>
<td>
<div id="captchaDiv"></div><br/>
</td>
</tr>
</table>
</div>
Give this fiddle a try. Normally Dijit dialogs don't work too well with iframes in them because it doesn't know how to parse the content inside an iframe. In this case, we can use some of Dojo's functions to work around it. One notable thing to point out is that I've disabled autofocus of the Dijit Dialog so that it won't automatically focus the closeNode inside the dialog.
After the dialog loads, tab>space will select the captcha.
This may help others facing similar issue, but with Bootstrap modal dialog. I found the following solution on GitHub. Add the following Javascript to override Bootstrap:
Bootstrap 3x
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
Bootstrap 4x
$.fn.modal.Constructor.prototype._enforceFocus = function () { };
I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.