I'm building a webpage that allows my users the ability to enter rich text and ultimately upload that rich text to my database. I am using Quill.js as my rich text editor via the Quill CDN. I have setup Quill successfully. The Quill editor and toolbar containers are setup as so:
<div class="quill-toolbar" id="toolbar" style="margin-left: 50px; margin-right: 50px"></div>
<div class="quill-editor" id="editor" style="margin-left: 50px; margin-right: 50px"></div>
I have also written a script to initialize Quill.js with the "snow" themed editor enabled. That script is below:
<script>
var FontAttributor = Quill.import('formats/font');
FontAttributor.whitelist = [
'sans-serif', 'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
];
Quill.register(FontAttributor, true);
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'font': [] }],
[{ 'align': [] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
['link', 'image', 'video', 'formula'],
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions,
},
placeholder: 'Start writing...',
theme: 'snow'
});\
</script>
My struggle appears when I try to position the Quill toolbar properly. Using inline CSS, I was able to position the Quill editor in the center of the screen with 50 pixel margins, like you saw when I setup the toolbar and editor containers: style="margin-left: 50px; margin-right: 50px". However, I am unable to do the same with the Quill toolbar.
How can I setup the toolbar so it has 50 pixel margins on each side of the toolbar as well as the editor?
Status Update
I have continued to experiment with CSS changes to add margins to the toolbar. The easiest solution I could find was to set margins to the <body> for the page. However, now I am having a problem with my navigation bar. The <body> appears like this <body style="margin-left: 50px">. However, the navigation bar is now misplaced, and if I add a negative margin like this: <div class="topnav" style="margin-left: -50px">, their is a gap on the right side of the navigation bar. Why is this happening. It changing the margins of the <body> the best solution?
Related
I am trying to implement intro.js in ionic 4 but the highlighted text is not visible
enter image description here
here how i implemented the code in angular 7.
intro() {
let intro = introJs.introJs();
intro.setOptions({
exitOnOverlayClick: false,
showStepNumbers: false,
showBullets: false,
overlayOpacity: 0.8,
doneLabel: "GOT IT",
nextLabel: "GOT IT",
steps: [
{
element: '#search-img',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
}, {
element: '#search-text',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
},
{
element: '#search-box',
intro: "Search here by accounts, contacts, etc.",
position: 'middle',
},
{
element: '#profile',
intro: "Click on profile icon to view your DPN account & saved
list",
position: 'bottom',
floatVArrow: 'right'
}
]
});
intro.start();
}
You can achieve this by using the highlightClass attribute for that particular step so that the step points to a class (I called it .my-bespoke-class) where you use CSS to do whatever you like to the highlight eg changing the opacity or colour.
I would need to check but I am pretty sure you can change the overlayOpacity for a step too (you certainly can in Shepherd).
let intro = introJs();
intro.setOptions({
exitOnOverlayClick: false,
showStepNumbers: false,
showBullets: false,
overlayOpacity: 0.8,
doneLabel: "GOT IT",
nextLabel: "GOT IT",
steps: [
{
element: '#search-text',
intro: "Search here by accounts, contacts, etc.",
position: 'top',
highlightClass: '.my-bespoke-class',
overlayOpacity: '1'
}
]
});
intro.start();
#search-text{
width: 300px:
margin: 10px auto;
}
.my-bespoke-class{
background: orange;
font-size: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/intro.js-mit#3.0.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/intro.js-mit#3.0.0/intro.min.js"></script>
<html>
<body>
<div id="search-text">This is the target element</div>
</body>
</html>
Further information can be found in the official docs which you can find at https://introjs.com/docs/
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.
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
I want to hide this code when users view with right click "Page source". How can I do it?
example 720pizle.com/izle/altyazi/american-sniper.html there is no embed code or video link in source code
You can't totally hide it, but you could use a tool to make it slightly more difficult to read for someone who isn't that technical. However, anyone with basic technical knowledge will be able to figure out the actual embed code using a developer tool (such as the Chrome dev tools, Firebug, etc).
http://www.dynamicdrive.com/dynamicindex9/encrypter.htm
That will make the code harder to read.
It isn't 100% secure though.
For instance, your code:
<div id="film">...</div>
<script>
jwplayer("film").setup({
width:640,
height:360,
playlist: [{
file: "https://videolink.mp4",
image: "https://videopic.jpg",
tracks: [{
file: "http://video.srt",
label: "English",
kind: "captions",
"default": true
}]
}],
captions: {
color: '#FFFFFF',
fontSize: 10,
backgroundOpacity: 50
}
});</script>
Would turn into:
<script>
<!--
document.write(unescape("%3Cdiv%20id%3D%22film%22%3E...%3C/div%3E%0A%3Cscript%3E%0Ajwplayer%28%22film%22%29.setup%28%7B%0A%20%20%20%20width%3A640%2C%0A%20%20%20%20height%3A360%2C%0A%20%20%20%20playlist%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20file%3A%20%22https%3A//videolink.mp4%22%2C%0A%20%20%20%20%20%20%20%20image%3A%20%22https%3A//videopic.jpg%22%2C%0A%20%20%20%20%20%20%20%20tracks%3A%20%5B%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20file%3A%20%22http%3A//video.srt%22%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20%22English%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3A%20%22captions%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22default%22%3A%20true%20%0A%20%20%20%20%20%20%20%20%7D%5D%0A%7D%5D%2C%0A%20captions%3A%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%27%23FFFFFF%27%2C%0A%20%20%20%20%20%20%20%20fontSize%3A%2010%2C%0A%20%20%20%20%20%20%20%20backgroundOpacity%3A%2050%0A%20%20%20%20%7D%0A%7D%29%3B%3C/script%3E"));
//-->
</script>
But someone could un encrypt it using a tool, or just use Firebug, etc, to see the actual output.
Yes It is possible. create session variable in php and try to run video code
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
I have two questions regarding the back button in the Navigationbar element of Sencha Touch 2.
My Code
var oNavigationbar = {
docked: 'top',
backButton : {
margin: 7,
docked: "left",
ui : 'back'
},
items: [
Ext.create("Ext.Button", {
text: "Button1"
},
Ext.create("Ext.Button", {
text: "Button2",
align: "right",
}
],
};
Question 1
How do I stick the back button to the left side of the navigation bar?
If I set align:"left" Button1 is still on its left side.
But if I dock it to the left side I have to set a margin, which I rather avoid.
Question 2
How do I set the default text of the back button to something else then "Back".
Which configuration properties do I have to set?
not sure what you mean in q1... AFAIK Navigation Bar (as a subcomponent of Ext.navigation.View) has back button already left aligned.
Q2:
Ext.define('MyNavigator', {
extends: 'Ext.navigation.View',
xtype: 'mynavigator',
config: {
defaultBackButtonText: 'Go Back',
// back button a-la iPhone
// useTitleForBackButtonText: true
....
})
see at http://docs-devel.sencha.com/touch/2-0/#!/api/Ext.navigation.View-cfg-defaultBackButtonText for more info...
Cheers, Oleg