I am about to use CKEditor for post functionality. But I don't need a toolbar for the post functionality. I need to provide a preview of the post that should be HTML version, preview functionality should be done by onkeyup/any button. And preview section will be below the CKEditor.
Image http://grab.by/H5Sk
The mail purpose is to provide a formatted post to the user. If I am using textarea then it returns a string and I can not display as user entered in textarea.
You should use editor#change and editor#contentDom events. You should not disable the toolbar like
CKEDITOR.replace('editor1', {toolbar: []})
because it will disallow any type type of the content in your editor as the toolbar corresponds with Advanced Content Filter, unless you disable it by setting config.allowedContent = true, which is not recommended.
See the JSFiddle.
HTML
<textarea id="editor">
<p>Hello world! This is some link.</p>
<p>And there is some <s>deleted</s> text.</p>
</textarea>
<div id="preview"></div>
JS
var preview = CKEDITOR.document.getById( 'preview' );
function syncPreview() {
preview.setHtml( editor.getData() );
}
var editor = CKEDITOR.replace( 'editor', {
on: {
// Synchronize the preview on user action that changes the content.
change: syncPreview,
// Synchronize the preview when the new data is set.
contentDom: syncPreview
}
} );
CSS
/* Hide the toolbar with CSS */
.cke_top { display: none !important }
For ckeditor:
Test
CKEDITOR.replace('editor1', {toolbar: []});
Another solution:
This is What Stackoverflow is using
Related
I have added magnific popup gallery in my web page, everything works great. Just I want to know, is there any possibility add bullets in popup gallery below image in .mfp-bottom-bar.
The gallery example on Magnific's demo/homepage shows at least one way to achieve this, by feeding some markup into the return value of a function in the titleSrc option in the image option of the popup. In that example (from the page's source):
$('.popup-gallery').magnificPopup({
...
image: {
...
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
The above case appends a <small> element to the current link's title attribute value/text, but you could presumably return some other <ul><li>...</li></ul> markup, or use jQuery to grab some existing <ul> in the markup (if relative to the current item, then presumably using item.el to help locate it).
I'm interested in determining if its possible for me to completely customize the drop-down that appears in response to a user typing text into a select2 text field (using the react-select component).
I want the text to generate output similar to what appears in Apple's Spotlight OS feature (see screenshot - in which I typed the text 'mini').
Is this possible using react-select and if so - how ? Are there samples ?
I found this repo ( https://github.com/bvaughn/react-virtualized-select/ ) which seems like it supports what I want to do - but its no longer supported.
Thanks
Dave
Of course you can customize the contents of the dropdown with the components framework implemented into react-select. You have to overwrite the Menu component to add new content to the dropdown. You might also have to set some styles with the styles api.
const Menu = ({ children , ...props }) => {
return <components.Menu>
<div> My custom content </div>
{children} // This contains the `MenuList` component with the options
</components.Menu>
}
<Select
{ ... }
components={{
Menu
}}
/>
To achieve something like Apples Spotlight feature you have to do some more advanced customisation. This example shows a basic implementation of how you could do it.
In Sharepoint 2010, I have built a custom page layout and have applied custom styles. Page layout consist of single rich text editor HTML field. Now I have a need to add some custom text next to the selected text when a particular markup Style is applied.
I can do that using jQuery once the page is saved but that is after the user has finished editing.
The requirement is for them to see the text while they are still in edit mode so that they get a true WYSIWYG experience . Below is the jQuery code I am using to display the text after page is saved:
<script type="text/javascript">
$(document).ready(function () {
$('.topicpagelayout2-styleElement-H3').wrap('<div class="hd leftcontent" />');
$('.topicpagelayout2-styleElement-H3').append('<span class="top">Top</span>');
$('.topicpagelayout2-styleElement-H3').addClass('header2');
var count=0;
$('.leftcontent').each(function(index) {
count++;
$(this).attr('id','div_'+count);
});
//$("span.ms-formfieldlabel").css("display", "none");
setLeftContent();
});
</script>
You can use use css content for this.
See this if it may give you some idea
http://www.quirksmode.org/css/content.html
I'm working on an Adobe Air application. It's base on html and js. So there are img, input and textarea tags, which will show a native menu when right-click. For example, right click on the img tag, It shows a native menu with save image menu-item.
I've tried using normal javascript methods, like event.preventDefault(), and It doesn't work at all.
So how to prevent those native menus?
I found it very easy to solve this problem after 7 months. It's something about contextmenu.
Example:
Here is an <img> now.
<img src="https://www.google.com/images/srpr/logo4w.png">
Add a contextmenu event listener for it, and prevent its default bebaviour.
<img id="a" src="https://www.google.com/images/srpr/logo4w.png" >
<script>
$('#a').on('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
});
</script>
Then the default menu disappears.
Demo jsfiddle.net
i have a module. I need it to be able to display a modal dialog.
Seems like I need to inject a div into the main DOM and then parse it. Is this the right approach. Are there samples (or even a util- seems like this would not be that uncommon)
There are samples for almost everything in DojoCampus and in the tests directory:
var pane = dojo.byId('thirdDialog');
thirdDlg = new dijit.Dialog({
id: "dialog3",
refocus:false,
title: "Programatic Dialog Creation"
},pane);
Note that this particular widget doesn't need to be inserted to the DOM manually - it appends itself to the end of the page. Here the second parameter to the Dialog constructor - pane - is a reference to the node whose content should be displayed inside the Dialog.
UPDATE: Based on the new information you should try this:
dojo.require("dijit.Dialog");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "Insert text here"
});
secondDlg.show()
});
As shown here, you can pass Dialog content in the content attribute. (This sample is executable in FireBug on any page that includes Dojo.)
UPDATE: So, you want to have a form inside the Dialog? Nothing special here. Hey, you can even have a dijit form over there! Be sure to check out that DojoCampus article on Dialogs to learn how Dialog can communicate with a dijit form.
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.addOnLoad(function() {
secondDlg = new dijit.Dialog({
title: "Programatic Dialog Creation",
style: "width: 300px",
content: "<h2>Sample Form</h2>" +
"name: <input dojoType='dijit.form.TextBox' type='text' name='name' id='name'>"
});
secondDlg.show()
});
(Again this sample is executable in FireBug on any page that includes Dojo.)