franciccio-ITALIANO

How change any thing on body text?

Recommended Posts

Hi, 

I see that the PW text-editor is poor.

I can't change color and align of the text.

I can it by code, but for example when I put  <p style="color:red;">This is a paragraph.</p>

the PW text-editor remove all!

Someone may help me? :/


 

Share this post


Link to post
Share on other sites
horst    3,966

It is not a "PW text editor", it is the "CK-Editor". Please follow the given links in the editorfields configuration screens to all those documentations of the CK-Editor.

  • Like 3

Share this post


Link to post
Share on other sites
LostKobrakai    4,313

CKEditor is meant to be composed with different plugins, so the core is as small as possible, while people can add the things they need without the overhead of things they don't need. 

  • Like 1

Share this post


Link to post
Share on other sites
szabesz    1,390

If you feel you are starting to struggle with CKEditor, you might want to use Repeater Matrix instead. As Ryan puts it: "One use case for a Repeater Matrix is as an alternative to a rich text editor for those cases where you want more fine-grained developer control."

Share this post


Link to post
Share on other sites
Christophe    233

I often (have to) customize the Style drop-down list in CKEditor.

The styles applied can add classes to elements, like p for example. So these classes already exist if you are using a framework and/or you can add your own css rules, and you can add colors, align to the right, justify, etc.

You can see some summarized information here: 

 

Share this post


Link to post
Share on other sites
AndZyk    426
21 hours ago, franciccio-ITALIANO said:

mmm ok thank but I don't find the instructions for change color and text align. Is that in this page? I must study all this page? http://docs.ckeditor.com/#!/guide

Sorry for being unclear, I have meant the instructions on the textarea field input tab.

In my opinion, styling of colors or alignment should be handled via an separate css file or the custom styles section of CKEditor. The custom styles would probably be enough for you and shouldn't slow down the CKEditor too much. ;)

Share this post


Link to post
Share on other sites
MilenKo    61

Francicio, my opinion would not differ from the rest here. I have always thought that a good editor should have everything in it (color changes, anchors, and all the cool features), however I came to the conclusion that I am losing control over the content and if for some reason I decide to switch to another editor, then some or all of the codes, styles etc. might break and cause big headaches. That is why I am trying to type most of the commands manually, type the stylings manually and define them in separate CSS (depending on the case) so the code is clear having just the styles call and the rest is done by CSS.

In your case the code become much easier to read:  <p class="blablabla" ; >This is a paragraph.</p>

And in CSS you add the desired styling to .blablabla {....} Adding code inline would require you to change it on every instance once you change your mind for the appearance and in some cases having 10-20K of pages might be the worst nightmare. Having to change a few CSS lines of the .blablabla would be the cool and easy fix ;)

Share this post


Link to post
Share on other sites

Hi, 

exuse me I'm italian e I don'able to explain my problem.

My probem is:

1. How can I change the color of 1 word into the text? I can do it only by addon?
2. How can I change the align of 1 row into the text? I can do it only by addon?

For change the style of all document I use CSS, but I cant'use CSS per change the color of 1 word or the alignment of 1 row.

I don't know how to install addon of CKeditor into processwire. There is a guide for processwire?

I don't Know if is possible to put a blank row, a empty space, because CKeditor clean all and remove the empty row, but I need blank row.

With Repeater Matrix the site became more slowly?

 

Thanks!  


 

Share this post


Link to post
Share on other sites
adrian    7,674
51 minutes ago, franciccio-ITALIANO said:

My probem is:

1. How can I change the color of 1 word into the text? I can do it only by addon?
2. How can I change the align of 1 row into the text? I can do it only by addon?

I think you are much better off defining distinct "styles" for Ckeditor rather than allowing full manipulation - if you give editors free reign to change colors, you're likely to end up with a really ugly site.

You can read more about setting up styles here: https://github.com/processwire/processwire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-css-file

  • Like 2

Share this post


Link to post
Share on other sites

 

...sure, I would like change colour of 1 word by Editor Panel rather that css doc. 

BUT, how can I install addon to CKEditor? There is a guide for in processwire?

 

Thankk you very much!

Share this post


Link to post
Share on other sites

Thanks Flydev! 
I red your link, don't need install any CKE Addon!! :)

For new entry, the "CKEditor Toolbar" is in Setup -> Fields -> Body -> Imput. Here, add only words not plugin:

 

Save, NewPage, Preview, Templates
Cut, Copy, Paste, PasteText, PasteFromWord, -, Undo, Redo

Find, Replace, -, SelectAll, -, Scayt, -, Sourcedialog

Form, Checkbox, Radio, TextField, Textarea, Select, Button, ImageButton, HiddenField
Bold, Italic, Underline, Strike, Subscript, Superscript, -, RemoveFormat
NumberedList, BulletedList, -, Outdent, Indent, -, Blockquote, CreateDiv, -, JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock, -, BidiLtr, BidiRtl, Language
PWLink, Unlink, Anchor
PWImage, Flash, Table, HorizontalRule, Smiley, SpecialChar, PageBreak, Iframe
Styles, Format, Font, FontSize
TextColor, BGColor
Maximize, ShowBlocks

 

