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.
Related
I have an App called "Features"
In Features, I have these fields:
Heading
Text
Image
The app has two separate razor templates. One of the templates displays an image, and the other one does not.
How can I hide the "Image" field from Template B, but still display it in Template A? Is this possible with Formulas? If so, how?
Yes, this can be done with formulas ;)
Best check out the current Content Templates, the basic-content (text/image) templates have exactly this implemented.
If you open it from a template which doesn't show images, the images-field is hidden (but the editor can reactivate it). So this is quite sophisticated, you can also do simpler implementations.
Basically the steps are:
Create an ephemeral field which just serves as a temporary variable to determine if it should be shown by default or not - we usually call it something like VarShowImage - probably default to true (so if it's not set, it's true when the form loads) https://docs.2sxc.org/basics/data/fields/ephemeral.html
In the toolbar where it should be hidden, prefill this like VarShowImage=false
On the field which should be hidden, create a formula to control visible based on this field
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 have an AngularJS application that uses Bootstrap (v3) for styling. I want to disable the Bootstrap form validation in one of my forms, which automatically gives my input field a green or red glow when a user types in content or leaves the input field empty, respectively.
Is there a way to do this using an HTML/CSS/JavaScript override? I do not want to edit the original Bootstrap files, nor do I want to use jQuery.
Note: I read that you can achieve this using jQuery with $(#form).data('bootstrapValidator').enableFieldValidators('input', false), but as I mentioned: I do not want to use jQuery.
Thank you.
You can create your own CSS file that defines the same styles as Bootstrap, like .has-error. As long as your CSS file is parsed later, you will override their implementation. Alternatively you can add !important and then you dont need to worry about order.
Note though that this could have unintended consequences, as you are fully overriding Bootstrap in this case.
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