i am using CKeditor as a text editor in my rails app. so i just download it from the website, then included it. I added this code too:
<script type="text/javascript">$(document).ready(function() {
if ($('textarea').length > 0) {
var data = $('textarea');
$.each(data, function(i) {
CKEDITOR.replace(data[i].id);
});
}
});</script>
The problem is that when i save the content of the text area in the database, and display it after this, from my database, the formatting disappears (for example, what i underlined, is not underlined anymore..)
What can be the problem?
If your content is underlined with a class and not the <u> tag, it might be that you are missing the CSS that makes the class underlined. Meaning if in your content you have something like this: <span class="Underline"> Dr. Whooves </span>, you need the CSS rule for the Underline class to make the underline effective - something like .Underline { text-decoration: underline; }.
Another reason might be that something is overriding the underline tag, whatever it is. Inspect the content that should be underlined using your browser Developer Tools and check the effective style and the overwritten styles.
It would help in troubleshooting if you could provide what your content looks like. A small example of the HTML you produce. Also it might help to show the code you use to output the HTML, but in this case it might not be relevant.
Related
I have a div containing a span (the span could be a paragraph, too; I don't care):
<div id="aDiv">
<span id="aQuestion">What's next?</span>
</div>
I would like to be able to toggle the span's text's appearance between disabled and enabled. I've tried stuff along the lines of
document.getElementById('aQuestion').setAttribute("disabled", "disabled");
but haven't had any luck: The text doesn't have that grayed-out "disabled" look. When I inspect the element, I can see the attribute has been added. In fact, even if my original code looks like this:
<div id="aDiv">
<span id="aQuestion" disabled>What's next?</span>
</div>
the text doesn't appear disabled.
It seems I'm going down the wrong path, but online searches haven't resulted in a solution. Is there any way to accomplish this? I realize the concept of text being disabled doesn't exactly make sense, since they don't involve user interaction, but I need that look.
The only thing I've come up with is to use CSS, something along these lines:
CSS:
<style type="text/css">
.disableMe {
color:darkgrey;
}
</style>
The HTML:
<span id="aQuestion" class="disableMe">What's next?</span>
The JS:
document.getElementById('aSpan').classList.remove('disableMe');
This kind of gets me around the problem with the text, but some of my text spans will have adjacent spans containing bootstrap icons, and I need these to appear disabled, as well. Am I overlooking something very obvious?
Thanks in advance.
It's a span element so it doesn't have a disabled modifier, just create a css class that gives the look you want and use that.
span includes only the global attributes. So you cannot disable it. More here
Main Target :
To create a website that will have a live preview of an HTML/CSS code.
More specifically :
The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs.
Image of what I am trying to do :
So, in my Previous Question I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea. I would like to add that the code in the div tags use xmp tags because some parts are editable from the user.
Now, I have replaced the divs with textarea tags but the EDIT function does not work.
Main Question :
How do I edit parts of a textarea text? Below, I made it work for a div tag but not a textarea. How can I make the following work for a textarea?
$('input#thebox1').keypress(function(e) {
console.log($(this).val());
if(e.which == 13 && $(this).val().length > 0) {
var c = $(this).val();
$('.popup1').removeClass().addClass(c).text(c);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Replace Title Background Color: </div><input type="text" id='thebox1'>
<div id="copyTarget1" class="innerbox css">
<blockquote>
<pre>
<code>
.title
{
background: #<b class="popup1" style="color:#FF0000;">value </b>;
vertical-align: middle;
}
</code>
</pre>
</blockquote>
</div>
<br><br><br><br><br><br>
I thought about taking another approach to make your life easier using Ace (Cloud9 Editor). It is an awesome solution to get code editors for different languages. All built in JavaScript. It is quite easy to integrate. I just downloaded it to create the case you are trying to build.
You can find the example I have just made here: https://dubaloop.io/dev/html_css_js_editor/
Basically, you load the library for ace:
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
Then you create a "pre" container for your HTML, CSS, JavaScript editor:
<pre class="editor" id="editor_js">
function foo(items) {
alert('works');
}</pre>
You will be able to convert them into code editor by using the function:
var editor_js = ace.edit("editor_js");
editor_js.setTheme("ace/theme/monokai");
editor_js.session.setMode("ace/mode/javascript");
It will generate a nice code editor that can through error, warnings, etc. You also have different themes. It is very user friendly as you could see. In my example I just get the content of each code container and send it to an blank iframe that. In order to retrieve the content you can use:
editor_js.getValue();
Check the source code for example I sent you above. I also created .zip with the example here: https://dubaloop.io/dev/html_css_js_editor/example.zip
Have a look to see if this would work for you.
GitHub repo for ACE: https://github.com/ajaxorg/ace-builds
I hope it helps.
UPDATE:
I decided to update the response to replay to your last comment. A few things about it:
First, I updated the code in the link I sent you previously: https://dubaloop.io/dev/html_css_js_editor/
The idea was to check the guide to see how you can manipulate the input and adjust it to what you need. They have great manipulation options. This is the guide: https://ace.c9.io/#nav=howto&api=editor
I just made a short version of what you are trying to do: I am replacing the content for the <h1> in HTML editor, by entering it in a textfield input; similar to what you are trying to achieve. I set the html code editor as a readonly so you cant edit on it. Have a look and let me know.
Second, I created another example using your code. You can check it here: https://dubaloop.io/dev/html_css_js_editor/example.html
I noticed that the first problem you were having was related to how you were triggering the preview update ($('.innerbox').on("keyup"...)). There was not keyup event there. For now I set it on any input when you hit enter. The other big problem, and probably the main one you had was how you were accessing the iframes through jQuery. You need to use $('selector').contents().find('selector2'). Finally another problem was the you were retrieving the data getting the attribute value from your code wrapper. What you need to get is the actual content as flat text in order to avoid other html content. In order to do that you need to use .text() (Please check the updated GetHtml() and GetCss() functions).
I hope you can make it work from here. Still, I like option 1 :P
I hope it helps.
I run a site where users submit basic news articles. I want to add some formatting features for their submissions, quite similar to the markdown feature used here.
For example, user can add:
**This should be bold**
And the text appears bold. Or user adds > at the beginning of the paragraph:
> This could be a lengthy paragraph
And the paragraph gets wrapped in <blockquote>.
Note that I do not want it to be processed server-side.
How can I do this using Javascript or jQuery?
EDIT:
I found a way to make text within astericks bold using the following:
<div class="content">The following will be bold: **I am bold**</div>
jQuery:
function markdown(markdownable) {
var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
markdownable = markdownable.replace( bold, '<span style="font-weight:bold">$1</span>' );
return markdownable;
}
$('.content').each(function() {
var markdownable = $(this).html(),
content = markdown(markdownable);
$(this).html(content);
});
Fiddle.
However, I still have no clue on how to make a paragraph starting with > wrapped into <blockquote>.
The Markdown solution that Reddit uses is freely available, lightweight, well documented and does everything you asked for and more:
http://daringfireball.net/projects/markdown/
Please have a look at this pluggin markitUp!
markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.
Hope this will help you.
I've got a web app with a fairly complicated UI, and a portion of the screen reserved for content.
If possible, I would like to make it so that when the user uses the browser's built-in text searching (CTRL+F), any text in the UI is ignored and only the actual content is searched.
Is this doable? CSS and JavaScript are acceptable
(I realize I could probably render the text to a <canvas> but it isn't worth the effort there)
You could inject your UI text using the CSS content property. Generated text like this is not searchable since it is part of the document style rather than the content.
For example:
If you have a button in your UI such as <button id="dosomething"></button> you could add some non-searchable text inside it using the following CSS:
#dosomething:before {
content: "Click Me";
}
I've created a fiddle to demonstrate how this works: http://jsfiddle.net/3xENz/ Note that it even works with <a> tags.
I recommend you stick with the :before selector because it works in IE8, while the :after selector does not.
If you have a more complex UI element, you can also add another element inside of it to hold the text content. For example:
<div id="complexcontrol"><div class="text"></div></div>
with the following CSS:
#complexcontrol .text:before {
content: "Click Me";
}
Since screen readers probably won't process these styles properly you will still have the same accessibility problems as you would have with images, but it would be much easier to maintain and also allows a more responsive design.
To expand on nullability's answer: You can also store the text in a data attribute like that:
.css-text [data-content]:before {
content: attr(data-content);
}
<div class="css-text">
Hello, <span data-content="World"></span>!
</div>
Cf. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access
My suggestion would be to make the area you don't want to be searchable an image or have it use something like flash. The only solution I was able to find was this. But using that is completely up to you.
I need to provide information for various clients when they log in to build a profile. I will be using HTML and Javascript for this purpose. What I would like is a concise set of instructions followed by an option to show more detailed instructions. If the client chooses to see the more detailed instructions, the field (ideally) expands to show more content.
Other ideas that achieve a similar result are also welcome, as are comments that simply point me in the right direction. Preliminary research hasn't turned up much for me; I imagine this is largely due to being a novice and not knowing what to look for. Is this a conditional visibility issue, or is that something else entirely?
Many thanks for any help.
Place the hidden content in a separate container element with its display initially set to none. Then, add an onclick handler to a link that shows the content. That handler should set the display value to block or inline. Here is one way to do it (there are many). Set up your HTML something like this:
<p>
[Instruction text here]
more ...<span class="more">
[Additional content here]</span>
</p>
Some CSS to initially hide the additional content:
.more
{
display: none;
}
Create your expandContent() function:
function expandContent(link)
{
link.nextSibling.style.display = "inline";
}