For each word PW install one CKE Plugin. Remove the words for to remove the plugin! 

 

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By franciccio-ITALIANO
      Hi, I know the the templates in processwire are html files.
      I search it into foleder "site" of standard installation of processwire standard theme (blanck and that blue) but I don't find any html file to modify it by html code.
      So, I must modify it only by php code?
      Can I traduct php pages templates in html page?
    • By antknight
      I am after a bit of guidance on importing content to ProcessWire. I am using a program called Clarify to generate work instructions. I would like to use ProcessWire to put together a knowledgebase of work instructions.
      I have Clarify outputting an HTML file and a folder of images for each work instruction which I would like to become a page in PW.
      An example of the HTML output is attached.
      How can I import these pages and the folder of images and keep the image links intact?
      Many Thanks
      Anthony
      clarify-example.zip
    • By MilenKo
      Hello. I am working on a culinary web project where I am aiming at listing all recipes with a pagination after reaching the recipe limit. As far as I already did the pagination on another project, I was quite happy to use the code and see it in action. However, my joy was not lasting long as far as the present pagination HTML code differs from the other and I was scratching my head today for several hours and yet no solution to precisely match the styling.
      I was able to apply the pagination, show the prev/next and numbers properly, however the active class is not applied properly and the design has the prev/next arrows at the both ends of the recipe block (image attached).
      Here is the pagination original html code:
      <!-- Pagination --> <div class="sixteen columns"> <div class="pagination-container"> <nav class="pagination"> <ul> <li><a href="#" class="current-page">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </nav> <nav class="pagination-next-prev"> <ul> <li><a href="#" class="prev"></a></li> <li><a href="#" class="next"></a></li> </ul> </nav> </div> </div> And here is my pagination code (after making sure that the template pagination is enabled):
      <div class="sixteen columns"> <div class="pagination-container"> <?php echo $result->renderPager(array( "nextItemLabel" => __(">>"), "previousItemLabel" => __("<<"), "currentItemClass" => "current-page", 'listMarkup' => "<nav class='pagination'><ul>{out}</ul></nav>", 'itemMarkup' => "<li>{out}</li>", 'linkMarkup' => "<a href='{url}'>{out}</a>" )); ?> <nav class="pagination-next-prev"> <ul> <li><a href="#" class="prev"></a></li> <li><a href="#" class="next"></a></li> </ul> </nav> </div> </div> As far as the pagination active class is not applied on the <li> but on the <a href... > I tried to change the linkMarkup to: 'linkMarkup' => "<a href='{url}' class='{class}'>{out}</a>" however that shows that the {class} is not applied with linkMarkup but with itemMarkup. Tried to add the class to itemMarkup too, but the same result is showing.
      For sure the navigation is not an issue if it is next to the numbers, however I wanted to attempt to match fully the style and learn how can I move the prev and next pointers away from there or in other words to match the original theme.
      So any ideas how to achieve the proper functionality and obtain the previous/next page links? I read so many tutorials and manuals today mentioning to use prev() and next() but in my case the results are not coming from $page and the next page pointed to the next page in my admin but not the next results page.

    • By mrjasongorman
      I recently had a revelation when building HTML emails, what's the difference between HTML emails, and HTML web pages? Other than the horrible table syntax, the result is the same, it's still HTML.
      This got me thinking why not use a CMS to help generate the HTML emails based on a template? Just like we using a CMS to help generate HTML web pages.
      We started by setting up ProcessWire (our usual CMS of choice) and added the relevent fields for the sections of the email. Then we took a previous email moved the content into ProcessWire and hooked up the code to pull that content back into the correct places. Repeater fields allowed us to have repeatable sections that are easy to add too, change order of or remove, giving us huge flexibility when a client changes their mind last minute. The speed of setting up and dealing with ProcessWire allowed us to go from concept to working prototype within a day.
      To use the emails, we just view source of the generated page, and copy and paste into the email system. Sometimes Litmus inliner is required to allow the email to work in Outlook, but we can run it through that before pasting into the email system. Future development could be integrating a css inliner into the generation step, to avoid using litmus inliner.
      Hope this helps show how ProcessWire can be used in a different scenario.
    • By MilenKo
      Greetings to all of you gorgeous people here. I have stumbled across ProcessWire while looking for functionality info on MODx Revo and I felt in love with it. As far as I am not a programmer and have enough books to read and learn throughout my IT job, I was looking for something to be easy (for starting) and that can let me have fun and learn something extra.
      To make the learning memorable, I am always diving into the matter so following my habit in PW too, I decided to pick up a more complex HTML theme and make it dynamic using PW.
      Am I a programmer - well, I can read and eventually modify some code, but to write it from scratch - not anywhere close. Am I an HTML guru - not exactly, and that is why I decided to grab a theme I like and play with it. My only requirement was to have a well written and fully validated responsive theme. So I found THIS ONE and plan to work with it (already purchased to support the developer).
      I am planning to share my approaches and the progress so would appreciate any shared thoughts, advice, and even some criticism if you see me getting into a wrong direction. Having done most of the project under ModX it should not be that difficult for me to have all the bits and pieces in place. Where I am not sure yet how that would be done are the pull up of the latest posts/comments, the categories with listings, search, and some other stuff. What I found great in PW was the fact that it already has a fully working theme that I can dissect, read through a zooming glass and take some code from there. 
      My first question is - which way should I go for the repetitive pieces of code (chunks) - should I create an include folder in site/templates and put all my pieces as XXXX.inc or I should just add those in the database as templates with no file assigned to them and set as not searchable etc. I would appreciate if you share your best experience and give some info why that is the better option so that I can understand the approach and turn it into a proper habit.
      Once I have this cleared out, I would start documenting the process so any corrections or better approaches can be suggested.
      Wish me luck on that journey and let's make it happen together. Shall we?