Programmatically create a wysiwyg editor for frontend magento 2.3












0















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










share|improve this question

























  • Basically you need wysiwyg editor for frontend?

    – Amit Naraniwal
    16 mins ago
















0















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










share|improve this question

























  • Basically you need wysiwyg editor for frontend?

    – Amit Naraniwal
    16 mins ago














0












0








0








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










share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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



















  • 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










1 Answer
1






active

oldest

votes


















0














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/






share|improve this answer
























  • this is another approach and it's not what i want. No js here only php

    – mrtuvn
    12 mins ago











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
});


}
});














draft saved

draft discarded


















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









0














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/






share|improve this answer
























  • this is another approach and it's not what i want. No js here only php

    – mrtuvn
    12 mins ago
















0














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/






share|improve this answer
























  • this is another approach and it's not what i want. No js here only php

    – mrtuvn
    12 mins ago














0












0








0







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/






share|improve this answer













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/







share|improve this answer












share|improve this answer



share|improve this answer










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



















  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

Polycentropodidae

Magento 2 Error message: Invalid state change requested

Paulmy