I'm working on creating a way for editors at my school's newspaper to be able to go to a page that would have places to type in info (ie. img url, titles, captions) and it would output HTML code that is already stylized.
So they type into the form in the title area: "Title"
And in the paragraph area: "This is a test"
and it would output something like this:
<div class="div1">
<span>Title</span>
<p>This is a test</p>
</div>
(div1 since since it's the first one you put and could add more later)
I've been looking into finding something like this, which I know it's possible, I just don't know where to start with this or what I would even google search. Any help would be greatly appreciated.
Thank you.
EDIT: We can't set up a Wordpress due to contracts with outside companies.
It depends on whether you want to implement a solution yourself or use what is already out there.
This type of functionality is already built into platforms like Wordpress and SquareSpace out of the box via a WYSIWYG (what you see is what you get) editor - similar to Stackoverflow's question box.
If you are looking to implement a custom solution then I would recommend looking into into markdown languages.
For example, here is one markdown javascript library called Remarkable:
https://github.com/jonschlinkert/remarkable.
This code snippet is taken directly from their github README
var Remarkable = require('remarkable');
var md = new Remarkable();
console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>
As you can see the markdown text is passed to a render function and it translates into html.
Alex
Related
I am attempting to create a search bar for looking through text on my website without using external code (such as google's custom search engine).
I have been searching this for a while and without using php it doesn't seem like there is a good solution.
I have so far found this fiddle, but don't entirely understand how it works as I am new to js http://jsfiddle.net/pdgucocw/ (code from jsfiddle copied here:
function contains(text_one, text_two) {
return text_one.toLowerCase().indexOf(text_two.toLowerCase()) != -1;
}
$("#searchText").keyup(function(){
var searchText = $(this).val();
$("ul li").each(function() {
$(this).toggle(contains($(this).text(), searchText));
});
});
right now I have this:
<p id="q">
Some text, which is a lot of text, text text.
</p>
<p id="searchthru">
Lots of text
</p>
<form>
<input name="search" >
<button type="submit" name="Submit" onclick="return false;">Submit</button>
</form>
Which is, as you can see, just HTML.
I know this question is rather broad right now, so I'll try to specify what i'm attempting to do with it.
I have a landing page on the website, and then another page with quite a bit of text on it. The text page is well kept with aptly named headers and id's and so forth. I want a search bar on the text page (or even the landing page, but unless php is the only solution I would like to stay away from it).
Then, when someone puts something in the search bar, it can either search through the text in the headers and present the match, or search through all the text and then present the header text as the "options" for which to jump to in the search.
edit: This is to say to do whichever is more feasible/better user experience. I don't want the search bar to do both simultaneously, that makes little sense in my application.
For example, they type in "Water Parks" and they will be presented with options such as "Water Parks" "Parks" "Amusement Parks" "Theme Parks" etc. Then when they click their option, they will be brought to the correct section. If they type in "water" then the search bar will only bring up "Water Parks" assuming that the word 'water' is used multiple times but only in the Water Parks section.
I would very much appreciate it if someone would explain (as if to a 5 year old who is really good at understanding syntax but doesn't know what the functions do) the javascript code as they write it.
Eventually I would like to split up the text into many pages and I think that I would have to use php for that (from what I've read so far) but I would REALLY prefer a pure js solution. If this is impossible or otherwise just a bad idea, feel free to teach me php. Thank you so much.
I will be straight to the point how do i design this with css and html or are they external plugins I can use to achieve this. What we write our questions on stackoverflow. I have a client that needs this on their blog area
It is called it rich text editor and uses JS/jQuery, (or some other languages), to make it what it is.
After inspecting it, it looks like this text area is custom made, requiring much time and expertise.
I would advise using a different rich text editor. I have normally used CKEditor, but you could also use TinyMCE. There is a bunch more, just google "rich text editor".
As far as I know the best is, very easy to use and super powerful:
Example: https://jsfiddle.net/dalinhuang/5nt56n0y/
HTML:
<script src="https://cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<textarea name="editor1"></textarea>
JS:
CKEDITOR.replace('editor1');
Offical site: http://ckeditor.com/
I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.
More specifically I am trying to implement a wufoo form in a joomla article, but I need to add text, in addition to the code. I tried to just paste the code the article but all I get is the code as text. What am I missing? If it helps I have installed jCode, but I cannot find a way to add text as well in addition to the form.
I am open to other ways as well to solve this issue.
Joomla by default doesn't allow you to import code like PHP or Javascript through articles. For this, a plugin need to be used. I see you've tried using jCode, I've never used this before so can't provide any documentation on it.
I would strongly recommend using Sourcerer as a plugin for importing Javascript and PHP through your articles. It's free, well documented, well supported and easy to use. Once you've installed it, enable the plugin. Then in your article, you can use something like the following:
{source}
<script type="text/javascript">
alert('Hello world');
</script>
<?php
echo '<p>Hello world</p>!';
?>
{/source}
There will be a small button under the article textarea for Sourcerer which will bring up a popup window for you to enter all your code in.
Hope this helps
Alternate options are for your problem
If you are an admin user Remove filter option for article.
Go to article section -> Options -> Text Filter Options -> Choose your user group -> Apply no filter.
Another option is to create a module and assign that module to your article like below.
Create a module that have your forms. For module development tutorial
And create an article and set the module inside that like.
{loadposition contact_form_pos}
Inside your article just mention the module position like above
for more
Hope it make sense..
I want to do something as simple as emulate the buttons as can be seen here—albeit in jQuery and Django.
I have scoured the net and found nothing, which surprises me, but I figure it is because I am not using the right terminology.
Right now, I want to include inline tags like strong, em, and code and more tricky things like links and images (using Markdown and HTML syntax).
I figure that there are two to three different states for jQuery to act on:
Some text has been selected; the text is decorated.
Nothing has been selected; jQuery prompts the user to enter the text to be decorated.
The script can discern between highlighted text and a highlighted URL to decide for when it needs to produce a valid link.
I have already done some jQuery stuff, so the basics of it should be manageable (any potential JS regex aside); I just have no idea to which extent jQuery supports this.
You can utilize a Rich Text editor to perform your tasks. This blog post lists some of them -
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
I have used TinyMCE and it is also very good. Apart from that I have used EphoxEdit Live( http://editlive.com/what-new ) and that is pretty good(though not a jQuery plugin) for heavy usage like content editing.
What you are looking for is a WYSIWYG(What You See Is What You Get) editor.
tinymce comes to mind.
or you can search the jQuery Plugins Page
This might be a good place to start: jQuery WYSIWYG Plugin