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
Related
I’m testing to use Docusaurus for a tutorial and documentation site. I want to customize the code block in markup (md or mdx) to for example add an edit button inside the code block that will open the code in plnkr.
My question is, how can I add a button (or several buttons) in the code block and add click events to the buttons?
I have tested Eleventy https://www.11ty.dev/ recently and in that I used markdown-it-attrs to add attributes in markdown.
const markdownIt = require("markdown-it");
const markdownItAttrs = require("markdown-it-attrs");
and then in the markdown I could add attributes to a code block indicating if that should have an edit button or not.
```js {edit=yes}
let a = 2;
console.log(a);
```
And then in a script find this code block and add a button and an event listener.
.hasAttribute("edit")
.insertAdjacentHTML("afterbegin", `<button style="float: right;" class="code_edit">Edit</button>`);
.addEventListener("click", () => {
I have tried doing something similar in Docusaurus by adding a script in docusausrus.config.js
scripts: [{ defer: true, src: "/mycustom.js" }],
I can see that this script is added in the head but the script can’t find any html elements. I don’t know where to start with adding attributes to the markup.
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 have two editors on the screen, one read-only. What I want to do is allow the user to select content from the read-only editor and paste it into the current position of the other by clicking a button. (the logic may manipulate the text which is one reason I don't want to use the system's clipboard.)
So far I have the function that is able to paste the text like as follows. (I am using the Angular wrapper which explains the presence of the CKEditorComponent reference.
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.change(writer => {
writer.insertText(pasteEvent.text, editor.model.document.selection.getFirstPosition() );
});
}
What I can't find from the documentation is how to extract the selected text. What I have so far is:
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
const selection = editor.model.document.selection;
console.log('clickPasteAll selection', selection);
console.log('clickPasteAll selectedcontent', editor.model.document.getSelectedContent);
}
The selection appears to change depending on what is selected in the editor's view. The getSelectedContent function is undefined. How do I get the content?
With a bit of poking around I figured out how to do this. I'll document it here on the chance that it will help someone down the road avoid the process of discovery that I went through.
On the source document I have a ckeditor element like this:
<div *ngIf="document">
<ckeditor #ckEditor
[editor]="Editor" [config]="ckconfig" [disabled]="true"
[(ngModel)]="document.text"></ckeditor>
<button mat-flat-button (click)="clickPasteSelectedPlain(ckEditor)">Paste Selected Text Plain</button>
</div>
In the component the function called on the click event is like this:
#Output() paste = new EventEmitter<PasteEvent>();
...
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
this.paste.emit({
content: editor.model.getSelectedContent(editor.model.document.selection),
obj: this.document,
quote: false
});
}
The PasteEvent is defined as an exported interface which I will omit here to save space. The content key will refer to a DocumentFragment.
Note that I am passing the CKEditorComponent as a parameter. You could also access it via an Angular #ViewChild declaration but note that my ckeditor is inside an *ngIf structure. I think that works well in Angular 6 but in the past I have had difficulty with #ViewChild references when the target was conditionally in the DOM. This method always works but use whatever method you want.
The event fired by the emit is processed with a method that looks like this:
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.insertContent(pasteEvent.content);
}
Because the content is a DocumentFragment the paste operation will include all formatting and text attributes contained in the selected source. But that's all there is to it.
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
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.)