Text area issue

Question

Text area issue

Peter_1985 2,736

The text area is not shown well, using the codes below. What to adjust?
   
        <asp:Label ID="Label4"
            Text="..."
            Width="150px"
            Font-Names="標楷體"
            Font-Size="14pt"
            Font-Bold="true"
            ForeColor="Black"
            runat="server" />
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/ckeditor.js") %>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/adapters/jquery.js") %>"></script>

        <div id="dvDesc">
            <asp:Repeater ID="rptDesc" runat="server">
                <ItemTemplate>
                    <table class="tblDesc" cellpadding="2" cellspacing="0" border="1">
                        <tr>
                            <td>
                                <b>
                                    <u>
                                        <span class="cDesc"><%# Eval("cDesc") %></span>
                                    </u>
                                </b>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div>
            <ul id="CommentList">
                <li>评论 1: <textarea id="Comment1" name="MyEA" runat="server"></textarea></li>
            </ul>
        </div>

Accepted answer

0 additional answers

Your answer

Answer 1

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Peter_1985,

The text area is not shown well, using the codes below. What to adjust?

I tested your code and I think you can adjust it to look like below.

      <div>
         <ul id="CommentList" style="  list-style-position: inside;
padding-left: 0;">
             <li >评论 1:<br /><textarea id="Comment1" name="MyEA" runat="server" placeholder="Enter your Comment here ..."
        style="width: 250px;height: 100px;"></textarea></li>
          </ul>
      </div>

User's image

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Peter_1985 2,736 Reputation points

2023-10-03T07:42:56.2266667+00:00

Thanks a lot.
Peter_1985 2,736 Reputation points

2023-10-03T07:50:00.4666667+00:00

I put your code. The text area is not shown well below. Can you help?
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-10-03T08:17:25.33+00:00
Hi @Peter_1985,

This part of the code should be newly added by you, it is not included in your question.

You cannot use <p><strong></strong></p> directly in <textarea>. Your VS should have the following prompt.

If you want to display bold text, you need to use CSS.

<textarea style="font-weight: bold">test-text</textarea>
Peter_1985 2,736 Reputation points

2023-10-05T10:18:56.0833333+00:00

Is it a display issue in above (to Text area)? In the past, I used the same code and had no such problem.
AgaveJoe 1,510 Reputation points

2023-10-05T13:48:52.43+00:00

The textarea has always behaved this way. Perhaps you were using the CKEditor library in the past?
Peter_1985 2,736 Reputation points

2023-10-06T01:54:52.6333333+00:00

Yes, I used CKEditor. How to ensure no issue in above?

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Peter_1985,

Not sure which version of CKEditor you are using. CKEditor 4 reached End of Life (EOL) in June 2023.

You can use CKEditor 5.

If you use CKEditor, in addition to the CKEditor.js file you are using, you will need to call the ClassicEditor.create() method to display the editor.

Below is my test running CKEditor 5 via CDN for your reference:

 <form id="form1" runat="server">
      <asp:Label ID="Label4"
         Text="..."
         Width="150px"
         Font-Names="標楷體"
         Font-Size="14pt"
         Font-Bold="true"
         ForeColor="Black"
         runat="server" />
     
      <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
     <div id="dvDesc">
         <asp:Repeater ID="rptDesc" runat="server">
             <ItemTemplate>
                 <table class="tblDesc" cellpadding="2" cellspacing="0" border="1">
                     <tr>
                         <td>
                             <b>
                                 <u>
                                     <span class="cDesc"><%# Eval("RefundAmount") %></span>
                                 </u>
                             </b>
                         </td>
                     </tr>
                 </table>
             </ItemTemplate>
         </asp:Repeater>
     </div>
            

     <div>
         <ul id="CommentList">
             <li>评论 1: <textarea id="Comment1" name="MyEA" runat="server"><p><strong>TEST TEST</strong></p></textarea></li>
         </ul>
     </div>
      <script>
          ClassicEditor
              .create(document.querySelector('#Comment1'))
              .catch(error => {
                  console.error(error);
              });
      </script>
 </form>

User's image

Peter_1985 2,736

Comparing with the older version, does it also have jquery.js to CKEditor 5? Can I get both js files like the way below?

        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/ckeditor.js") %>"></script>
        <script type="text/javascript" src="<%= ResolveUrl("~/content/javascript/ckeditor/adapters/jquery.js") %>"></script>

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-10-06T03:45:14.45+00:00

Hi @Peter_1985,

I studied the documentation for CKEditor 5 and I think there is no adapters/jquery.js file.

Using the code like

CKEditor 5 should be considered a totally new editor.I don't think they can be used together.

Since CKEditor is a third-party tool, I don't know much about it. If you want to know more about it, maybe ask for its official support would be a better option.

Peter_1985 2,736

Using the code like

        <script type="text/javascript" src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>

it does still show the following. Any idea?

Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-10-06T03:57:54.9933333+00:00

Hi @Peter_1985,

Have you used this part of the code?

Share via

Text area issue

0 additional answers

Your answer