CKEditor View Not Being Used #44

Closed
macinjosh opened this Issue Feb 14, 2013 · 16 comments

3 participants

@macinjosh

I've followed the instructions included in the readme but any field where I set the type to 'ckeditor' the default textarea view is used to render the view instead of 'ckeditor_widget.html.twig' from this bundle.

Obviously that means the field is not a CKEditor, just a plain old textarea. Any thoughts on what might be going on?

@trsteel88
Owner

Have you installed your assets using "php ./app/console assets:install web"?

Does the ckeditor script appear in the raw html source?

@macinjosh

Yes I did install the assets and I see them where they should be.

FWIW I am using PHP templates not twig. When I view the source the field is clearly rendered with the default textarea form view I can even add some junk text to the textarea form view and it is rendered in the form.

I've also put some debug print statements in the methods in CkeditorType.php and they are being called.

@trsteel88
Owner

The bundle required twig to render the template. Is the twig bundle installed and enabled in the config?

@macinjosh

Yes twig is installed and enabled in the config file. I am using Symfony 2.1

framework:
    secret: '%secret%'
    router:
        resource: '%kernel.root_dir%/config/routing.yml'
        strict_requirements: '%kernel.debug%'
    form: true
    csrf_protection: true
    validation:
        enable_annotations: true
    templating:
        engines:
            - twig
            - php
    default_locale: '%locale%'
    trust_proxy_headers: false
    session: null
twig:
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
@mgls

I am having a similar problem. I followed the install/config. I'm using Twig for all my views in the Symfony2.1 app.

When I go to a localhost page with this CKEditor I get a standard HTML textarea. However, if I open the file directly ie. with this prefix "file:///C:/xampp/htdocs/ProjectName/..." from my browser, I can see the CKEditor. So the samples work if I open the file directly from the file system but not using localhost. Apologize if there is a simple step I'm missing here. Appreciate the help.

@trsteel88
Owner
@mgls

Here is the "textarea" source after page renders for the "Replace Textarea" sample - please let me know if you want to see the source for the whole page:

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">             &lt;h1&gt;&lt;img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong"&gt;Neil Armstrong&lt;/a&gt; and &lt;a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin"&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;strike&gt;three and a half&lt;/strike&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)"&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module"&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id="quotes" name="quotes"&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race"&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy"&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id="tech-details" name="tech-details"&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align="right" border="1" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:10px 0 10px 15px;"&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope="col"&gt;Position&lt;/th&gt; &lt;th scope="col"&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center"&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href="http://en.wikipedia.org/wiki/NASA" title="NASA"&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis"&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean"&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style="text-align: right;"&gt;&lt;small&gt;Source: &lt;a href="http://en.wikipedia.org/wiki/Apollo_11"&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
            </textarea>
@trsteel88
Owner

I am after the full html source please. eg

<html>
<head>
...
</head>
<body>
...
</body>
</html>
@mgls

sure thing. appreciate you looking into this.

<!DOCTYPE html>
<!--
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html>
<head>
    <title>Replace Textareas by Class Name &mdash; CKEditor Sample</title>
    <meta charset="utf-8">
    <script src="../ckeditor.js"></script>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
    <h1 class="samples">
        <a href="index.html">CKEditor Samples</a> &raquo; Replace Textarea Elements by Class Name
    </h1>
    <div class="description">
        <p>
            This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
            of a given class with a CKEditor instance.
        </p>
        <p>
            To replace a <code>&lt;textarea&gt;</code> element, simply assign it the <code>ckeditor</code>
            class, as in the code below:
        </p>
<pre class="samples">
&lt;textarea <strong>class="ckeditor</strong>" name="editor1"&gt;&lt;/textarea&gt;
</pre>
        <p>
            Note that other <code>&lt;textarea&gt;</code> attributes (like <code>id</code> or <code>name</code>) need to be adjusted to your document.
        </p>
    </div>
    <form action="sample_posteddata.php" method="post">
        <p>
            <label for="editor1">
                Editor 1:
            </label>
            <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
                &lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;strike&gt;three and a half&lt;/strike&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
            </textarea>
        </p>
        <p>
            <input type="submit" value="Submit">
        </p>
    </form>
    <div id="footer">
        <hr>
        <p>
            CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
        </p>
        <p id="copy">
            Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
            Knabben. All rights reserved.
        </p>
    </div>
</body>
</html>
@mgls

FWIW - I ran a diff on the source from the "working" and "non-working" pages and the post-render source is identical.

@trsteel88
Owner

Have you just pasted from ckeditor sample? You shouldn't have any ckeditor.js included. The bundle will automatically include that html.

You are using the form component right?

@mgls

Yes, what I have pasted is the example from the CkeditorBundle samples directory.

This shows a working CKeditor: file:///C:/xampp/htdocs/ProjectName/vendor/Trsteel/ckeditor-bundle/Trsteel/CkeditorBundle/Resources/public/samples/replacebyclass.html

