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?
Related
I have a very simple website with no backend, just pure html pages.
I need to have English/Chinese versions for this website, what I need to achieve is have a button on NavBar, when users click this button, the wording on entire website will be changed to Chinese/English.
All the examples I have seen that they are all require something like this:
localize(".nav");
So does it mean that I need to do something like this:
localize("body");
in order to get the whole website language switched?
According to the doc here is the list of supported-frameworks. As your project is a basic HTML one you should use this https://github.com/mthh/loc-i18next. When you init the module on a TAG you should me make sure there is the data-i18n="myKey" attribute with the key of string that need to be translated. So localize("body"); should translate the whole body but you must add the data-i18n attribute to each tag with a string key
I want to embed a PDF on my webpage that has text I would like to be searchable. Using iframe method does not seem to work (when I click inside the window, ctrl F does not let me search for it.) What is the best way for me to embed the PDF (multiple pages) so that I can search text within the PDF? Can it be done with HTMl5? Or is there some library?
I've tried the techniques on this page:
https://pdfobject.com/static.html
I an unable to find and match the text with Ctrl+F when I open up the website in any webbrowser on any of the PDFs. The Ctrl+F appears to only work with HTML text. Please help!
is find() what you're looking for? Please read: this SO question
Edit
Mousetrap is a library that allow you to assign shortcuts, May be it's possible to search documents using Mousetrap you might want to try Mousetrap.js project site, github and this site has some examples and maybe it's possible to find text in documents or search documents for text. Please try and read their information..
End edit
You can't do a search in PDF files with html only, you will need other technologies however you can embed a lot of file types with <embed> and display them on your pages using object, embed or frames.. if you want to search text in PDF documents, it would be better to use a php extension that is able to help you out
I hope it's helpful to you
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 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
In my drupal config I have created a video page, which I'm using to create video titles.
I also created a course page, which will be displaying all the video titles available in that course using views and node reference combination. It only displays video title list.
Now,
Take a look here
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=65713
You see the video titles are arranged in a chapter - wise manner, using javascript to hide/show chapter title.
I want to implement a similar functionality in my drupal site. If it is not possible with views thats ok, but I need a way to implement the javascript and chapter title in the course page. I want to keep the layout same as much as possible.
Even if I have to manually enter/edit the code in the body, I don't care as long as I have the functionality.
If you don't want to write the jQuery and are satisfied with the "accordion" effect see http://drupal.org/project/views_accordion
A demo of views accordion can be found on http://manueg.okkernoot.net/ (See "latest thoughts" in the main content area). This is integrated with views so all you need do is to make the correct video title the accordion title.
You can probably theme the accordion too to get the desired user interface.
If you have implemented the markup, the javascript effect will be pretty easy to make.
You just need to apply a click handler on the chapters and hide/show the content. jQuery that is included in Drupal makes this quite simple and easy.
For the markup, it will probably be easier to do in a custom module, since you need a very specific ordering, and need some specific info on the chapter as well as the pages.
Update:
You should consider using node relationships, and use two content types. Especially if you want more info for each chapter like a image, teaser text etc.