function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Xuan TungXuan Tung 

Issue about use Lightning Design System in visualforce page.

Hi every one.

I am stucking in use Rich Text Editor of SLDS https://lightningdesignsystem.com/components/rich-text-editor/#site-main-content, I has completed design experience but I can't click the buttons for action bold, Italic, underline.v.v. Do I have to handle all of button by javascript? 
Thanks
Arun ParmarArun Parmar
hi Xuan Tung,

If you do not want to override any action than you must use lightning:inputRichText component.
Go through the following link.
https://developer.salesforce.com/docs/component-library/bundle/lightning:inputRichText/example

Please mark as best answer if it helpful.
Thanks
Xuan TungXuan Tung
Thank for your answer, Arun Parmar

I have tried with lightning:inputRichText component but it not included add hyperlink and change font color. LDS has every thing I need but I can't run the button function, it just a the design . I don't know how to create the rich text editor and use bold, Italic.. to work.
This is my example code 
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" lightningStyleSheets="true">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
<body>

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope">

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">
      Salesforce Lightning Design System Trailhead Module
    </p>
    <!-- / MASTHEAD -->

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">

      <!-- SECTION - BADGE COMPONENTS -->
      <section aria-labelledby="badges">
        <h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
        <div>
          <span class="slds-badge">Badge</span>
          <span class="slds-badge slds-theme--inverse">Badge</span>
        </div>
      </section>
      <!-- / SECTION - BADGE COMPONENTS -->

    </div>
    <!-- / PRIMARY CONTENT WRAPPER -->
    <div class="slds-timeline__item">
  	<div class="slds-scope ">
   <!--THIS IS THE SOURCE CODE OF LDS-->
    <!-- <div class="demo-only" style="min-height:180px"> -->
   <div class="slds-form-element">
    <span id="rich-text-editor-unique-id-01" class="slds-form-element__label">Details and Steps to Reproduce</span>
    <div class="slds-form-element__control">
      <div class="slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap">
        <div role="toolbar" class="slds-rich-text-editor__toolbar slds-shrink-none">
          <ul aria-label="Format text" class="slds-button-group-list">
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="0">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#bold')}"></use>
                </svg>
                <span class="slds-assistive-text">Bold</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#italic')}"></use>
                </svg>
                <span class="slds-assistive-text">Italic</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#underline')}"></use>
                </svg>
                <span class="slds-assistive-text">Underline</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#strikethrough')}"></use>
                </svg>
                <span class="slds-assistive-text">Strike Through</span>
              </button>
            </li>
          </ul>
          <ul aria-label="Format body" class="slds-button-group-list">
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#richtextbulletedlist')}"></use>
                </svg>
                <span class="slds-assistive-text">Bulleted List</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#richtextnumberedlist')}"></use>
                </svg>
                <span class="slds-assistive-text">Numbered List</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#richtextindent')}"></use>
                </svg>
                <span class="slds-assistive-text">Indent</span>
              </button>
            </li>
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#richtextoutdent')}"></use>
                </svg>
                <span class="slds-assistive-text">Outdent</span>
              </button>
            </li>
          </ul>
          <ul aria-label="Remove Formatting" class="slds-button-group-list">
            <li>
              <button class="slds-button slds-button_icon slds-button_icon-border-filled" tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                  <use xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#remove_formatting')}"></use>
                </svg>
                <span class="slds-assistive-text">Remove Formatting</span>
              </button>
            </li>
          </ul>
        </div>
        <div class="slds-rich-text-editor__textarea slds-grid">
          <div aria-labelledby="rich-text-editor-unique-id-01" contenteditable="true" class="slds-rich-text-area__content slds-text-color_weak slds-grow" id="descriptionId"></div>
        </div>
      </div>
    </div>
  </div>
 </div>
 <!--THIS IS THE SOURCE CODE OF LDS END-->
</div>  
  </div>
</body>
</html>
</apex:page>

 
Van DungVan Dung
@Xuan Tung: you can follow this topic: 
https://developer.salesforce.com/forums/?id=906F000000096IdIAI
Or embed the lightning component into the visualforce page.
https://www.codescience.com/blog/2015/lightning-in-using-lightning-out-to-access-lightning-components-in-visualforce

 
Xuan TungXuan Tung
Thank Van Dung!
I already referenced and tried to build your links and but I'm looking for forward to design look like the rich text editor in the lightning experience. User-added image
 lightning component is good but I can't attach a hyperlink and font color.
Best regard!
Van DungVan Dung
@Xuan Tung,
I got it. But did you try to using the library as FCK??
You can try with the sample below: 
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" lightningStyleSheets="true">
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="robots" content="noindex, nofollow"/>
  <title>Classic editor with default styles</title>
  <script src="https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10" data-sample-short="data-sample-short">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      height: 260,
      width: 700,
    });
  </script>
</body>

</html>
</apex:page>

 
Xuan TungXuan Tung
@Van Dung
It look so nice.
I already running well with apex:inputField but it is a classic experience. I mean I want it look like a lightning experience in the visualforce page.