I'm using Quill in a project where I need make Quill "understands" some custom code when it initializes and when the editor's content is updated from the API.
To keep it symple: lets say I have a database where I have, for example, a field with this content:
<p>Text</p><hr>
On page loading, during Quill'a initialization, I need my
Quill editor's container "accepts" this incoming code but Quill eliminates the <hr> tag.
Reading this guide (Cloning Medium with Parchment) I understood how to create a new Quill's blot and how to add a custom control button in the toolbar to insert the custom blot (lets say the <hr> tag) in my Quill's editor.
Lets call this the "outcoming flow" which I think I get it.
Unfortunately If I save the updated content (lets say <p>Text></p><hr>) in the db, refreshing the page (I'm working with PHP) the <hr> tag is not kept but is "stripped away"...
I'm reading Parchment documentation and I think I should make Parchment "accepts" the new blot (am I right?) but I'm not understanding how...
Here is a symple example: Custom line blot example.
You can see the "insert line" button is working ("outcoming flow" ok) but on page loading the <hr> tag is stripped away ("incoming flow" not ok).
I hope the explanation is clear ^^
Thanks for anyone is going to help me... ^^
Related
I am implementing edit feature with react now. The problem is that I haven't found the good solution for this yet.
I want to make a view like below.
Both title and description text area are already written with default text.
This text is not placeholder.
If user click the button, User can edit the text.
I tried the below two packages but it is not perfect for my purpose.
TextareaAutosize
import TextareaAutosize from 'react-autosize-textarea';
TextareaAutosize has a value attribute. but if I use this, I can't edit the text in it. And the defaultValue seems not working.
Do you know how to put a default text value into TextareaAutosize component?
2.AvInput
import { AvForm, AvField, AvGroup, AvInput, AvRadioGroup, AvRadio } from 'availity-reactstrap-validation';
I think this is another good solution but the submit button seems not to be customized.
I should place the Edit button in the right-upper side of view.
But if I use this package, The submit button is placed at the bottom and it seems like it should be used tag.
Do you know how to connect my own submit button with AvInput?
The button is in other tags, not in its .
https://availity.github.io/availity-reactstrap-validation/components/avform/
<FormGroup>
<Button>Submit</Button>
</FormGroup>
other solution
If you have a better solution or experience, plz let me know.
Thank you in advance
I referred to the below answer and changed UX.
Submit form using a button outside the <form> tag
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
submit button seems to be included in the form tag.
I need to create a form section template, so users can add/remove a new html form section on the fly.
I'm using Angular-Formly for the form template. It works really well for me. However, I need to include a rich editor inside of my form
Can anyone here please provide direction for how to do that? Can I write a angular directive to wrap a .Net rich editor in there? Has Angular-Formly provide a richEditor type or template already?
angular-formly doesn't provide a rich editor type out of the box, and I'm not aware of any open source integrations with one. But the textangular.com example as pointed out by #azium looks reasonable. It would be very simple to create a custom type using that directive. You could accomplish it like this (during the run phase):
formlyConfig.setType({
name: 'richEditor',
template: '<text-angular ng-model="model[options.key]"></text-angular>'
});
Here are the docs on custom templates, here's an example, and here's a lesson on egghead.io.
I'm using drupal 7 and want to hide my comment form for any content type to be hidden by default. I just need "Add comment" button, once i click on it, then it should render comment form. Is there any module / way to achieve this.
you could hide the comment form in CSS with something like
#comment-form{display:none;}
plus a selector specific for one content type if you want.
Then add a javascript in that page adding some code to your subtheme's page.tpl.php that is in your subthem's templates folder (if there is no such file copy it from te parent theme templates folder)
drupal_add_js('path_to_js_file/file.js');
And in the file.js you define the function to show/hide the comment form, i.e. to change the style of #comment-form to display:block;
Then you have to create the button and you can do this in several ways:
you can create a custom block with the code for the button, you can add it in the node.tpl.php template. You can add a custom field to the content type with Display Suite code field, or maybe other modules.
This is just one way to do it.
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
For example, to create or edit an object, when I want to add or change some value to one specific field, I need to refer another website to retrieve some info.In this way, may I add one button or link on the edit page?
The help link of SalesForce is here: https://help.salesforce.com/apex/htviewhelpdoc?id=co_edit.htm&language=en_US
Thanks.
Custom buttons and links don't display on new/edit page layouts so even if you'd make one, it will be visible only on detail view.
Not too invasive option would be to create a URL or text fied, set it's default value to your link, make sure it's displayed on the page but readonly. Haven't tried it but should work (you'll have to test it as somebody other than System Administrator because you'll bypass the readonly property of the page layout).
More invasive option would be to override the new and edit page layouts with Visualforce. More work but somewhat clean solution.
Really crazy option would be to embed a piece of Javascript into section header on the standard page layout or even into sidebar. It's an ugly hack but it works, I've used it for example to disable editing of Name field.
To use method #3:
create new section header, add something to the section (blank space is fine, you need something otherwise headers for blank sections aren't rendered), mark the section as visible on edit pages only.
Section name has limit of 80 characters but can contain code like <script>document.getElementById('Name').disabled = true;</script>. You need longer script though to somehow create an URL at runtime and append it somewhere on the page near your "special" field.
Upload a static resource with your script, then use this as the section header: <script src="filename.js" type="text/javascript"></script>
I'm not too proud of this hack and if you can - go with custom Visualforce new & edit page. It's quick & dirty, probably should be used only when you're not allowed to override pages.. but it works.