I would like to make a custom toolbar for my quill editor. Therefore I would like to add another button to the toolbar for converting the text I enter into html code. I have tried several methods but they didn't work out. Please help me with an idea.
What i have in component.html:
<quill-editor [styles]="{height: '200px'}" [modules]="editorModules" (onEditorChanged) = "changedEditor($event)"></quill-editor>
And here is what i have in component.ts:
editorText='';
editorModules = {
toolbar: [
['bold', 'italic', 'underline'],
[{align:''}, {align:'center'}, {align:'right'}, {align: 'justify'}],
[{'indent': '-1'},{'indent': '+1'} ],
[{'size' : ['small', false, 'large', 'huge']}],
['color'],
['link'],
[{'list': 'bullet'}, {'list': 'ordered'}],
['image']
]
}
changedEditor(event: EditorChangeContent | EditorChangeSelection) {
console.log('editor got changed');
this.editorText = event['editor']['root'];
}
Here is a photo of my current Text Editor:
Text Editor
I would very much appreciate if you would try to help me, thank you.
Related
I'm working on a react application and I want to convert and download my html div into the pdf format. I have tried using window.print() but I want to download pdf directly and don't want to show the print popup.
I also want to use the pagebreaks which I have given in the css of the div. I have tried using few libraries such as html2pdf & jspdf. But not getting my pdf well formatted.
The html2pdf code snippet :
I am converting my div with id='report' on click of Download button.
downloadPdf = async () => {
console.log("In download PDF....");
let pdfjs = document.getElementById("report")
var opt = {
pagebreak: { mode: 'css' },
filename: 'DefectReport.pdf',
html2canvas: { },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait', }
};
html2pdf().set(opt).from(pdfjs).save()
}
<button style={{ position: 'fixed', top: '80px', right: '15px' }} className="add-user-form-submit-button" onClick={async() => {await this.downloadPdf()}}>
Download
</button>
PageBreak is working but images are not loading.
Can anyone help me in this ?
Thanks in advance :)
I am using Ckeditor as rich editor for text input in the Chrome browser. I also have added some html id tag for easy parsing by bs4 after the system getting the data.
The following is my setting in the html:
CKEDITOR.replace( 'editor', {
toolbar : 'Basic',
uiColor : '#9AB8F3',
height : '70%',
startupShowBorders: false,
})
And in the config.js:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.allowedContent = True;
};
Although I have already followed the instruction to allow all html tag content to be preserved with config.allowedContent = *; in the config.jd. However, it seems not working as I got the following results when getting data (by CKEDITOR.instances.editor.getData()):
<span style='font-size:11.0pt;'> content </span>
instead of this that I want:
<span id="news_content" style='font-size:11.0pt;'> content </span>
In other words, it still strips out all the html tag I added.
When I checked the source code, I found that the same textarea content was produced twice with the one with the tag being put in hidden format, i.e.,
<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">
And the editor produces another version in the real textarea that allows me to edit. However, this is useless because all the html tags are stripped there.
So, my question is, how to preserve the html tag in the real textarea so that I can parse the html with id tags after editing and submission. Could anyone advise on this? Thanks a lot.
I may not be able to answer my own question, but I like to share my solution with those encountering similar situation.
In short, finally I give up using ckeditor or any plug-in editor as many of them will strip off the html tag, which is essential to me in the subsequent process.
Thanks to html5, my solution is using editable div. The setting is very simple as below:
css:
#my-content {
box-shadow: 0 0 2px #CCC;
min-height: 150px;
overflow: auto;
padding: 1em;
margin: 5px;
resize: vertical;
outline: none;
}
html:
<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>
js script:
$('.editable').each(function(){
this.contentEditable = true;
});
So far, I am happy with it, it shows what exactly the html code showing and preserve all the tags I added. The only downside is it does not provide any toolbar for format editing. My solution is to make one for it, and via the following link you can get a very good tutorial as to making a toolbar with a ready-to-use demo as illustration.
https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657
Hope this helps.
does anybody know how to change functionality of button in wordpress content textarea? There is a "u" button (underline) which makes text
<span style="text-decoration-line: underline;">text underlined</span>
what I need is change functionality of this button to put in content:
<u>text underlined</u>
Can someone help?
You can get this formatting once you define the underline format in the init method.
HTML
<form>
<textarea id='instance1'></textarea>
</form>
<button id='get'>Test</button>
<div id='previewHTML'></div>
<div id='previewFormat'></div>
JS
var textArea_id = "#instance1";
tinymce.init({
selector: textArea_id,
toolbar: "underline",
formats : {
underline : {inline : 'u', exact : true},
}
});
var button = document.getElementById('get');
button.onclick = function(){
var contentHTML = tinymce.activeEditor.getContent({format: 'html'});
document.getElementById('previewHTML').innerText = contentHTML;
document.getElementById('previewFormat').innerHTML = contentHTML;
}
See this DEMO
I'm very new to using HTML. I'm required to use it for a project and I have no education on it at all. Here's a break down of what I need to do. I need to have a graph of text boxes (I have added some features to some of them provided by webix) and I would like to have buttons that allow me to add or delete rows. I'm using a webix datatable as well. Here is my code for the button. At the moment, I just want to add a row to the top of the chart. Right now I just have the add rows button. Once I figure this out, I can easily do the remove.
input type='button' class="sample_button" value='add row' onclick= grida.addRowCss(1, getElementById('grida').style.color = "black");
Here is my datatable code.
webix.ready(function(){
grida = webix.ui({
container:"testA",
view:"datatable",
columns:[
{ id:"stage",editor:"text", header:"Stage", width:150},
{ id:"component",editor:"text", header:"Component",width:200},
{ id:"epic",editor:"text", header:"Epic" , width:200},
{ id:"engineering", editor:"text", header:"Engineering", width:200, suggest:numSuggest},
{ id:"design", editor:"text", header:"Design", width:200, suggest:numSuggest},
{ id:"research",editor:"text", header:"Research", width:200, suggest:numSuggest},
{ id:"notes", editor:"popup", header:"Notes", width:200}
],
editable:true,
autoheight:true,
autowidth:true,
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"},
]
});
});
Everything is functional except for the button, which appears, but does nothing.
This is a link for the addRow webix function.
http://docs.webix.com/api__ui.datatable_addrowcss.html
Any and all help is appreciated, especially because I'm completely new to this.
Thanks
Edit1:
Thank you for the answer. So at the moment I make my button like this (before the script)
input type="button" value="Add row" onclick= 'add_row()'
And the table remains the same as before, however I've included the add_row function after the conclusion of the table. I'll include the last bit of the table for context
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"}
]
});
function add_row(){
grida.add({
stage:"Test 2",
component:"Strategy",
epic:"Design",
engineering:2,
design:0,
research:0,
notes: "This is a test"
},2)
}
I've also tried
$$("grida").add(...)
to no avail. The button is on screen, but doesn't work. I imagine I'm doing something out of order, but I'm not sure what.
You need to use add not addRowCss as in your code snippet
http://docs.webix.com/api__link__ui.datatable_add.html
add adds the new row
addRowCss adds css class to the row
grida.add({ stage:"Test 2", component:"Second Component"})
Image tags returned by KCfinder are incomplete on CKeditor and not displayed/saved correctly. Note that i am using an inline CKEditor and KCFinder for image upload.
Here are the integration codes:
ckeditor/config.js
config.filebrowserBrowseUrl = base_url+'/js/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = base_url+'/js/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = base_url+'/js/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = base_url+'/js/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = base_url+'/js/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = base_url+'/js/kcfinder/upload.php?type=flash';
On page HTML
<div id="page_body" contenteditable="true" class="full">...</div>
On page JS
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'page_body', {
on: {
focus: function(event){
var data = event.editor.getData();
alert(data);
},
blur: function( event ) {
var data = event.editor.getData();
var page_id = <?php echo $this->uri->segment(3) ?>;
var page_link =$("#page_link").val();
$.ajax({
type: 'POST',
url: '<?php echo site_url('admin/dashboard/ajaxChangePageData') ?>',
data: { page_id: page_id, page_body: data,page_link:page_link },
beforeSend:function(){},
success:function(data){},
error:function(){ alert("Error"); }
});
}
}
} );
</script>
Strange is that i can browse the server/upload without any error with KCFinder i can even select an image from the server and the image is shown successfully in the content. but the code width height info are not present after a reload. I figured that the html created for the image was incomplete
in source mode i see-
<img alt="" src="/gchalk/content/images/333(1).jpg" 300px; height: 224px;" />
The situation just gets worse if for the second time i make some changes to the div say add some text. The image is lost and its treated as text, the above piece of code is shown as
in source mode-
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
and it appears on browser/editor as -
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
I am tearing my hair for a day and cant find a way around. Please help me out to figure how to solve it.
Oh, and for the record the text is saved in MySQL as "TEXT" through the ajax post i am pretty sure its not a problem but still just saying!
I notice the image tag gets messed up in the default ckeditor(not inline) too.
Things that could effect the output of your code :
1- Magic Quotes when using PDO. if they are ON, turn them OFF in you php.ini! they are deprecated. Why am I telling you this? will because in your source mode you had 300px; height: 224px;" when you stored it and displayed it you had 300px;="" height:="" 224px;"=""
2- your CKeditor package. Try to download and reupload your Ckeditor (Update it to the last version if possible)
other than that, I do not see anything wrong with the code you have provided. Good luck!