Liferay 7 + CKEditor : add pluginLiferay 7 + CKEditor : add pluginhttps://liferay.dev/en/c/message_boards/find_thread?p_l_id=119785333&threadId=888089012024-03-29T10:20:58Z2024-03-29T10:20:58ZRE: Liferay 7 + CKEditor : add pluginRobert Schrepferhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1187424982020-03-15T13:02:42Z2020-03-15T13:02:42Z<html><head></head><body>Hello everybody,<br>for anyone who stumbles upon this problem (not being able to include custom ckeditor plugins, plugin icons not rendering etc.) here is a quick explanation of what you actually have to:<pre><code>If you've created a class like this:
public class CkEditorDynamicInclude implements DynamicInclude {}
</code></pre>Delete it, you likely do not need it, it breaks more stuff that it actually helps.Instead create a class like this in a !SEPARATE! module with a standard .bnd file:<br><br><pre><code>@Component(immediate = true, property = { "editor.name=ckeditor"[b], [/b]"editor.name=alloyeditor"[b],
[/b][b] [/b]"service.ranking:Integer=101" }[b], [/b]service = EditorConfigContributor.class)
public class CkEditorPlugins extends BaseEditorConfigContributor {
</code></pre>private static final List<String> <em>PLUGIN_LIST </em>= Arrays<br> .<em>asList</em>(<strong> </strong>"coolPlugin", "otherCoolPlugin)<strong>;</strong><strong></strong><strong></strong><br><strong></strong><br><pre><code>@Override
public void populateConfigJSONObject(JSONObject jsonObject[b], [/b]Map<string[b], [ b]object> inputEditorTaglibAttributes[b],
[/b][b] [/b]ThemeDisplay themeDisplay[b], [/b]RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
String extraPlugins = jsonObject.getString("extraPlugins")[b];
[/b][b]
[/b][b] [/b]for (String plugin : [i]PLUGIN_LIST[/i]) {
if (!extraPlugins.contains(plugin)) {
extraPlugins = extraPlugins + "," + plugin[b];
[/b][b] [/b]}
}
jsonObject.put("extraPlugins"[b], [/b]extraPlugins)[b];[/b][b]
[/b]}</string[b],></code></pre><strong></strong>Note this will override ckeditor and alloyeditor. Deploy as .jar<br>Next create another module with a fragment host .bnd file for <pre><code>Fragment-Host: com.liferay.frontend.editor.ckeditor.web[b];[/b]bundle-version="$your-version-of-this-jar-in-liferay-modules"
</code></pre>I am running maven as build tool, so I've created the following path structure to place my plugin in:src/main/resources/META-INF/resources/ckeditor/plugins/coolPluginBuild and deploy. This makes your plugin available to ckeditor. If you have problems with the icon, check the /coolPlugin/plugin.js file and note the following line:<br><br><pre><code>CKEDITOR.plugins.add( 'coolPlugin', {</code></pre><span style="font-size: 16px;">...icon: 'somepath/dwfefwefw/etc'</span><br><br><span style="font-size: 16px;">Change it to icons: 'coolPlugin'Assuming your /coolPlugin has the following folders:/coolPlugin/icons/coolPlugin.png.</span><br>To change toolbar you can either use the populateJSONObject method (didn't test it) or you can override the ckeditor.jsp file in your fragment inpath src/main/resources/META-INF/resources/ckeditor.jsp. In there you can do any and all CKEditor.config stuff e. g. <pre><code>var config = CKEDITOR.config;
</code></pre><pre><code>config.removePlugins =
config.extraPlugins += '';
config.allowedContent = true;
</code></pre></body></html>Robert Schrepfer2020-03-15T13:02:42ZRE: Liferay 7 + CKEditor : customize text and background colorreeshu patelhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1117828532018-12-12T07:16:09Z2018-12-12T07:16:09Z<p>Is there any way to customize text and background color . i am unable
to fined config.js file here.</p>
<p>Please suggest way to do in liferay 7.1.</p>reeshu patel2018-12-12T07:16:09ZRE: Liferay 7 + CKEditor : add pluginTaruchit Goyalhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1112230882018-10-17T20:29:43Z2018-10-17T20:29:43Z<p>Hello Sabrina,</p>
<p>I need to change my wysiswyg editor to ckeditor 4; because it has
some extra functionalities. Please suggest how it can be achieved.</p>
<p>Thanks<br /> Taruchit Goyal</p>
<p> </p>Taruchit Goyal2018-10-17T20:29:43ZRE: Liferay 7 + CKEditor : add pluginNisha Rewarihttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1080527232018-05-10T12:31:59Z2018-05-10T12:31:59ZHi Zsombor Nagy,<br />Were you able to achieve it. I'm not able to register my plugin using DynamicInclude. it gives me this error in server log: <br />WARN [http-nio-8080-exec-9][code_jsp:172] {code="404", msg="ProxyServlet: /o/frontend-editor-ckeditor-web/ckeditor/plugins/lite/plugin.js", uri=/o/frontend-editor-ckeditor-web/ckeditor/plugins/lite/plugin.js}<br /><br /><br />and below error in inspect element console:<br />ckeditor.js?browserId=other&minifierType=js&languageId=en_US&b=7005&t=1525952145809:235 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "lite" was not found at "http://localhost:8080/o/frontend-editor-ckeditor-web/ckeditor/plugins/lite/plugin.js?t=HA3N".Nisha Rewari2018-05-10T12:31:59ZRE: Liferay 7 + CKEditor : add pluginZsombor Nagyhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1014712052017-12-22T08:56:01Z2017-12-22T08:56:01Z<html><head></head><body>Hi Sabrina,<br><br>Just found your question and I have to admit, I have problems in the same scenario, but will share some useful stuff.<br><br>You probably saw the <a href="https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/wysiwyg-editors">tutorials on how to develop custom stuff for WYSIWYG</a> editors here on Liferay's tutorial pages like hundreds of times, but here are my thoughts on how to create/include plugins for Liferay's editors:<br><br><ul><li>Create a new Service module which's class implements <span style="font-family: Courier New"><strong>DynamicInclude </strong></span>. </li><li>Copy all the plugin's files in the resource directory of your module</li><li>You will need to create some methods out of which one is the <span style="font-family: Courier New"><strong>include</strong></span> method. Here you'll have to pass <strong>each and every</strong> file from your resource directory to your response object, as demonstrated in the following snippet: <pre><code>URL entryURL = bundle.getEntry(
"/META-INF/resources/ckeditor/plugins/test" +
"/plugin.js");
StreamUtil.transfer(
entryURL.openStream(), response.getOutputStream(), false);</code></pre></li><li>If you're done with the above steps, continue creating a new Service module which implements <span style="font-family: Courier New"><strong>EditorConfigurationContributor</strong></span>.</li><li>Here you'll need to set some properties regarding the targeted Editor instance (by name, config key and/or portlet name) and set the service ranking to, like 100.</li><li>Afterwards override the method <span style="font-family: Courier New"><strong>populateConfigJSONObject</strong></span>. Here you'll first need to need to mention your plugin's identifiable name within the <span style="font-family: Courier New"><strong>extraplugins</strong></span>, so you do something like this:<pre><code>String extraPlugins = jsonObject.getString("extraPlugins");
extraPlugins = extraPlugins + ",youtube";
jsonObject.put("extraPlugins", extraPlugins);</code></pre> </li><li>Then find the specific toolbar you want your Youtube plugin's icon to appear and, well, put it there. What I did here is I printed out the <span style="font-family: Courier New"><strong>jsonObject</strong></span> to the console to observe it's structure and find out which toolbars should I put my icon into. Then with the help of some <span style="font-family: Courier New"><strong>JSONArray </strong></span>objects I got these toolbars separately and put the plugin in each.</li></ul><br><br>Hope this helps anyone who stumbles across this thread.<br><br>Now, what I'm having difficulties with is including my custom plugin's icon .png file in my <span style="font-family: Courier New"><strong>DynamicInclude</strong></span> module.<br><pre><code>entryURL = bundle.getEntry(
"/META-INF/resources/ckeditor/plugins/test" +
"/icons/plugin.png");
StreamUtil.transfer(
entryURL.openStream(), response.getOutputStream(), false);</code></pre><br><br>Using the code above I try to transfer the plugin's icon, yet when I use this my CKEditor instances won't show up on my portal. I believe, as logical as it may be, my approach is still flawed, thus I'd kindly request assistance. Thank you!</body></html>Zsombor Nagy2017-12-22T08:56:01ZRE: Liferay 7 + CKEditor : add pluginSabrina Toulousehttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=888171852017-04-27T12:07:59Z2017-04-27T12:07:59ZHi,<br /><br />I've actually already posted my question on this thread as well, but no answer yet =)Sabrina Toulouse2017-04-27T12:07:59ZRE: Liferay 7 + CKEditor : add pluginAlfonso Criscihttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=888135232017-04-27T10:19:08Z2017-04-27T10:19:08ZHi Sabrina,<br /><br />Would this discussion suit your needs? <br /><br /><a href="https://web.liferay.com/community/forums/-/message_boards/message/75120840">https://web.liferay.com/community/forums/-/message_boards/message/75120840</a>Alfonso Crisci2017-04-27T10:19:08ZLiferay 7 + CKEditor : add pluginSabrina Toulousehttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=888089002017-04-27T08:47:46Z2017-04-27T08:47:46ZHi,<br /><br />I managed to change my wysiwyg editor to use CKEditor on Liferay 7, and now I'm looking for a way to add some CKEditor plugin, this one actually :<