Search the Community
Showing results for tags 'ckeditor'.
-
I have a CKEditor Textarea in a page template. Some users like to add text in them by pasting from Word document. This leads to internal server error when saving page. When using paste without formatting (cmd + shift + V), page is saved normally, so I assume error has something to do with Word's hidden characters that cause issues in many other programs as well. (I don't have Word myself, so I debugged this with video chat with user. I forgot to ask to check code view, so I'm not sure if they are visible there.) Is there a way in ProcessWire/PHP to sanitize Textarea input from these hidden characters, or can I prevent this by changing editor settings (listed below, if it helps)? I don't like leaving error handling rely to user action - somebody always forgets to do things specific way and it weakens user experience. Textarea formatting: none (htmlspecialchars off) field type: CKEditor content type: markup/html experimental markup/html settings: all on acf: on html purifier: on additional purify settings: all on extra allowed content: none add-ons: pwimage, pwlink, sourcedialog sourcedialog settings: none disabled add-ons: image, magicline
-
I was wondering if there's a way to set an absolute path instead of relative when linking to a file in CKEditor? Any help would be appreciated.
-
I added some custom styles to the CKeditor menu bar using the example mystyles.js and the PW tutorial. This worked fine for fields when editing on the frontend. But none of our custom styles showed in the backend editor dropdown unless we edited the core copy of mystyles.js in wire/modules. Is this correct behaviour, a bug or a mistake on my part? Tried clearing cache, logging in/out etc but the backend ignores our custom styles in the site/modules path.
-
Hi, what do i have to do, to allow the i tag and the h4 class in the CKEditor? In the Extra Allowed Content box (setup field -> input) i wrote "i(*);h4(*)". But when i type <h4 class="uk-panel-title"><i class="uk-icon-credit-card-alt"></i>Unsere Bankverbindung:</h4> the CKEditor still strips the complete i tag and the h4 class from the source. Mario -
Hello, is it possible to configure CKEditor to have syntax highlighting enabled in Source and/or Sourcedialog? Coming from MODX i had this feature enabled and now I'm trying to find a solution for PW too. I'd like to have both the WysiWyg Editor and the Source editor with syntax highlighting enabled in on field. Andy plugins to achieve this? Greetings, Martin -
A pet hate of mine is when an editor uses a paragraph of bold text for what ought to be a heading. When I need to tidy up poorly formatted content like this I will quickly change such lines of text into the heading of the appropriate level, but that still results in markup like... <h2><strong>Some heading text</strong></h2> The <strong> has no business being there, but it's a bit of a hassle to remove it because you have to drag a selection around the exact text as opposed to just placing your cursor within the line. That gets tedious if you have a lot content to process. I figured there has to be an easier way so started looking into the ACF (Advanced Content Filter) features of CKEditor. What I wanted is a rule that says "strong tags are disallowed specifically when they are within a heading tag". (I guess there could occasionally be a use case where it would be reasonable to have a strong tag within a heading tag, but it's so rare that I'm not bothered about it). With the typical string format for allowedContent and disallowedContent there is no ability to disallow a specific tag only when it is within another specific tag - a tag is allowed everywhere or not at all. But I found there is an alternative object format for these rules that supports a callback function in the "match" property. So I was able to achieve my goal with the following in /site/modules/InputfieldCKEditor/config.js: CKEDITOR.editorConfig = function(config) { config.disallowedContent = { // Rule for the <strong> element strong: { // Use "match" callback to determine if the element should be disallowed or not match: function(element) { // Heading tag names var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; // The parent of the element (if any) var parent = element.parent; if(typeof parent !== 'undefined') { // If there is a parent, return true if its name is in the heading names array return headings.indexOf(parent.name.toLowerCase()) !== -1; } else { // There is no parent so the element is allowed return false; } } } } }; Another tip: if you want to debug your allowedContent or disallowedContent rules to make sure they are being parsed and applied successfully you can log the filter rules to the console. For convenience I used /site/modules/InputfieldCKEditor/config.js again. // Get the CKEditor instance you want to debug var editor = CKEDITOR.instances.Inputfield_body; editor.on('instanceReady', function() { // Log the disallowed content rules console.log(editor.filter.disallowedContent); });- 2 replies
-
- 6
-
-
- ckeditor
- disallowed content
- (and 1 more)
-
I wanted to install the CKEditor accessibility checker on one of my sites (latest PW 3 dev). I downloaded the two required folders and put them in the correct folder (as per the helptext To add more plugins, place them in /site/modules/InputfieldCKEditor/plugins/[name]/, replacing [name] with the name of the plugin.) I checked those two plugins in the body field (which means PW recognises them) under edit field > input. I even tried to put the plugins in wire/modules/Inputfield/InputfieldCKEditor/plugins - which of course is stupid, but hey... worth a try. And I made sure i hit "refresh modules" a couple of times as well... Does anyone know why that new plugin still doesn't show up in my field?
-
I've got some odd problem adding additional styles to mystyles.js. After reading some and following the article here: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set I was able to add a custom style. So far so good ? It is displayed in the Styles menu and can be selected there. Now the odd thing starts, if I add a custom style like this: ... { name: 'Box Top', element: 'span',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'span', attributes: { 'class': 'box_bottom' } } it works and can be selected just fine. However, if I add this: { name: 'Box Top', element: 'div',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'div', attributes: { 'class': 'box_bottom' } } It is also displayed, can be selected - BUT - once the edit is saved, it is gone, won't be displayed in the page and won't be shown anymore in the editor as selected style, it goes back to "normal". Can anyone give me a hint what I missed? -
Hey All. I am creating a new field of type 'FieldtypeTextareaLanguage' via a module. Everything is working just fine expect that I can not find any information on how to set the 'Text Formatter' (to HTML Entity Encoder) and 'Inputfield Type' (to CKEditor). I tried the following which failed and was just a guess because of the IDs and select-values in the HTML... $f = new Field(); $f->type = $this->modules->get("FieldtypeTextareaLanguage"); $f->name = $newstcontentfieldname; $f->label = $newstcontentfieldlabel; $f->set('tags','servicetype'); $f->set('icon','fa-pencil-square'); $f->set('asmSelect0','TextformatterEntities'); $f->set('Inputfield_inputfieldClass', 'InputfieldCKEditor'); $f->save(); [EDIT] Furthermore, I just came across the question how to set the 'Visibility' --> ' Show this field only if' Option? Is there any documentation that I missed sofar about these field-variables and how to set them? [/EDIT] I am thankfull for any suggestion and hope somebody can help me. Thanks a lot! -
Hey guys, I want to disable the crop and align features when placing an image into the CKEditor. The image should simply placed in a predefined width without any additional options. Can anybody help me with that? Thanks, Manuel
-
Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup. In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again?
-
I got tired of having to open the link dialog in CKEditor in order to check where a link is pointing to, so made this simple plugin. Link Hover A plugin for CKEditor. Shows the href attribute of a link in a tooltip when the link is hovered. This saves you from having to open the link dialog in order to check where a link points to. Installation This readme assumes installation in ProcessWire CMS. The plugin folder must be named "linkhover" – if necessary, rename the folder to remove the "-master" suffix added by GitHub. Copy the "linkhover" folder to /site/modules/InputfieldCKEditor/plugins/ In the field settings for each CKEditor field that you want to activate the plugin for, check the "linkhover" checkbox at Input > Plugins > Extra Plugins https://github.com/Toutouwai/linkhover
-
Hello All, I have installed a simple test timestamp plugin (https://github.com/ckeditor/ckeditor-docs-samples/tree/master/tutorial-timestamp) which shows up in the Extra Plugin section of the field but its not showing up in the toolbar and isnt in the list of Availabe core toolbars items. Any ideas how I add this to the tool bar? Cheers Jon
-
Hello at first - i'm completly new to pw and coming from modx evolution. My first try to include an old but good theme from modx into pw was successfull - i was very impressed. Now i'm going to personalize the backend: I love codemirror for ckeditor - i installed the new ckeditor-module, activated the new module in the desired field, and if click on "Source" i'll get my real HTML-Code in an Codemirror-view. But if i click on save the ckeditor makes from this code <div class="container-fluid"> in the frontend Sourcecode this <div class="container-fluid"> What's wrong with my editor?!
-
Hello, community! Does anyone have an idea how to limit a Textarea field with CKEditor to just one line/row? I'm using the Textarea field in a repeater and CKEditor because it needs to hold formulas. I would use a simple text field, but I need the formatting options like super-/subscript, underline etc. None of the below methods seem to be working. Are there any other methods you may know or have used before that can restrict CKEditor to a single row? Or should I use a completely different approach for entering/formatting the content? I tried these approaches: #1 Redirecting enter and shift+enter keys https://stackoverflow.com/a/7991519 When the doNothing plugin is enabled CKEditor won't load on the edit page - the space is blank. There's a parsing error. I tried to modify the plugin - no luck. #2 Using the blockedKeystrokes function that was introduced in CKEditor 4 as a plugin (13 = enter key) config.blockedKeystrokes( 13, CKEDITOR.SHIFT + 13 ); Getting: config.blockedKeystrokes is not a function. Tried also with editor.blockedKeystrokes in the config.js and config-fieldname.js config.blockedKeystrokes = [ 13, CKEDITOR.SHIFT + 13 ]; is getting ignored. does nothing. in the Input field settings (Custom Config Options) in ProcessWire blockedKeyStrokes: 13, CKEDITOR.SHIFT + 13 is getting ignored. does nothing. Thank you so much in advance.
-
I have a few fields which are using the textField filedtype. Some of the data for these fields contain LaTeX code. However, the CKEditor does not have the abilities to parse it. Is there any solution for this problem? I am currently using Processwire 2.7
-
Hi I'm working on my tempate to provide an AMP (Accelerated Mobile Page) template version. But there is a problem with CKEditor. AMP needs width AND height attributes to all images. Then when I instert an image in my body field from CKEditor the source code juste includes width attributes. How can I add automaticaly height width CKEditor ? Or if not possible width CKEditor, how can I dow from URL image to get height image ? Thanks in advance
-
Is it possible to get rid of these useless rel attributes? It's CKeditor's default. I don't understand why those are forced.
-
Hello I'm trying to creat a widget and add it to ckeditor. I found this tutorial, but something I make wrong. First I downloaded this plugin (https://ckeditor.com/cke4/addon/widget). I extracted the downloaded plugin in site\modules\InputfieldCKEditor\plugins. Then I started with the simplebox tutorial. I added a new folder ("simplebox") in site\modules\InputfieldCKEditor\plugins and followed the steps in the tutorial. But I'm struggeling with the part "CKEditor Initialization". I selected "simplebox" and "widget" in the 'extra plugins' section of the field config, but there are no extra toolbar buttons. If I open the page with the textarea there is only a empty field (s. picture). Could you help me?
-
CKEditor 4.8 comes with plenty of new features - including pasting images from Microsoft Word, clipboard enhancements for Microsoft Edge and a brand new Balloon Toolbar plugin. More On : CKEditor v4.8
-
Hello All, One of my clients is having problems with the alignment of images with captions within the body. The problem is once the image has been inserted into the body and we try and move it by drag and drop this only moves the image and leaves the caption behind. Anyone know of a fix for this so the whole figure is moved rather than just the image? Cheers Jon
-
Looks like CKEditor 5 is on the way: https://ckeditor.com/blog/CKEditor-5-A-new-era-for-rich-text-editing/ https://news.ycombinator.com/item?id=15497972 (HackerNews comments of the above article) Home page: https://ckeditor.com/ Demo: https://ckeditor5.github.io/ Feature Video:
-
Hi all, PW: 3.0.42 I'm trying to have responsive images in the body field. First I need to stop the image tag generated by CKEditor adding the width attribute to the image tag on insertion. I found the 'Skip width attributes on image tags?' in the settings of ProcessPageEditImage and that suggests it does exactly what I'm after. Sadly, even when this checkbox is checked and a new image is inserted the width attribute is still added. Am I missing something? TIA.
