I know there are lots of great rich text editors out there that can easily be ported to angular and plenty of discussion on how to do this, but I'd like to create my own.
I have the basic idea down:
create a text area and watch the input and perform a function as the input changes. I am familiar with the ngBindhtml directive, only to the extent that I can apply it to an element.
Any idea how I might be able to create a function that would render plain text into html?
I've tried it before but ended up using textAngular.
Basically i replaced the textarea with a iframe, similar to the way tinyMCE does.
The contenteditable on a element allow you to replace the textarea and write directly on the div. You would insert all html elements like headers and text this way. You'll have to handle the cursor position on text, apply styles based on buttons and text selection, etc.
Well, I also came across this and created my own editor as I was required to add features like Table addition etc. The repo is still under development but you can some idea by taking a look at this plunkr. Unlike old answers, I have tried to keep it as a component so that it can be reused at many other places as required.
You can star this git repo to stay updated or feel free to add your inputs
Related
Need to Highlight multiple words. It should not highlight any of HTML tags or HTML attributes in the HTML code based on the input received.
Simply put want to implement the CTRL+F function Within in my project
It will need application level filtering.
When you receive the document or comment or any kind of text, check if you have something in the search field.
If Yes, find and replace the contents of text with special HTML & Class to highlight specific part.
You can check the implementation of common React Autocomplete libraries. The highlight is in the list but you can use same approach in the Global manner.
How do I get current typing text in Text Editor and give auto complete like mention or hashtag in draftjs
here is simple
https://codesandbox.io/s/jovial-newton-hn18i
I tried autocomplete it enable on separate input field not in the Editor,
So is their a better way to achieve auto complete (give dropdown ) in draftjs
you can find what you are asking for with Decorators concept in draft.js
which consist of fo two core things a strategy function where you put your logic
and a custom component
http://davidandsuzi.com/how-to-use-draft-decorators/
I hope someone can help me with this. I'm using angular-chosen and I'm really happy with it, but I want to remove the button type select box with the single select, into the text type box that's used with the multiple select, an example here.
I tried using a different module, acute-select, because the combo mode was exactly what I wanted, but the module is still too incomplete and I can't use it.
Does anyone know how I can achieve this using the chosen directive, or is there maybe another, working, module?
I ended up forking acute-select in order to make something that suited my needs. I removed most of the other features and only kept the combo-box.
It's tailored to be used in a bootstrap dropdown in a bootstrap nav-bar.
You can view the demo and source here.
I have a requirement which requires me to use a single dialog with two tabs. Each tab should have a CustomMultiField (multiple sets of four fields). I do not know anything about EXT JS. Can some one point me to right direction where I can find something about requirement as above.
I have built custom components without any explicit understanding of Ext JS. To understand how to set up a dialog with tabs, look at the code for the page component in /libs/foundation/component/page. A directory of all the xytpes you can use, like MultiField, is here.
If you need something that behave like one, but is not necessarily huge specific ExtJS component or custom xtype, and you do not want to dig hundreds of Adobe ‘support’ pages, trying to find some piece of useful doc.
You can simply use multifield xtype and write 4 pure JS listeners, that does what you need.
I am having some issues getting TinyMCE to be as flexible as I need it to be. In my editor (used in a cakePHP-based app) I am not allowing users to edit the html, so we are relying entirely on the WYSIWYG. Unfortunately, TinyMCE is currently not allowing users to apply two CSS classes to the same text. Whichever style is applied last wipes out the original.
To give an example: If a user wants to designate a line of text to be both 'huge' and 'highlighted' (both CSS classes), they would highlight the text and choose 'huge' from the CSS style dropdown, then highlight the same text again and choose 'highlighted'. What results is text that only has the 'highlighted' class applied to it.
I can work around this problem currently by just adding an extra character to the text I am trying to style, apply the 'huge' class to that, apply the 'highlighted' class to the original text, and then delete the extra character. But, this really is far from an ideal solution.
Does anyone know of a way to resolve this issue?
You will have to write your own plugin looking similar to the style plugin.
When the user selects a class from the dropdown you just add it to the selected text instead of replacing it.