Programmatically create a wysiwyg editor for frontend magento 2.3
I don't see any examples in frontend of magento for this case. Wonder how to add editor field from php class instead template
When try to call wysiwygConfig->getConfig() in my block class i got error message from core files
Exception #0 (BadMethodCallException): Missing required argument $variablePluginConfigProvider of MagentoCmsModelWysiwygCompositeConfigProvider.
Below is my code for generate field editor but i think this is legacy way and can't use anymore in 2.3
public function getHtmlEditor()
{
//Refactor this line later
$object_manager = MagentoFrameworkAppObjectManager::getInstance();
$wysiwygConfig = $object_manager->get('MagentoCmsModelWysiwygConfig');
$configwysiwyg = $wysiwygConfig->getConfig();
$configwysiwygData = $configwysiwyg->getData();
$configwysiwygData["settings"]["theme_advanced_buttons1"] = "bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code";
$configwysiwygData["settings"]["theme_advanced_buttons2"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons3"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons4"] = false;
$configwysiwygData["settings"]["theme_advanced_statusbar_location"] = false;
$configwysiwygData["height"] = "250px";
$configwysiwygData["add_variables"] = false;
$configwysiwygData["plugins"] = false;
$configwysiwygData["add_widgets"] = false;
$configwysiwygData["add_images"] = false;
$configwysiwygData["files_browser_window_url"] =false;
$configwysiwygData["no_display"] =true;
$configwysiwygData["toggle_button"] = false;
$configwysiwyg->setData($configwysiwygData);
$elementId = "custom_wysiwyg_content";
$config = [
'label' => __('Content'),
'name' => 'wysiwyg_content',
'config' => $configwysiwyg,
'wysiwyg' => true,
'style' => 'width:100%; height:250px;',
'required'=> true,
'class' => " required-entry",
'value' => '',
"validation" => [
"required-entry" => true
]
];
$form = $object_manager->get('MagentoFrameworkDataForm');
$editor = $object_manager->get('MagentoFrameworkDataFormElementEditor')->setData($config);
$editor->setForm($form);
$editor->setId($elementId);
return $editor->getElementHtml();
}
in template i only need to call this method
echo $block->getHtmlEditor();
Is there a right way to do this ? Prefer no js way only php code
cms magento2.3
add a comment |
I don't see any examples in frontend of magento for this case. Wonder how to add editor field from php class instead template
When try to call wysiwygConfig->getConfig() in my block class i got error message from core files
Exception #0 (BadMethodCallException): Missing required argument $variablePluginConfigProvider of MagentoCmsModelWysiwygCompositeConfigProvider.
Below is my code for generate field editor but i think this is legacy way and can't use anymore in 2.3
public function getHtmlEditor()
{
//Refactor this line later
$object_manager = MagentoFrameworkAppObjectManager::getInstance();
$wysiwygConfig = $object_manager->get('MagentoCmsModelWysiwygConfig');
$configwysiwyg = $wysiwygConfig->getConfig();
$configwysiwygData = $configwysiwyg->getData();
$configwysiwygData["settings"]["theme_advanced_buttons1"] = "bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code";
$configwysiwygData["settings"]["theme_advanced_buttons2"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons3"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons4"] = false;
$configwysiwygData["settings"]["theme_advanced_statusbar_location"] = false;
$configwysiwygData["height"] = "250px";
$configwysiwygData["add_variables"] = false;
$configwysiwygData["plugins"] = false;
$configwysiwygData["add_widgets"] = false;
$configwysiwygData["add_images"] = false;
$configwysiwygData["files_browser_window_url"] =false;
$configwysiwygData["no_display"] =true;
$configwysiwygData["toggle_button"] = false;
$configwysiwyg->setData($configwysiwygData);
$elementId = "custom_wysiwyg_content";
$config = [
'label' => __('Content'),
'name' => 'wysiwyg_content',
'config' => $configwysiwyg,
'wysiwyg' => true,
'style' => 'width:100%; height:250px;',
'required'=> true,
'class' => " required-entry",
'value' => '',
"validation" => [
"required-entry" => true
]
];
$form = $object_manager->get('MagentoFrameworkDataForm');
$editor = $object_manager->get('MagentoFrameworkDataFormElementEditor')->setData($config);
$editor->setForm($form);
$editor->setId($elementId);
return $editor->getElementHtml();
}
in template i only need to call this method
echo $block->getHtmlEditor();
Is there a right way to do this ? Prefer no js way only php code
cms magento2.3
Basically you need wysiwyg editor for frontend?
– Amit Naraniwal
16 mins ago
add a comment |
I don't see any examples in frontend of magento for this case. Wonder how to add editor field from php class instead template
When try to call wysiwygConfig->getConfig() in my block class i got error message from core files
Exception #0 (BadMethodCallException): Missing required argument $variablePluginConfigProvider of MagentoCmsModelWysiwygCompositeConfigProvider.
Below is my code for generate field editor but i think this is legacy way and can't use anymore in 2.3
public function getHtmlEditor()
{
//Refactor this line later
$object_manager = MagentoFrameworkAppObjectManager::getInstance();
$wysiwygConfig = $object_manager->get('MagentoCmsModelWysiwygConfig');
$configwysiwyg = $wysiwygConfig->getConfig();
$configwysiwygData = $configwysiwyg->getData();
$configwysiwygData["settings"]["theme_advanced_buttons1"] = "bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code";
$configwysiwygData["settings"]["theme_advanced_buttons2"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons3"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons4"] = false;
$configwysiwygData["settings"]["theme_advanced_statusbar_location"] = false;
$configwysiwygData["height"] = "250px";
$configwysiwygData["add_variables"] = false;
$configwysiwygData["plugins"] = false;
$configwysiwygData["add_widgets"] = false;
$configwysiwygData["add_images"] = false;
$configwysiwygData["files_browser_window_url"] =false;
$configwysiwygData["no_display"] =true;
$configwysiwygData["toggle_button"] = false;
$configwysiwyg->setData($configwysiwygData);
$elementId = "custom_wysiwyg_content";
$config = [
'label' => __('Content'),
'name' => 'wysiwyg_content',
'config' => $configwysiwyg,
'wysiwyg' => true,
'style' => 'width:100%; height:250px;',
'required'=> true,
'class' => " required-entry",
'value' => '',
"validation" => [
"required-entry" => true
]
];
$form = $object_manager->get('MagentoFrameworkDataForm');
$editor = $object_manager->get('MagentoFrameworkDataFormElementEditor')->setData($config);
$editor->setForm($form);
$editor->setId($elementId);
return $editor->getElementHtml();
}
in template i only need to call this method
echo $block->getHtmlEditor();
Is there a right way to do this ? Prefer no js way only php code
cms magento2.3
I don't see any examples in frontend of magento for this case. Wonder how to add editor field from php class instead template
When try to call wysiwygConfig->getConfig() in my block class i got error message from core files
Exception #0 (BadMethodCallException): Missing required argument $variablePluginConfigProvider of MagentoCmsModelWysiwygCompositeConfigProvider.
Below is my code for generate field editor but i think this is legacy way and can't use anymore in 2.3
public function getHtmlEditor()
{
//Refactor this line later
$object_manager = MagentoFrameworkAppObjectManager::getInstance();
$wysiwygConfig = $object_manager->get('MagentoCmsModelWysiwygConfig');
$configwysiwyg = $wysiwygConfig->getConfig();
$configwysiwygData = $configwysiwyg->getData();
$configwysiwygData["settings"]["theme_advanced_buttons1"] = "bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code";
$configwysiwygData["settings"]["theme_advanced_buttons2"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons3"] = false;
$configwysiwygData["settings"]["theme_advanced_buttons4"] = false;
$configwysiwygData["settings"]["theme_advanced_statusbar_location"] = false;
$configwysiwygData["height"] = "250px";
$configwysiwygData["add_variables"] = false;
$configwysiwygData["plugins"] = false;
$configwysiwygData["add_widgets"] = false;
$configwysiwygData["add_images"] = false;
$configwysiwygData["files_browser_window_url"] =false;
$configwysiwygData["no_display"] =true;
$configwysiwygData["toggle_button"] = false;
$configwysiwyg->setData($configwysiwygData);
$elementId = "custom_wysiwyg_content";
$config = [
'label' => __('Content'),
'name' => 'wysiwyg_content',
'config' => $configwysiwyg,
'wysiwyg' => true,
'style' => 'width:100%; height:250px;',
'required'=> true,
'class' => " required-entry",
'value' => '',
"validation" => [
"required-entry" => true
]
];
$form = $object_manager->get('MagentoFrameworkDataForm');
$editor = $object_manager->get('MagentoFrameworkDataFormElementEditor')->setData($config);
$editor->setForm($form);
$editor->setId($elementId);
return $editor->getElementHtml();
}
in template i only need to call this method
echo $block->getHtmlEditor();
Is there a right way to do this ? Prefer no js way only php code
cms magento2.3
cms magento2.3
edited 13 secs ago
mrtuvn
asked 19 mins ago
mrtuvnmrtuvn
1,8051729
1,8051729
Basically you need wysiwyg editor for frontend?
– Amit Naraniwal
16 mins ago
add a comment |
Basically you need wysiwyg editor for frontend?
– Amit Naraniwal
16 mins ago
Basically you need wysiwyg editor for frontend?
– Amit Naraniwal
16 mins ago
Basically you need wysiwyg editor for frontend?
– Amit Naraniwal
16 mins ago
add a comment |
1 Answer
1
active
oldest
votes
First of all you have to create a text area field like below :
<textarea id="company_description" name="company_description">
</textarea>
Then add below script to load jQuery and WYSIWYG editor and then assign to
textarea having id company_description :
<script>
require([
"jquery",
"mage/translate",
"mage/adminhtml/events",
"mage/adminhtml/wysiwyg/tiny_mce/setup"
], function(jQuery){
wysiwygcompany_description = new wysiwygSetup("company_description", {
"width":"99%", // defined width of editor
"height":"200px", // height of editor
"plugins":[{"name":"image"}], // for image
"tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
}
});
wysiwygcompany_description.setup("exact");
});
</script>
Now you can see editor on textarea field at frontend.
Reference : https://webkul.com/blog/add-wysiwyg-editor-at-front-end-in-magento2-3/
this is another approach and it's not what i want. No js here only php
– mrtuvn
12 mins ago
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f262773%2fprogrammatically-create-a-wysiwyg-editor-for-frontend-magento-2-3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
First of all you have to create a text area field like below :
<textarea id="company_description" name="company_description">
</textarea>
Then add below script to load jQuery and WYSIWYG editor and then assign to
textarea having id company_description :
<script>
require([
"jquery",
"mage/translate",
"mage/adminhtml/events",
"mage/adminhtml/wysiwyg/tiny_mce/setup"
], function(jQuery){
wysiwygcompany_description = new wysiwygSetup("company_description", {
"width":"99%", // defined width of editor
"height":"200px", // height of editor
"plugins":[{"name":"image"}], // for image
"tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
}
});
wysiwygcompany_description.setup("exact");
});
</script>
Now you can see editor on textarea field at frontend.
Reference : https://webkul.com/blog/add-wysiwyg-editor-at-front-end-in-magento2-3/
this is another approach and it's not what i want. No js here only php
– mrtuvn
12 mins ago
add a comment |
First of all you have to create a text area field like below :
<textarea id="company_description" name="company_description">
</textarea>
Then add below script to load jQuery and WYSIWYG editor and then assign to
textarea having id company_description :
<script>
require([
"jquery",
"mage/translate",
"mage/adminhtml/events",
"mage/adminhtml/wysiwyg/tiny_mce/setup"
], function(jQuery){
wysiwygcompany_description = new wysiwygSetup("company_description", {
"width":"99%", // defined width of editor
"height":"200px", // height of editor
"plugins":[{"name":"image"}], // for image
"tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
}
});
wysiwygcompany_description.setup("exact");
});
</script>
Now you can see editor on textarea field at frontend.
Reference : https://webkul.com/blog/add-wysiwyg-editor-at-front-end-in-magento2-3/
this is another approach and it's not what i want. No js here only php
– mrtuvn
12 mins ago
add a comment |
First of all you have to create a text area field like below :
<textarea id="company_description" name="company_description">
</textarea>
Then add below script to load jQuery and WYSIWYG editor and then assign to
textarea having id company_description :
<script>
require([
"jquery",
"mage/translate",
"mage/adminhtml/events",
"mage/adminhtml/wysiwyg/tiny_mce/setup"
], function(jQuery){
wysiwygcompany_description = new wysiwygSetup("company_description", {
"width":"99%", // defined width of editor
"height":"200px", // height of editor
"plugins":[{"name":"image"}], // for image
"tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
}
});
wysiwygcompany_description.setup("exact");
});
</script>
Now you can see editor on textarea field at frontend.
Reference : https://webkul.com/blog/add-wysiwyg-editor-at-front-end-in-magento2-3/
First of all you have to create a text area field like below :
<textarea id="company_description" name="company_description">
</textarea>
Then add below script to load jQuery and WYSIWYG editor and then assign to
textarea having id company_description :
<script>
require([
"jquery",
"mage/translate",
"mage/adminhtml/events",
"mage/adminhtml/wysiwyg/tiny_mce/setup"
], function(jQuery){
wysiwygcompany_description = new wysiwygSetup("company_description", {
"width":"99%", // defined width of editor
"height":"200px", // height of editor
"plugins":[{"name":"image"}], // for image
"tinymce4":{"toolbar":"formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table charmap","plugins":"advlist autolink lists link charmap media noneditable table contextmenu paste code help table",
}
});
wysiwygcompany_description.setup("exact");
});
</script>
Now you can see editor on textarea field at frontend.
Reference : https://webkul.com/blog/add-wysiwyg-editor-at-front-end-in-magento2-3/
answered 14 mins ago
Amit NaraniwalAmit Naraniwal
40037
40037
this is another approach and it's not what i want. No js here only php
– mrtuvn
12 mins ago
add a comment |
this is another approach and it's not what i want. No js here only php
– mrtuvn
12 mins ago
this is another approach and it's not what i want. No js here only php
– mrtuvn
12 mins ago
this is another approach and it's not what i want. No js here only php
– mrtuvn
12 mins ago
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f262773%2fprogrammatically-create-a-wysiwyg-editor-for-frontend-magento-2-3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Basically you need wysiwyg editor for frontend?
– Amit Naraniwal
16 mins ago