For my current project i am creating a html editor.
How its needs to work
Elements Inside
Text Area - To type the HTML as text
Iframe - To show the typed HTML as real [rendering the string HTML to UI]
Some Buttons
Working Logic
A registered user typing something inside the text area :
ex :
<div style="border:1px solid red;">This is a div</div>
after that user clicks on a button [Converting to UI],so that we need to change the iframe content to the new value [value of text area]
after converting the iframe elements html will be
<html>
<head>
<style>
.mydiv{
}
</style>
</head>
<body>
<div class="mydiv" style="color:red">This is a div</div>
</body>
</html>
There is another button that which give back the iframe HTML to text area ,
All these works good [No big problems now except the firebug issue],But i need to integrate a better UI to customize the iframe content - >
ex : User clicks on a DIV on iframe ,so that time a pop up will arise to change the color and font of that div [it will be some color picker for choosing color and drop down for to choose font][i need to implement some more like this]. hope that it will not be a big pain.
So after that i need to get the modified value.
Ex: i changed the color of a div ,
so the returned value will be something like this
<html>
<head></head>
<body>
<div class="mydiv" style="color:gray;">Hello World !</div>
</body>
</html>
TO DO
Please note the style attribute [above ] ,its in inline style ,i
need to convert it into the class scope if the element have a class
defined
so i need to add/update the css class "mydiv" with new style's .
Assume that we are changing something on the body element of iframe ,body is a common element so i need to add/update the BODY scope in the css style block
ex:
BODY{
color:gray;
}
I hope that you guys got my idea,i need to implement something like this on my current project.
Is there anything slimier this ? [so that no need to worry ,i can use that]
or
How can i achieve this ? especially the grouping of css class.
I hopes that i need to use some kind of regular expressions ,but i am very weak on this.
Please help me to complete.
What i tried is here : http://jsfiddle.net/5PKXq/3/
Thank you.
Much as I think you're really reinventing the wheel here, I don't see what's keeping you from getting the contents of the textarea, and then just appending it directly to, I don't know, a container div (it doesn't even have to be an iframe, which I personally think is a bad way to go).
var $textarea = $('textarea'),
$container = $('div#container'),
$refresh = $('button#refresh'), // or something
;
$refresh.on('click', function () {
$container.empty()
.html($textarea.val())
;
// or something
});
Do note that that's untested code.
Related
How to double click on partial value of the text from a element using javascript.
Example:
Site : https://www.crm.com/resource-category/all/
Xpath of Html element : (//div[#class='col-12 offset-md-1 col-md-11'])[2]
text value : Helpful resources to get you oriented around CRM.COM
Now, I want to go to the above Site and get the text of the element with the above xpath. until this point its fine. Its a tag with simple text. But now, I want to double click on the partial text of the div element which is "Resources" in javascript
Attached image. tag has whole text value as "Helpful resources to get you oriented around CRM.COM" but I want code to double click the partial text which can be "resources to get".
please help
Inspected value on the website
#skr, Its a simple text element within tag. when I double click on partial text, a popup appears and I need to automate the scenario. Thanks –
Here is what you asked. I used jQuery, but you can use vanilla if you want.
$('.clickable span').click(function(){
alert('do something');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable">
<p>A small text so you can <span><u>click here</u></span></p>
</div>
OK, I'm going to get a bad rep here for asking too many questions. I have some javascript that dynamically changes content on my page. This works just fine. My issue is that I need to be able to tag all text with 'class="CushyCms"' in order to allow access to the site owner for easy content changes. Here is the basic code for the script, there is more than just the one set but this will give you an idea of what I'm doing. I tried adding the class tag inside the innerHTML, but Cushy couldn't see it.
<script language="javascript" type="text/javascript">
function changeText(idElement) {
if(idElement==0){
document.getElementById('tagmain').innerHTML ='<class="cushycms">Default text to display on page load.';
document.getElementById('tagtext').innerHTML ='<class="cushycms">More default body text on page load.';
}
</script>
I am looking for a way to put these text fields in a hidden div and pull the textContent from there. This is an example of a section that works with Cushy
<h2 class="cushycms">Preventative Maintanence</h2>
I'm beginning to get the hang of javascript, though Java is my primary language. I want to be more rounded i my langauge skills so I am trying to leanr as much as I can. Thanks in advance for the help.
Cushy CMS requires an actual HTML in order to edit. You could use the following:
HTML
<p id="tagmain-replace" class="cushycms" style="display:none;"></p>
<p id="tagmain">Default Text</p>
JS
var newText = document.getElementById('tagmain-replace').innerText;
if( newText != ''){
document.getElementById('tagmain').innerText = newText;
}
I would suggest changing the IDs to better work with your project.
I have a popup window working with the following code, but I need to amend it to apply a CSS class to either the HTML tag or the Body tag, so I can style the popup window differently than the normal site.
Here's the code I'm currently using:
<script language="javascript" type="text/javascript">
<!--
/****************************************************
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
****************************************************/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
}
// -->
</script>
I tried to add a line right after the win=window.open line that looked like this:
win.document.getElementById('body').className += " popup";
Unfortunately it didn't work. Any ideas on how I can make it so if a window is popped up using this javascript function it'll apply a CSS class to the window?
The HTML call to the function was with this code, if it matters.
<li>Play in pop up | </li>
Alternatively I've tried using this jquery version of a popup window (http://swip.codylindley.com/popupWindowDemo.html), but haven't figured out how to do it this way either. Thank you so much for your help, this has been killing me all day!
As you can see u are trying to reach object with id='body'.
However i think that your markup looks like
<body> ... </body>. If that's true then You can't use JS function getElementById because You have no ID on body element :)
The solution would be <body id='body'> ... </body>
Also You can use different JS function to select the body.
var body = document.getElementsByTagName( "body" );
win.document.getElementById('body')
will look for DOM element which matches the provided ID and in this case there is no element whose ID is body.
try to replace this with win.document.getElementsByTagName('body'). this should give you the body tag then you can apply the CSS class to it.
Since you will only have one body in your document you can directly assign the class to body tag in popup HTML itself.
I can't understand why this inner html script isn't working. I posted the javascript on jsFiddle. You can see it here: http://jsfiddle.net/JyV73/1/
I have two versions of the link. In the first the rewrite link is within a popup that needs to be closed and another opened with the proper text within the textarea.
In the second, there is just a link on the page that when it is clicked should hopefully open the popup with the proper text within wht textarea.
The only problem is that it doesn't work for the second version because of I must close the popup. If I comment out that first document.getElementById(id).style.display = 'none' then the plain link works, so my first thought is to create two function. But since this javascript is part of a php template file that is included I think it would be simpler on the php code to just solve this using pure javascript.
I'm still learning javascript, and any help would be appreciated. I hope I was clear. Thank you so much.
HTML
open
<div id="popup" class="popup"> Rewrite
</div>
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
<!-- This is the stuff that doesnt work for some reason Rewrite
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
-->
The Javascript
function rewrite(id, text) {
document.getElementById(id).style.display = 'none';
document.getElementById('new-text').innerHTML = text;
}
I am not entirely clear on what you are trying to do here, but from the way I read your code you want to set the value of the text area to a specific value.
here is how you do that: http://jsfiddle.net/JyV73/9/
function rewrite(id, text) {
$('#new-text').val(text);
}
You're not using pop-ups, you're using modals, which means its' a div inside the page that toggles visibility. You can access information from those components whether they are visible or not, fyi.
Still, Im not entirely sure on what you're trying to do here.
I changed document.getElementById('new-text').innerHTML = text; to document.getElementById('new-text').value = text; because it's the value attribute of the text box which you want to set.
Also each element on the page with an ID needs to have a unique ID (it seems like you might have been trying to reuse IDs at one point but maybe I'm wrong!)
I still haven't worked out exactly what you're trying to achieve but those changes needed to be made no matter what.
This code is sufficient to achieve your second goal though: http://jsfiddle.net/JyV73/19/
I added an onClick attribute (onClick="rewrite('popup', 'blah')") to your "open" link to do the writing to the textbox. :)
I want to create a very simple html editor (not WYSIWYG) based on jQuery.
My question is how can I make textarea or div possible to
write some text on it
then style i.e tags ( <strong>some stuff</strong> change <strong> color to blue for example)
I don't ask how to use regular expression and how to manipulate DOM later becouse it's my own problem to solve :D Just how to make "playgroud" for it ;)
When I use textarea it's hmm ( impossible? ) to style stuff inside, but also when I use div... hmm I can just write on div :D So how can I link textarea behaviour on div?
EDIT Here is something similar : http://codemirror.net/mode/xml/index.html
Check out this quick fiddle to show how you could do this possibly.
$('#edit').keydown(function(){
var text = $(this).val();
$('#preview').html(text);
});
this is your html
<textarea id="edit">
</textarea>
<div id="preview"></div>
and your css
#preview{ width:100%; background-color:#eee; padding:20px}
#preview strong{color:blue;}