This doesn't show a working CKeditor (just shows a text area with HTML content): http://localhost/ProjectName/vendor/Trsteel/ckeditor-bundle/Trsteel/CkeditorBundle/Resources/public/samples/replacebyclass.html

I didn't add any additional code or includes to the above samples. Thanks.

@mgls

I created a barebones example - removing all my other styling and controls within my project - as to isolate the test case. I have included the relevant files/code below. While I didn't not import the ckeditor.js in my code, it looks like the file was picked up and the rendered HTML includes the additional js for the CKEditor control. However, I'm still just seeing a standard HTML text area in the browser.

Also, note that when the page goes to render in the browser there is a slight delay as if there is some "extra work" that is being processed.

Thanks!

--- app/config/config.yml

trsteel_ckeditor:
    class: Trsteel\CkeditorBundle\Form\Type\CkeditorType
    transformers: ['strip_js', 'strip_css', 'strip_comments']
    toolbar: ['document', 'clipboard', 'editing', '/', 'basicstyles', 'paragraph', 'links', '/', 'insert', 'styles', 'tools']
    toolbar_groups:
        document: ['Source','-','Save','-','Templates']
        clipboard: ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']
        editing: ['Find','Replace','-','SelectAll']
        basicstyles: ['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']
        paragraph: ['NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft', 'JustifyCenter','JustifyRight','JustifyBlock']
        links: ['Link','Unlink','Anchor']
        insert: ['Image','Flash','Table','HorizontalRule']
        styles: ['Styles','Format']
        tools: ['Maximize', 'ShowBlocks']
    ui_color: '#000000'
    startup_outline_blocks: true
    width: 800 #Integer or %
    height: 300 #Integer or %
    language: 'en-au'
    filebrowser_upload_url:
        url: relative-url.php?type=file
    #filebrowser_image_browse_url:
        #route: route_name
        #route_parameters:
            #type: image

FormType PHP File

public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('message', 'ckeditor')
        ;
    }

Twig View File

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="content">
            <form action="{{ path('create') }}" method="post" {{ form_enctype(form) }}>
                {{ form_errors(form) }}

                <div>
                    {{ form_label(form.message) }}<br/>
                    {{ form_errors(form.message) }}<br/>
                    {{ form_widget(form.message) }}<br/>
                </div>

                {{ form_rest(form) }}
                <p>
                    <button type="submit">Send</button>
                </p>
            </form>
        </div>
    </body>
</html>

Rendered HTML Output

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="content">
            <form action="/projectname/web/app_dev.php/edit/create" method="post" >


                <div>
                    <label for="projectname_acmebundle_acmetype_message">Message</label><br/>
                    <br/>
                    <textarea id="projectname_acmebundle_acmetype_message" name="projectname_acmebundle_acmetype[message]"></textarea><script type="text/javascript">
            var CKEDITOR_BASEPATH = '\x2Fprojectname\x2Fweb\x2Fbundles\x2Ftrsteelckeditor\x2F';
        </script><script type="text/javascript" src="/projectname/web/bundles/trsteelckeditor/ckeditor.js"></script><script type="text/javascript">
                            CKEDITOR.replace("projectname_acmebundle_acmetype_message",{
                            width: '800',
                                        height: '300',
                                                    language: 'en-au',
                                        uiColor: "#000000",
                                        startupOutlineBlocks: 1,
                                                    filebrowserUploadUrl: 'relative-url.php?type=file',

                                                                                                                                                                        toolbar: [{"name":"document","items":["Source","-","Save","-","Templates"]},{"name":"clipboard","items":["Cut","Copy","Paste","PasteText","PasteFromWord","-","Undo","Redo"]},{"name":"editing","items":["Find","Replace","-","SelectAll"]},"\/",{"name":"basicstyles","items":["Bold","Italic","Underline","Strike","Subscript","Superscript","-","RemoveFormat"]},{"name":"paragraph","items":["NumberedList","BulletedList","-","Outdent","Indent","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"]},{"name":"links","items":["Link","Unlink","Anchor"]},"\/",{"name":"insert","items":["Image","Flash","Table","HorizontalRule"]},{"name":"styles","items":["Styles","Format"]},{"name":"tools","items":["Maximize","ShowBlocks"]}]
        });
        </script><br/>
                </div>

                <input type="hidden" id="projectname_acmebundle_acmetype__token" name="projectname_acmebundle_acmetype[_token]" value="474f0a5289e493846b851a89d4a02b5cb790fa1f" />
                <p>
                    <button type="submit">Send</button>
                </p>
            </form>
        </div>

</body>
</html>
@trsteel88
Owner

Do you have a browser console where you can see all the resources that are loading? Does the ckeditor.js file load correctly?

@trsteel88
Owner

Can you please update to the latest version to see if this is still occuring?

@trsteel88
Owner

Closing due to no response

@trsteel88 trsteel88 closed this Apr 5, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment