I am creating a link URL in my website and using it in the blog as href for anchor tag.
This is how my URL looks in website
https://www.mywebsite.com/sets/get-the-look-bella-hadid---london/4558
After passing it to the blog the link parse to something like this
https://www.obsessory.com/sets/get-the-look-bella-hadid—london/4558
I don't understand why is it converting --- to — ?
Have anybody faced same problem anywhere ?
People voting to close the question, try and understand the question.
I guess you are using WordPress? The editor for text handles hypens and dashes automatically - as many other editors out there do.
https://codex.wordpress.org/Function_Reference/wptexturize this is doing the magic in WordPress.
You might need to insert your link as link instead. See https://en.support.wordpress.com/links/
Or in functions.php you can disable the magic (but a real link is the better choice):
remove_filter( 'the_title', 'wptexturize' );
remove_filter( 'the_excerpt', 'wptexturize' );
remove_filter( 'the_content', 'wptexturize' );
This isn't really a programming problem (and therefore, isn't appropriate for StackOverflow), it's a problem with your blogging software.
You're most likely pasting the text into a rich text editor like WordPress has and it's converting the text on you. The problem is, WordPress and other software try to convert raw URLs into links, but they also try to make the content pretty. By prettifying the content, it's converted multiple dashes into an em dash. Then, when it tries to turn that into a link, it only gets part way because the em dash is not a valid URL character.
To work around it, don't rely on the editor to convert links for you. Write some text you'd like for the link, highlight it, then use whatever "link" button is in the editor to make it an actual link.
You might also be able to use a raw HTML editor or a Markdown editor (like StackOverflow has) to craft the link properly.
Related
I followed advice from this site on how to embed
the code that i found on how to recreate the
Animated Sign In Form … shown here:
https://youtu.be/5uANWpkuPww
I was hoping to modify it, so that one face of the
animated circle contained text inviting people to
subscribe to my mailing list … with the clickable
link causing the circle to rotate, allowing people
to then enter their name and email address.
In any case, I got the code from:
https://github.com/DaftCreation/Animated-Sign-In---Sign-Up-Form
and tried it out on w3schools.com
Here is the result:
https://www.w3schools.com/code/tryit.asp?filename=G15FD7XT1JF6
If anybody will be kind enough to get it to work,
please save it on w3schools.com … and post the link / URL
here on stackoverflow.com
I am guessing that the guy that created it, may have left out
a character or two, when he cut and pasted it, which has
resulting in the code not working correctly ... and be sure to
let me know what was wrong with it, so that i can learn from this.
Thanks : )
Your code is fine - the only real problem with is that you didn't wrap your jQuery in between <script></script> tags. Use the link below and you can see it working.
https://www.w3schools.com/code/tryit.asp?filename=G15LTVZCBB4R
Also you need to make sure your jQuery link is valid (just copy and paste the one from my code - it is via Google CDN).
I have my own forum, currently I have features like editing, deleting and reporting both posts and replies but now I want to add features like BBCode. Right now I only want to try a [QUOTE][/QUOTE] feature where if the user selects the quote button it will take the quoted post, place it in a textarea with the quotes around the text. Then when it is submitted the page displays the quoted persons name and quote along with users post.
E.g. [QUOTE name=Jane]This is a quote[/QUOTE] Hello.
"Originally posted by Jane: This is a quote." Hello.
I'm sure I could use JavaScript / AJAX to get the user quoted and putting their post in a textarea with the [QUOTE] tags but not sure about have it display when the page loads as the example I mentioned about.
If I can get this to work I could expand on other BBCode but right now this is the major feature I want.
It will probably be easier to use a third-party BBCode parser than to write your own, and then either use configuration to disallow other formatting options, or to remove those tags from the text.
If you choose to write your own parser, I recommend a test-driven approach. It can be tricky to handle things like escape characters, and there are often corner cases you may not discover right away.
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.
I'm using prettify for color coding but my code is still flat and not indented correctly, how do I format it so it looks similar to github gist or pastebin? (I'm aware you can embed from these sites but it doesn't look very professional).
If your code is flat, you will need to rewrite it - as in github. Maybe you could even find an autoformatter, but it will be as language-dependent as the highlighter.
If your code is only displayed flat, you might need a <pre> tag around it or set the css property white-space:pre to the surrounding element.
I would use gist.github.com. It looks petty professorial. If still want only CSS and you are on ruby CodeRay.
Depending on your needs, CodeMirror's automatic formatting might suit.
With their formatting extension, you can just do:
editor.autoFormatRange(from, to);
Here's a demo of it in action.
You'd also get the ability to edit your code snippets - and if you don't want that, you can turn it off with the editor.readOnly() function.
Here is what I would do, your welcome to go about it differently:
I would write my code in an editor, (like Notepad++, because it's ultra awesome).
I would make sure my code was formatted the way I wanted.
I would highlight the area of code I wanted and copy it.
I would then switch to the "html" tab in my Wordpress post editor.
I would type out an opening and closing <pre> tag. If I were using prettify I would type in <pre class="prettyprint"></pre>
I would paste my code between the opening and closing <pre> tags I just created.
I'll show you what I want to achieve.
I have some entities on my website(players, teams, articles, photos etc). I want to make some kind of BBcode that will create links to these elements. (I definitely don't want to use native link button for many reasons like changing url structure etc).
So I want to put into HTML code something like this:
[player=123ID]anchor text[/player]. After saving I will parse this HTML with my custom filter to make this linkable when showing on website in articles, private messages etc.
But my question is:
Is it possible to make custom TinyMCE editor button(one for each entity) that will open some kind of modal window where I'll add JS logic that will offer user some related autocompleter? And after selecting entity user wanted + writing anchor text it will put into HTML code my custom BBcode tag. Any guides, best practices, etc?
Is it possible to show in preview(not HTML) mode this custom BBtag as anchor? TinyMCE by default shows anchor tags like real anchors with anchor text, I want this custom tag to be shown(and editable) in the same way as regular anchors do. Do you have any ideas?
I am currently studying moxiecode wiki for some days, but I'm still not that in-depth in TinyMCE to solve this easily.
Will be happy for your inputs!
Regards,
Jim
To question 1: Yes this is possible. You might want to have a look at how to create a plugin for tinymce. It is not that difficult and you may create as many buttons as you need.
What "preview" mode are you reffering to?