#4 Custom lightweight WYSIWYG (4 buttons)
Requirements
2sxc Custom Micro-WYSIWYG Input Field
Creating an own WYSIWYG would be super difficult. This is why we decided to create a simple API where you can use the existing WYSIWYG and just reconfigure it. For the configuration you will need to understand the TinyMCE API and the names of our callbacks, but then it's really easy.
You can learn how to:
- Use
connector.loadScript(...)
to load the builtin WYSIWYG - ...and wait for the callback to ensure it's ready
- Create a inner
field-string-wysiwyg
- Set the mode to
edit
(instead ofpreview
) - Attach the
connector
so the inner object has it as well - Attach the
reconfigure
object - Create your own
Reconfigurator
which can make changes - Use
configureOptions
to set a different toolbar
Important: The feature "Public Use of Edit Form" is disabled
If you want this demo to run for anonymous users you would need it. Register your site on patrons.2sxc.org to get access to the feature.String WYSIWYG Micro Custom Input Field
Output
This example shows a reduced WYSIWYG with only 4 buttons.
Hit this edit button to have a look:
Important: We opened permissions that you can experience the edit dialog - so you can save, but it will just create draft data đŸ˜‰.
#4 Custom lightweight WYSIWYG (4 buttons)
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@inherits Custom.Hybrid.Razor14 <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2>2sxc Custom Micro-WYSIWYG Input Field</h2> <p> Creating an own WYSIWYG would be super difficult. This is why we decided to create a simple API where you can use the existing WYSIWYG and just reconfigure it. For the configuration you will need to understand the TinyMCE API and the names of our callbacks, but then it's really easy. </p> <p>You can learn how to:</p> <ol> <li>Use <code>connector.loadScript(...)</code> to load the builtin WYSIWYG</li> <li>...and wait for the callback to ensure it's ready</li> <li>Create a inner <code>field-string-wysiwyg</code></li> <li>Set the mode to <code>edit</code> (instead of <code>preview</code>)</li> <li>Attach the <code>connector</code> so the inner object has it as well</li> <li>Attach the <code>reconfigure</code> object</li> <li>Create your own <code>Reconfigurator</code> which can make changes</li> <li>Use <code>configureOptions</code> to set a different toolbar</li> </ol> </div> </div> <br> @Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml") </hide> <div class="alert alert-success"> <h2>String WYSIWYG Micro Custom Input Field</h2> <p> This example shows a reduced WYSIWYG with only 4 buttons. <br> Hit this edit button to have a look: </p> @Kit.Toolbar.Empty().New("UiStringWysiwygMicro").AsTag() </div> @Html.Partial("warning.cshtml") @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })